Jump to content

Увеличение картинок при наведении Cloud Zoom


Go to solution Solved by yodaexolon,

Recommended Posts

1. Качаем архив и закидываем файлы в папку /js/

2. Подключаем в файле /design/ваша_тема/html/index.tpl перед </head> вставляем:

 

<link rel="stylesheet" href="js/cloud-zoom/cloud-zoom.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="js/cloud-zoom/cloud-zoom.1.0.2.js"></script>
<!-- Call quick start function. -->
<script type="text/javascript">
CloudZoom.quickStart();
</script>
 

3. В файле /design/ваша_тема/html/product.tpl

меняем:

<!-- Большое фото -->
	{if $product->image}
	<div class="image">
		<a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
	</div>
	{/if}
	<!-- Большое фото (The End)-->

 

на

<!-- Большое фото -->
	{if $product->image}
	<div class="image">
		<a href="{$product->image->filename|resize:800:600:w}" class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" /></a>
	</div>
	{/if}
	<!-- Большое фото (The End)-->

и ниже

<!-- Дополнительные фото продукта -->
	{if $product->images|count>1}
	<div class="images">
		{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
		{foreach $product->images|cut as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
	</div>
	{/if}
	<!-- Дополнительные фото продукта (The End)-->

на

<!-- Дополнительные фото продукта -->
	{if $product->images|count>1}
	<div class="images">
		{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
		{foreach $product->images|cut:0 as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" class='cloud-zoom-gallery' title='{$product->name|escape}'
rel="useZoom: 'zoom1', smallImage: '{$image->filename|resize:300:300}' ">
<img src="{$image->filename|resize:95:95}" alt = "{$product->name|escape}"/></a>
		{/foreach}
	</div>
	{/if}
	<!-- Дополнительные фото продукта (The End)-->

Настройки:

http://jquerylist.ru/image-viewer/cloud-zoom.html

cloud-zoom.zip

Link to post
Share on other sites
  • 2 weeks later...

подтверждаю, при наведении на картинку и нажатии на нее, картинку не увеличивает

при наведении картинка увеличивается, а при нажатии ничего и не должно происходить, если вам нужно, чтоб при клике открывался fancybox, то это уже платная функция. http://www.starplugins.com/cloudzoom

Edited by yodaexolon
Link to post
Share on other sites
  • Solution

Итак второе решение зум с всплывающим fancy при клике на фото http://www.elevateweb.co.uk/image-zoom/examples

 

1. Качаем elevatezoom отсюда: http://www.elevateweb.co.uk/image-zoom/download

 

2. загружаем папку elevatezoom-master из архива в папку /js/ вашего сайта

 

3. Подключаем в файле /design/ваша_тема/html/index.tpl перед </head> вставляем:

<script src="js/elevatezoom-master/jquery.elevatezoom.js" type="text/javascript"></script>

4. В файле /design/ваша_тема/html/product.tpl меняем:

<!-- Большое фото -->
	{if $product->image}
	<div class="image">
		<a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
	</div>
	{/if}
	<!-- Большое фото (The End)-->

на:

<!-- Большое фото -->
	{if $product->image}
	<div class="image">

	<img id="zoom_03" src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" data-zoom-image="{$product->image->filename|resize:800:600:w}" />

</div>
	{/if}
	<!-- Большое фото (The End)-->

и ниже:

<!-- Дополнительные фото продукта -->
	{if $product->images|count>1}
	<div class="images">
        {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
		{foreach $product->images|cut as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
	</div>
	{/if}
	<!-- Дополнительные фото продукта (The End)-->

на:

<!-- Дополнительные фото продукта -->
	<div class="images">
<div id="gallery_01">
		{foreach $product->images as $i=>$image}
<a href="#" class="elevateZoom" data-image="{$image->filename|resize:300:300}" data-zoom-image="{$image->filename|resize:800:600:w}">
    <img id="zoom_03" src="{$image->filename|resize:95:95}" />
  </a>
		{/foreach}
	</div>
</div>
	<!-- Дополнительные фото продукта (The End)-->

и в конце файла добавляем:

{literal}
<script>
	//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', zoomWindowOffetx: 10, zoomWindowOffety: -3, imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});
</script>
{/literal}

5. Открываем файл /design/ваша_тема/css/style.css

после:

.product .image {

строка 312 комментируем или удаляем 

text-align: center;

и добавляем стили:

/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}

Рекомендую загружать квадратные фото для красивого отображения на сайте

 

Можно менять вид зума, все настройки здесь: http://www.elevateweb.co.uk/image-zoom/configuration

Edited by yodaexolon
Link to post
Share on other sites
  • 2 weeks later...
  • 1 month later...
  • 3 weeks later...

что-то на мой шаблон не крепится, подскажите куда копать. 
при наведение вроде как бы работает но вот не совсем корректно,
1.хочу убрать рамку которая попадает в область при просмотре
 
2. Добавить другой эффект Inner Zoom
 
Далее код, Это то, на что нужно было заменить  

то что закомментированно было изначально 
 

{if $product->image}
 


<table class="catalog-element-gen_image">
                            <tbody>
                                <tr>
                                    <td>
                                        {if $product->image}
                                        
                                        <!-- <div class="catalog-element-mainimage"> -->
<!--                                             <a class="qb_corner"></a>
                                            <a class="da_corner"></a>
 -->
                                            <img id="zoom_03" src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" data-zoom-image="{$product->image->filename|resize:800:600:w}" />


                                            <!-- <div class="glass">
                                                <img class="image_for_watch js_picture_glass" src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" title="{$product->product->name|escape}">
                                                <div class="glass_lupa"></div>
                                            </div> 
                                      </div>-->                                    
                                                    {else}
                                        <div class="catalog-element-mainimage">
                                            <a class="qb_corner"></a>
                                            <a class="da_corner"></a>
                                            <div class="glass">
                                                <img img class="image_for_watch js_picture_glass" src="design/{$settings->theme|escape}/images/nophoto.gif" ralt="{$product->product->name|escape}" title="{$product->product->name|escape}">
                                                <div class="glass_lupa"></div>
                                            </div>
                                        </div>
 

Далее вставил этот код
Выделяю большие куски кода для того что бы может более ясная картина будет, так как шаблон у меня интернет-магазин

    {if $product->images|count>1}
                    <div data-showintime="5" data-itemw="100" class="catalog-element-extimages main_slider">
                        <!--                 <a href="#" class="catalog-element-extimages_arrow_prev icon multimage_icons disabled main_slider-arrow_prev little" rel="nofollow"></a> -->
                        


                    <div class="images">
                        <div id="gallery_01">
                            {foreach $product->images as $i=>$image}
                            <a href="#" class="elevateZoom" data-image="{$image->filename|resize:300:300}" data-zoom-image="{$image->filename|resize:800:600:w}">
                            <img id="zoom_03" src="{$image->filename|resize:95:95}" />
                            </a>
                            {/foreach}
                        </div>
                    </div>


                        
                        <!-- <a href="#" class="catalog-element-extimages_arrow_next icon multimage_icons main_slider-arrow_next main_slider-arrow_next little" rel="nofollow"></a> -->
                    </div>
                    {/if}
                </div>
 

ну и в самом конце файла сам скрипт 
 

 
</script></div>


{literal}
<script>
    //initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom(); 


//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');    
    $.fancybox(ez.getGalleryList());
  return false;
});
</script>
{/literal}
                <!-- /content -->
                </div>
 
Link to post
Share on other sites

У этой рамки в стилях (файлы CSS), скорее всего стоит высокий параметр z-index.

А если серьезно то тут так просто не угадаешь в чем именно проблема, нужна как минимум ссылка на сайт чтобы попытаться разобраться.

Link to post
Share on other sites

А еще давно сталкивался но забывал написать на форуме, в симпле увеличение происходит только в каталоге и карточке товара, у меня в пару проектов клиенты просили чтоб увеличение бы так же на простых страницах тк это норма в других цмс

Link to post
Share on other sites

А еще давно сталкивался но забывал написать на форуме, в симпле увеличение происходит только в каталоге и карточке товара, у меня в пару проектов клиенты просили чтоб увеличение бы так же на простых страницах тк это норма в других цмс

 

ну да, потому что скрипты увеличения подключаются только там. нужно выносить в index.tpl. самому не понятно почему так было задумано разработчиком

 

{* Увеличитель картинок *}
{literal}
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

<script>
$(function() {
	// Зум картинок
	$("a.zoom").fancybox({
		prevEffect	: 'fade',
		nextEffect	: 'fade'});
	});
</script>
{/literal}
Link to post
Share on other sites

У этой рамки в стилях (файлы CSS), скорее всего стоит высокий параметр z-index.

А если серьезно то тут так просто не угадаешь в чем именно проблема, нужна как минимум ссылка на сайт чтобы попытаться разобраться.

вот ссылка на товар https://dixstore.ru/products/akkamulyator-vneshnij-i6p

Link to post
Share on other sites

Сделайте innerzoom и все 

zoomType	: "inner",

у вас фото маленькое, а рамка за пределами, или фото увеличьте или рамку уменьшите

 

Вот в этом то и проблема, я следовал инструкции  

yodaexolon

 

Вставил куски кода, и после этого такая рамка получилось

А именно эффект InnerZoom мне и нужен 

 

Как только я меняю настройки на inner потом вообще не работает увеличение 

Edited by rend88
Link to post
Share on other sites

Куда вставляли? У меня такой код

{literal}
<script>
	//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', 
galleryActiveClass: 'active', 
imageCrossfade: true, 
loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif', 
zoomWindowFadeIn: 500, 
zoomWindowFadeOut: 500,
zoomType: "inner",
  cursor: "crosshair",
scrollZoom : true
}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});
</script>
{/literal}
Link to post
Share on other sites

 

Куда вставляли? У меня такой код

{literal}
<script>
	//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', 
galleryActiveClass: 'active', 
imageCrossfade: true, 
loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif', 
zoomWindowFadeIn: 500, 
zoomWindowFadeOut: 500,
zoomType: "inner",
  cursor: "crosshair",
scrollZoom : true
}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});
</script>
{/literal}

 

Вот этот код вставил в файл -> product.tpl 

 

 

</script></div>


 {literal}
<script>
    //initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', 
galleryActiveClass: 'active', 
imageCrossfade: true, 
loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif', 
zoomWindowFadeIn: 500, 
zoomWindowFadeOut: 500,
zoomType: "inner",
  cursor: "crosshair",
scrollZoom : true
}); 


//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');    
    $.fancybox(ez.getGalleryList());
  return false;
});
</script>
{/literal}
                <!-- /content -->
                </div>

 

И после этого не работает по ссылке  https://dixstore.ru/products/akkamulyator-vneshnij-i6p

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...