Automate Product Slideshow (2.93)

https://www.optioncart.com/resellers/faqs.htm?fid=423

Automate Slideshow (2.93) Save this FAQ

Reminder: Always back up your database and files if you make any system changes.

Note: While we cannot assist with modifications as part of our free support services, many customizations make it into our future releases, so we recommend checking the change log. If you need help adding a modification to a web site, we have paid customization services available.

To automate the slideshow or slideshow gallery on the detail item page (e.g. http://website/item_#/itemname.php orhttp://website/catalog.php?item=#), use the following modification:

  1. Open the products_detail.php file in the /enc/ folder.

  2. Add the following code:

    // START AUTOMATE SLIDESHOW GALLERY MOD
    $automate_milliseconds = 5000;
    $automate_slideshow = <<<END
    <script>
    $(document).ready(function() {
     function startSlideshow() {
      var prodid = $varitemid;
      var clickyid = $('#sb_slideshowzoom' + prodid + ' .active').attr('id');
      var clickpos = parseInt(clickyid.replace('sb-thumbimg-' + prodid + '-', '')); 
      var zimgcount = $('#sb_slideshowzoom' + prodid + ' img').length;
      var useid = (clickpos >= zimgcount) ? 1 : clickpos+1;
      /* SWITCH IMAGES */
      $('#sb_slideshowzoom' + prodid + ' .sb-slideshow').removeClass('active');
      var imgsrc = $('#sb-thumbimg-' + prodid + '-' + useid).data('image');
      $('#sb-thumbimg-' + prodid + '-' + useid).addClass('active');
      $('#dataimg' + prodid).attr('src', imgsrc).stop(true,true).hide().fadeIn(); 
      /* ZOOM? */
      if ($('#dataimg' + prodid).data('zoom-image') && !isidevice())
      {
       var dataZoomImg = $('#dataimg' + prodid);
       $('.zoomContainer').remove();
       dataZoomImg.removeData('elevateZoom');
       dataZoomImg.attr('src', $('#sb-thumbimg-' + prodid + '-' + useid).data('image'));
       dataZoomImg.data('zoom-image', $('#sb-thumbimg-' + prodid + '-' + useid).data('zoom-image'));
       dataZoomImg.elevateZoom(zoomParams);
      }
      e.preventDefault(); 
     }
     timer = setInterval(startSlideshow, $automate_milliseconds);
     $('.sb_sliders').hover(function() {
      clearInterval(timer);
     }, function() {
      timer = setInterval(startSlideshow, $automate_milliseconds);
     });
     });
    </script>
    END;
    // END AUTOMATE SLIDESHOW GALLERY MOD

    just above the code:

    // LABEL UNDER IMAGE
  3. If desired, change 5000 to the number of milliseconds that will show before going to the next slide. (Hint: 1000 milliseconds = 1 second, so the default is 5 seconds)

  4. To include the automation to the slideshow:

    • Add the code:

      $showme_slideshow .= $automate_slideshow;

      under the line

      // END AUTOMATE SLIDESHOW GALLERY MOD
    • In the storeadmin, select 'Layouts' under 'Web Site' and change the 'Detail Image' field to 'Slideshow'.

  5. To include the automation to the slideshow gallery:

    • Add the code:

      $showme_slideshowgallery .= $automate_slideshow;

      under the line

      // END AUTOMATE SLIDESHOW GALLERY MOD
    • In the storeadmin, select 'Layouts' under 'Web Site' and change the 'Detail Image' field to 'Slideshow Gallery'.

Last edited on 3/18/16
  • 0 أعضاء وجدوا هذه المقالة مفيدة
هل كانت المقالة مفيدة ؟

مقالات مشابهة

Add crop option to auto thumbnails (2.93)

https://www.optioncart.com/resellers/faqs.htm?fid=432 Add crop option to auto thumbnails (2.93)...