Zdjęcie produktu w oknie zoom

Prestashop posiada opcję, która nie jest standardowa włączana podczas instalacji sklepu. Jest nią opcja jqZoom, aby ją włączyć należy w panelu administracyjnym sklepu ( uwaga, nie każdy szablon sklepu poprawnie obsłuży ten plugin )  wybieramy preferencje – > produkty -> włącz jqZoom.

Sposób w jaki będą wyświetlane powiększone zdjęcia produktów możemy konfigurować po przez edycję pliku product.js, który znajduje się w katalogu: themes/nasz-szablon/js/products.js

Przykładowe ustawienia:

//set jqZoom parameters if needed
	if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
	{
		$('.jqzoom').jqzoom({
			zoomType: 'standard', //innerzoom/standard/reverse/drag
			zoomWidth: 675, //zooming div default width(default width value is 200)
			zoomHeight: 470, //zooming div default width(default height value is 200)
			xOffset: 30, //zooming div default offset(default offset value is 10)
			yOffset: 0,
			showEffect:'show',
            hideEffect:'fadeout',
            fadeoutSpeed: 'slow',
	    title: false
		});
	}

Opis wszystkich dostępnych ustawień z przykładami dostępne są pod adresem: http://testing.worldaccordingtorobert.com/jquery/jqzoom_evolution/index.htm

Aby powiększone zdjęcie było prawidłowo wyświetlane niezależnie od rozdzielczości ekranu, edytujemy plik product.css

  .pb-left-column #image-block a.jqzoom div div img {
	width: auto;
    max-width: 10000px; 
	}
@media (min-width: 1200px) {
	.pb-left-column #image-block a.jqzoom div div img {
	width: auto;
    max-width: 1200px;
	}
}
@media (min-width: 1400px) {
	.pb-left-column #image-block a.jqzoom div div img {
	width: auto;
    max-width: 1400px;
	}
}
@media (min-width: 1480px) {
	.pb-left-column #image-block a.jqzoom div div img {
	width: auto;
    max-width: 10000px;
	}
}