W TRAKCIE Zmiana wielkości obrazka i miniatur na stronie produktu

Cześć.

Chciałbym wprowadzić małą korektę w layoucie strony produktu:

• zwiększyć obraz główny (jenocześnie podgląd przy zoomie)
• zwiększyć rozmiar miniaturek
• zaweżyć pole po prawj stronie od obrazu głównego, co jest oczywiście następstwem większego obrazu

Help, please!
Podgląd online > http://www.lovely-home.pl/en_US/p/Pure-Cotton-Duvet-Cover-white/1696

Jest tak:

chciałbym mniej więcej tak:

 

Bez mian w plikach HTML możesz jedynie powiększyć miniatury pod zdjęciem głównym bo tam są dostępne zdjęcia max 120px na 120px. Zdjęcie główne pobiera się max 500 na 500 więc juz Ci się pobiera maksymalne a co za tym idzie sztuczne powiększanie pogorszy jakość zdjęcia (trzeba by podłubać w kodzie karty produktu).

Do zmiany miniatur możesz użyć takiego kawałka kodu CSS:

Code:

#box_productfull .productimg .smallgallery li{
  width: 120px;
  height: 75px;
  border: 0;
}

Oczywiście wartości ustal odpowiednie dla Ciebie ale nie przekraczaj 120. Ostatni parametr wyłącza obramowanie bo trochę dziwnie wygląda jak zdjęcie nie wypełnia idealnie ramki.

 

Dzięki za radę.

Dodałem ten kod, ale wyskakuje mi jakiś problem.

 

kod który przesłałem sam w sobie jest poprawny. Ten błąd który Ci się wyświetla może wynikać albo z błędów w kodzie który juz masz dodany albo źle dodałeś ten kod który Ci podałem. Jeżeli jesteś pewien, że wszystkie poprzednie rzeczy masz poprawnie to użyj edytora kodu do edycji pliku user.css a nie zakładki "Własny styl CSS". Dodatkowy edytor nie ma wbudowanej walidacji więc powinno Ci się zapisać bez problemu.

 

Cool! Edycja w pliku user.css działa bez zarzutu - http://www.lovely-home.pl/en_US/p/Pure-Cotton-Duvet-Cover-obsidian-blue/1730

A da sie jakoś wyłaczyć slider tych miniaturek, a zaian tego żeby się układało w kolejnych wierszach?

 

a co do zdjęcia głównego to może da się jakoś usunąć ten margines wewnętrz obramowania, żeby fotka wypełniała całą tę przestrzeń.

 

Tak na szybko mogę zaproponować ustawienie na sztywno wysokości dla tych obrazków w tym miejscu. Oto kod:

Code:

.mainimg.productdetailsimgsize.row img {
    width: 573px;
}

 

czy sprawdziliście jak to wygląda teraz w wersji mobilnej? polecam wepchnięcie tego dodatkowo w media i ustalenie różnych wartości dla różnych rozdzielczości.

 

Dzięki Mariusz, obrazek fajnie się powiększył.
Próbowałem jeszcze usunąć szarą ramkę wokół zdjęcia dodając jedną linijkę
border: 0;
ale nie zadziałało mi.