Zvětšení obrázku výrobku pomocí jQZoom
Eshopy postavené na platformě INSHOP4 je možné rozšířit o populární javascriptové frameworky, které dokáží webovou prezentaci rozpohybovat a udělat pro návštěvníka zajímavější. Jedním takovým rozšířením je jQZoom, pomocí kterého lze zvětšit náhledový obrázek.
Rychlý postup instalace:
- Stáhnout celý jQZoom a rozbalit
- Vložit definice skriptů a stylů do hlavičky šablony Layout.ascx
- Upravit například šablonu detailu (ProductDetailSimple.ascx) dle návodu
- Zvolit nejvhodnější nastavení doplňku pomocí jednoduchých úprav skriptu
Příklad:
Úprava šablony Layout.ascx
Mezi tagy hlavičky <head></head> je potřeba přidat:
<script type='text/javascript' src='/inshop/js/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='/inshop/js/jquery.jqzoom1.0.1.js'></script>
<link rel="stylesheet" type="text/css" href="/inshop/css/jqzoom.css" />
</head>
Skripty s příponou .js jsem nakopíroval do šložky /inshop/js/, soubor se styly do složky /inshop/css/, které jsem si předem vytvořil.
Úprava šablony detailu - ProductDetailSimple.ascx
Do horní části šablony ještě před vložení obrázku vložíme skript, kterým nastavíme vlastnosti zvětšování (přiblížení):
<script type="text/javascript">
$(document).ready(function(){
$(function() {
var options =
{
zoomWidth: 300,
zoomHeight: 200,
position : 'right',
yOffset :50,
xOffset :50,
title :false
}
$(".jqzoom").jqzoom(options);
});
});
</script>
Do definice odkazu na velký obrázek přidáte třídu jqzoom:
<a class="jqzoom" href="" title="">...
Upozornění: jQZoom funguje na principu, že máte zobrazen malý náhledový obrázek a při přejetí myší se zobrazuje stejný, ale rozměrově větší obrázek. To znamená, že jsou využity obě velikosti obrázků, které INSHOP4 poskytuje.