Magento RWD theme - Product images with gallery & lightbox option -


as know, new magento rwd theme using elevate-zoom script on product view page zooming , switching images: magento demo product.

i implement 'gallery & lightbox' option elevate-zoom example.

i tried edit media.phtml , app.js well, without luck.

maybe have solution this?

thanks,

vlad

make sure have fancybox plugin installed dependencies, i.e, mousewheel.

best include these in local.xml (app/design/frontend/your_package/your_theme/layout/local.xml), e.g:

    <?xml version="1.0"?>     

<catalog_product_view>     <reference name="head">         <action method="additem"><type>skin_js</type><name>js/fancybox/jquery.mousewheel-3.0.4.pack.js</name></action>         <action method="additem"><type>skin_js</type><name>js/fancybox/jquery.fancybox-1.3.4.patch.js</name></action>         <action method="additem"><type>skin_css</type><name>js/fancybox/jquery.fancybox-1.3.4.css</name></action>     </reference> </catalog_product_view> 

copy app.js theme (maintaining directory structure) add/edit following:

image.elevatezoom({         gallery:'gallery_01',         cursor: 'pointer',         galleryactiveclass: 'active',         imagecrossfade: true,         loadingicon: 'http://www.elevateweb.co.uk/spinner.gif'     }); 

copy media.phtml theme (maintaining directory structure) uses containing div gallery group followed anchor tags containing necessary data-attributes follows (from around line 67):

<div class="more-views">     <div class="product-image-thumbs" id="gallery_01"> <?php $i=0; foreach ($this->getgalleryimages() $_image): ?>     <?php     if (($filterclass = $this->getgalleryfilterhelper()) && ($filtermethod = $this->getgalleryfiltermethod()) && !mage::helper($filterclass)->$filtermethod($_product, $_image)):         continue;     endif;     ?>      <?php $galimg = $this->helper('catalog/image')->init($this->getproduct(), 'thumbnail', $_image->getfile())->resize(800); ?>     <a class="thumb-link" href="#" data-image="<?php echo $galimg; ?>" data-zoom-image="<?php echo $galimg; ?>">         <img id="img_<?php echo $i; ?>" src="<?php echo $this->helper('catalog/image')->init($this->getproduct(), 'thumbnail', $_image->getfile())->resize(75); ?>"              width="75" height="75" alt="<?php echo $this->escapehtml($_image->getlabel()) ?>" />     </a> <?php $i++; endforeach; ?> </div> 

you have apply css after changing markup within media.phtml


Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -