Перейти к содержанию
Официальный форум поддержки Simpla

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


Перейти к решению Решено yodaexolon,

Рекомендуемые сообщения

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

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...

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

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

Изменено пользователем yodaexolon
Ссылка на сообщение
Поделиться на другие сайты

Есть бесплатные аналоги http://www.elevateweb.co.uk/image-zoom/examples

совершенно верно, будет время создам тему как для simpla прикрутить

Ссылка на сообщение
Поделиться на другие сайты
  • Решение

Итак второе решение зум с всплывающим 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

Изменено пользователем yodaexolon
Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...
  • 1 месяц спустя...
  • 3 недели спустя...

что-то на мой шаблон не крепится, подскажите куда копать. 
при наведение вроде как бы работает но вот не совсем корректно,
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>
 
Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

ну да, потому что скрипты увеличения подключаются только там. нужно выносить в 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}
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

zoomType	: "inner",

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

Ссылка на сообщение
Поделиться на другие сайты

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

zoomType	: "inner",

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

 

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

yodaexolon

 

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

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

 

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

Изменено пользователем rend88
Ссылка на сообщение
Поделиться на другие сайты

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

{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}
Ссылка на сообщение
Поделиться на другие сайты

 

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

{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

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...