Hlavní kategorie

Aktuálně ke stažení

Zoner INSHOP4 Manager verze 4.7
(velikost 24 MB)

 

Zoner INSHOP4 Manager verze 4.5
(velikost 24,3 MB)

 

Update verze 4
(velikost 21,8 MB)

 

Manuál pro Zoner INSHOP4 Manager
(velikost 2,5 MB)

 

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:

  1. Stáhnout celý jQZoom a rozbalit
  2. Vložit definice skriptů a stylů do hlavičky šablony Layout.ascx
  3. Upravit například šablonu detailu (ProductDetailSimple.ascx) dle návodu
  4. 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.