Witajcie,
Przygotowałem drobną modyfikacje zoomu w Preście.
Wdrożony został moduł:
http://www.mind-projects.it/projects/jqzoom/Testowane na 1.4.9
Szybka i bezproblemowa instalacja:1. Ściągamy paczke ze strony
2. Wrzucamy plik jquery.jqzoom.css do themes/NAZWATEMPLATKI/css i
3. Wrzucamy plik jquery.jqzoom-core.js do themes/NAZWATEMPLATKI/js
4. Edytujemy plik themes/NAZWATEMPLATKI/header.tpl (można też dodać to do product.tpl)
5. Dodajemy
<script type="text/javascript" src="{$base_dir_ssl}themes/prestashop/js/jquery.jqzoom-core.js"></script>
<link href="{$base_dir_ssl}themes/prestashop/css/jquery.jqzoom.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'innerzoom',
preloadImages: true,
alwaysOn: false
});
});
</script>
6. Edytujemy plik themes/NAZWATEMPLATKI/product.tpl. Podmieniamy cały blok obrazków na taki:
<!-- product img-->
<div id="image-block">
{if $have_image}
<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}" class="jqzoom" rel='gal1' title="" >
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" title="" >
</a>
{else}
<img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
{/if}
</div>
{if isset($images) && count($images) > 0}
<!-- thumbnails -->
<div id="views_block" {if isset($images) && count($images) < 2}class="hidden"{/if}>
<div id="thumbs_list">
<ul id="thumblist">
{if isset($images)}
{foreach from=$images item=image name=thumbnails}
{assign var=imageIds value="`$product->id`-`$image.id_image`"}
<li>
<a href="javascript:void(0);" rel="{ gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}', largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}' }">
<img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}">
</a>
</li>
{/foreach}
{/if}
</ul>
</div>
</div>
{/if}
Konfiguracja:Całą konfiguracje znajdziecie na oficjalnej stronie modułu.
W pliku header.tpl zmieniamy konfiguracje.
Jeśli chcecie aby obrazki były zamieniane po najechaniu na miniaturę a nie po kliknięciu edytujemy plik jquery.jqzoom-core.js, w linii 183 jest
$(this).hover(function (e) {, podmieniamy na
$(this).mouseover(function (e) {InformacjeDefaultowo ładowane sa obrazki pomniejszone "large".
Duże obrazki "thickbox" ładowane są w tle - co nie irytuje usera
Oczywiście dostosujcie "nazwy" rozmiarów do takich które potrzebujecie.Zdecydowanie polecam włączyć preload obrazków, ładowane są od razu, a nie dopiero po kliknięciu/najechaniu.
Moduł przygotowany na szybko