Tutorial : How to add Easy Slide in Magento Product Details Page

In our previous blog post about Cloud Zoom, we’ve mentioned the importance of the product detail page for a Magento eCommerce site and how well-detailed product screenshots play a key role in a product detail page.

Each product usually comes with many screenshots. In today’s blog we’ll show you how to create a beautiful slideshow with thumbnail images by adding easySlide to your product detail page.

To help you with this, today’s tutorial will show you how to use Cloud zoom to add the “zoom in” feature to your Magento product detail page.

Step 1. DOWNLOAD PACKAGE

Click here to download the package.

Step 2. IMPORT FILE JS FOR EASY SLIDE

Unzip the package after you’ve downloaded it.

Access to \skin\frontend\gem\default\js to copy the folder js and paste it to the respective folder in your website.

For example, if you are using our Lingerie theme, let’s copy and paste the folder cloud zoom to \skin\frontend\default\jm_lingerie\js

Step 3. COMPARE FILES AND ADD NEW VALUES

From the download package, access to \app\design\frontend\gem\default\template\catalog\product\view
Open file media.phtml

Then open the file media.phtml from \app\design\frontend\default\jm_lingerie\template\catalog\product\view

Compare the 2 files.

Step 4. COPY NECCESSARY CODES

# CODE 1 – include file js:

Paste this code into the file media.phtml to call js file

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/easy-slider.js');?>"></script>

# CODE 2- declare function get image galleries

Paste these code

<?php $galleryImages= $_product->getMediaGalleryImages();?>

# CODE 3 – code php

Paste this code into the file media.phtml to add code php

<?php if (count($galleryImages) > 0): ?>

  <div class="jm-product-lemmon">

    <div class="prev"><span>Prev</span></div>

    <div class="more-views">

      <ul>

        <?php 

          $mainThumbUrl = $this->helper('catalog/image')->init($_product, 'thumbnail')->__toString();

          $startIndex = $index = 0;

          foreach ($galleryImages as $_image):

          $thumbUrl = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->__toString();

          if($thumbUrl === $largeImageUrl ){

              $liClass = "active";

              $startIndex = $index;

          }

          else

              $liClass = "";

          ?>

          <li class="<?php echo $liClass; ?>" >

              <a href="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($productlimagewidth, $productlimageheight); ?>" rel="<?php echo $thumbUrl; ?>"

                 title="<?php echo $_product->getName();?>"

                 onclick="return false;"> <!-- The below should remain the same as before -->

                  <img

                      src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->keepAspectRatio(true)->resize(78,78); ?>"

                      alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"

                      title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />

              </a>

          </li>

          <?php $index++; endforeach; ?>

      </ul>

    </div>

    <div class="next"><span>Next</span></div>

  

  </div>

<?php endif; ?>

#CODE 4- Declare script

Paste this code into the file media.phtml to declare script

 <script type="text/javascript">

      // <![CDATA[

      (function($){

          $(document).ready(function($){

              $(".more-views").easySlider({

                  mainImg: "p.product-image-zoom img",

                  btnNext: ".jm-product-lemmon .next",

                  btnPrev: ".jm-product-lemmon .prev",

                  animate: true,

                  loop: true,

                  speed: 300,

                  width: 100,

                  width_img: 80,

                  start: <?php echo $startIndex?>

              });

          });

      })(jQuery);

      // ]]>

    </script>

Step 5. SAVE THE FILE AND YOU ARE DONE

Now you can see how it works in the frontend

Are you using Easy Slide for your Magento eCommerce site? How does it work for your site?