1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

W TRAKCIE zdjęcia z linkami do kategorii

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika Elina, 18 Kwiecień 2017.

  1. Elina

    Elina Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    Dzień dobry,

    Szukam porady odnośnie wyświetlania kategorii podczas najechania na zdjęcie myszką. Obecnie mam napis nałożony na zdjęcie z kategorią produktów i po naciśnięciu zdjęcia zostajemy odesłani do danej kategorii. Zdjęcie w załączniku. Chciałabym jednak aby zlikwidować napisy na zdjęciach, a napis aby się wyświetlał dopiero po najechaniu na ikonkę. Czy ktoś może wie jak to zrobić? Elina
     

    Załączone pliki:

    • image.png
      image.png
      Rozmiar pliku:
      771,6 KB
      Wyświetleń:
      488
  2. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    można to zrobić klasą z :hover, tekst linku ukryty np przez display:none, a po najechaniu (czyli hover) wyświetliłby się przez display: block :)
    podaj adres strony, będzie łatwiej dokładnie opisać :)
     
  3. Elina

    Elina Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    dziękuję:) podaję adres: http://sklep1717438.home.pl/ - sklep jeszcze nie działa ale go włączyłam chwilowo. Czyli co miałabym wpisać w module w sliderze? Aktualnie jest to co poniżej:

    <div class="f-row">
    <div class="f-grid-6"><a href="/pl/c/Kwiaty-cięte/1"><img src="/public/assets/2017.03.29_prosta_forma_warszawa_260111.jpg" alt="" width="575" height="383" /></a></div>
    <div class="f-grid-6"><a href="/pl/c/Kompozycje-w-szkle-i-donicach/32"><img src="/public/assets/2017.03.29_prosta_forma_warszawa_150.jpg" alt="" width="575" height="383" /></a></div>
    <div class="f-row">
    <div class="f-grid-6"><a href="/pl/c/Artykuły-dekoracyjne/51"><img src="/public/assets/2017.03.29_prosta_forma_warszawa_203333.jpg" alt="" width="575" height="383" /></a></div>
    <div class="f-grid-6"><a href="/pl/c/Kwiaty-w-pudełkach/36"><img src="/public/assets/2017.03.29_prosta_forma_warszawa_1650001.jpg" alt="" width="574" height="383" /></a></div>
    </div>
    </div>
     
  4. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    ok, widzę kupowany szablon, trzeba się w niego zagłębić :)
    od razu Ci powiem, że w takiej formie to zapomnij, że ktoś Ci coś kupi w tym sklepie :) Strona waży ponad 13MB, a wg mnie absolutne max to 1MB :)
     
  5. Elina

    Elina Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    To znaczy ze zdjęcia tyle ważą? Czyli że będzie wolno się otwierać i to zniechęci kupujących? Co proponujesz? Zmniejszyć zdjęcia?
     
  6. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    dostosować natywną wielkość zdjęć do ich wielkości wyświetlanej na stronie.
    Po co Ci zdjęcie o rozdzielczości 4 256 px × 2 832 px jak jest przeskalowane do 575 px × 383 px? :)
    Nie zapominaj o odpowiedniej kompresji, możesz do tego wykorzystać https://developers.google.com/speed/pagespeed/insights/?hl=pl
     
  7. Elina

    Elina Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    Ok czyli pozmniejszać rozdzielczość tych zdjęć z kategoriami tym programem? Myślałam że skoro już je zmniejszyłam to są
    już lżejsze
     
  8. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Zmniejszona rozdzielczość nie równa się optymalnej wielkości. Google bardzo ładnie kompresuje zdjęcia do wg nich optymalnej wielkości/jakości.
     
  9. Elina

    Elina Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    Dzięki Czyli te napisy po najechaniu na zdję cie to nie jest taka prosta sprawa w tym szablonie?
     
  10. Szymonszymon

    Szymonszymon Nowy użytkownik

    Wiadomości:
    1
    Docenione treści:
    0
    Dzień dobry,
    ja kwestie wyświetlenia tekstu po najechaniu na zdjęcie próbuję rozwiązać w ten sposób (szablon clearshop):
    we własnym stylu CSS wkleiłem kod:
    /*poczatek modulu overlay*/

    /* Make the image to responsive */
    .image {
    display: block;
    width: auto;
    height: auto;
    }

    /* The overlay effect - lays on top of the container and over the image */
    .overlay {
    position: absolute;
    bottom: 200px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: auto;
    transition: .2s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    }

    /* When you mouse over the container, fade in the overlay title */
    .container:hover .overlay {
    opacity: 1;
    }
    /*koniec modułu overlay*/

    Natomiast w module promocje/nowości (na stronie głównej, w treści html?) mam taki tekst:

    <div class="f-row">
    <div class="f-grid-6"><a href="/pl/c/Lato2018/3"><img src="/public/assets//glowna3.jpg" alt="" width="601" height="401" /></a> <a href="http://go.polecaj.home.pl/aff_c?offer_id=434&amp;aff_id=1802"><img src="/public/assets//glowna4.jpg" alt="" width="601" height="401" /></a></div>
    <div class="f-grid-6"><a href="http://go.polecaj.home.pl/aff_c?offer_id=434&amp;aff_id=1802"><img src="/public/assets//glowna5.jpg" alt="" width="601" height="823" /></a>
    <div class="overlay">Lato2018 </div>
    </div>
    </div>
    To co jest pogrubione dodałem do tego co już było w ramach szablonu, problem z tym, że działa to dla wszystkich trzech obrazków (po najechaniu na każdy z nich wyświetla się tekst na jednym z obrazków - jak w załączonych zdjęciach: 1 - bez najechania 2: po najechaniu na którekolwiek zdjęcie)
    upload_2018-6-10_20-21-44.png

    upload_2018-6-10_20-21-11.png



    Próbowałem w różnych konfiguracjach wpisywać tą klasę z inną treścią ale zawsze problem jest taki, że wszystkie napisy pojawiają się na zdjęciach po najechaniu na którekolwiek z nich. Zależy mi na tym, żeby każde zdjęcie działało z innym napisem oddzielnie (być może jest prostsze rozwiązanie tej kwestii?). Niestety póki co go nie odnalazłem.
    Z góry dzięki za pomoc :)
     

Poleć forum znajomym