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

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

yodaexolon

Автор yodaexolon,
в Готовые решения

 Поделиться Подписчики 1
Перейти к решению Решено yodaexolon,

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

rend88

rend88

Опубликовано
Опубликовано

Убираю у контейнера zoomContainer -webkit-transform: translateZ(0px); все работает, я сейчас уставший не смогу вам помочь

 

Да нашел этот стиль, убрал получилось.

Вот то что рамкой я обвел задается в стилях или это проблема маленького размера самой картинки ?

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

evoname

Опубликовано
Опубликовано

Приветствую.

У меня все, что касается самого скрипта работает без проблем, кроме одного момента: дополнительные фото не показываются. Подозреваю, что проблема вкралась где-то во взаимодействии двух дополнений - этого и того, которое убирает токены из фото (отсюда). Помогите разобраться. В логе ошибка выглядит так:

[Sat Feb 13 11:18:50 2016] [error] [client 51.255.65.79] PHP Fatal error:  Uncaught exception 'ImagickException' with message 'unable to open image `/home/e/evoname588/public_html/files/originals/2726800-3.jpg':  @ error/blob.c/OpenBlob/2587' in /home/e/evoname588/public_html/api/Image.php:321\nStack trace:\n#0 /home/e/evoname588/public_html/api/Image.php(321): Imagick->readimage('/home/e/evoname...')\n#1 /home/e/evoname588/public_html/api/Image.php(76): Image->image_constrain_imagick('/home/e/evoname...', '/home/e/evoname...', '800', '600', '/home/e/evoname...', '50', '50', 0.75, 0.2)\n#2 /home/e/evoname588/public_html/resize/resize.php(15): Image->resize('2726800-3.800x6...')\n#3 {main}\n  thrown in /home/e/evoname588/public_html/api/Image.php on line 321
Ссылка на сообщение
Поделиться на другие сайты
evoname

evoname

Опубликовано
Опубликовано

Точнее дополнительные фото есть и они выгружаются, но при клике по ним идет переход на главную и в логе вышеупомянутая ошибка...

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

vecter

Опубликовано
Опубликовано

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

 

Сделал всё по инструкции , всё заработало , для тех у кого не подключен jquery

 

<script src='http://code.jquery.com/jquery-2.2.0.min.js'></script>

 

Подключаем , я про него и забыл в начале.

 

Проблема : зум работает на отлично , fancy не открывает

 

Ошибка  -- Uncaught TypeError: Cannot read property 'getGalleryList' of undefined 

 

Всё проверил , вроде ошибок нету

 

Прошу помощи

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

MRGLONIN

Опубликовано
Опубликовано 
				<div class="image">
					<a href="products/{$product->url}" title='Просмотреть предложение {$product->name|escape}'>
					<img src="{if $product->image}{$product->image->filename|resize:180:150}{else}design/{$settings->theme}/images/bg/nofoto.png{/if}" title="{$product->name|escape}" alt="{$product->name|escape}" data-zoom-image="{$product->image->filename|resize:800:600:w}" />
				</div>

Сейчас вот такой код 

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

ivteksrf

Опубликовано
Опубликовано

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

 Не понял 5 пункт ....   в 312 строке у меня " padding: 33px 0 0 74px; " .... Куда стили добавляются ?

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

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

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

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

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

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

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

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

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

Загрузка...
×
 Поделиться
Подписчики 1
Перейти к списку тем
×
×
  • Создать...