Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

Cloud zoom

Cloud zoom
, by

Доброго времени суток, Иван.

Пересмотрел все материалы и на вашем сайте и прочих источниках, но так и не смог найти как правильно работать с cloud zoom... пытаюсь сделать галлерею, примерно как у вас на sweetz.ru, через модуль не выходит, напрямую через страницу добавления содержимого тоже, ибо все автоматически переводтся в мнемоники=(( Расскажите как у вас получилось так настроить cloud zoom.

Буду рад получить ответ на p.r.kryukov@gmail.com

 

С уважением, Павел Крюков.

1 answer
votes: 571
Answer

Здравствуйте, да я тоже ничего готового не нашел для cloud zoom, а плагин мне тоже понравился, во вложения можете скать файлы шаблонов и template.php.

Сейчас попробую вспомнить как я это делал.

<div class="product-photos">
	  <p>Фото <?php print $node->title; ?></p>
	  <?php 
	    if(!empty($node->field_photo)){
		  foreach($node->field_photo as $first_photo){
		   print '<a href="' . base_path() . $first_photo["filepath"] . '" class="cloud-zoom" id="zoom1"  rel="adjustX: 15, adjustY:-1">';
		   print theme('imagecache', '300x300crop', $first_photo["filepath"], $node->title, $node->title, array('itemprop' => 'image'));
		  }
		}
		
		if(!empty($node->field_image_cache)){
		  print '<a alt="Thumbnail 1" title="Thumbnail 1" href="' . base_path() . $first_photo["filepath"] . '" class="cloud-zoom-gallery" rel="useZoom: \'zoom1\', smallImage: \'/sites/default/files/imagecache/300x300crop/' . $first_photo['filename'] . '\' ">';
		  print theme('imagecache', '50x50', $first_photo['filepath'], $node->title, $node->title);
		  print '</a>';
		  $counter = 2;
		  foreach($node->field_image_cache as $photo){
		    if(!empty($photo)){
		      print '<a alt="Thumbnail '. $counter . '" title="Thumbnail ' . $counter . '" href="' . base_path() . $photo["filepath"] . '" class="cloud-zoom-gallery" rel="useZoom: \'zoom1\', smallImage: \'/sites/default/files/imagecache/300x300crop/' . $photo['filename'] . '\' ">';
		      print theme('imagecache', '50x50', $photo['filepath'], $node->title, '');
		      print '</a>';
		      $counter++;
			}
		  }
		}
		
	  ?>
	</div>

Этот кусок кода как раз и выводит в нужном месте фотографию с эффектом cloud zoom. Во-первых проверяем есть ли в продукте фотографии, потом первую фотографию мы обрабатываем одним пресетом, а остальные другим. К первой фото прикрепляем нужные классы и rel, к остальные другие нужные классы и rel. Вот как-то так. Ну и естественно javacript-файл темы нужно подцепить через файл .info. В общих чертах так. В файле template.php я переопределял выводы товаров в разных местах, чтобы был эффект по наведению. Мне тоже понравилось.


Спасибо огромное, буду ковыряться=)