0 Replies Latest reply on Apr 18, 2013 1:48 PM by mhartington

    360 image rotation

    mhartington Level 1

      So i have a bit of java script that I use that allows a person to cycle through a series of photos to create a 360º rotation of a product.  Heres that code.

       

       

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

          var $product = $('#product'),

              $imgs = $product.find(".child"),

              imageTotal = $imgs.length - 1,

              clicked = false,

              widthStep = 20,

              currPos,

              currImg = 0,

              lastImg = 0;

          $imgs.bind('mousedown', function (e) {

              e.preventDefault(); // prevent dragging images

          })

              .filter(':gt(0)').addClass('notseen');

       

       

          $product.bind('mousedown touchstart', function (e) {

              if (e.type == "touchstart") {

                  currPos = window.event.touches[0].pageX;

              } else {

                  currPos = e.pageX;

              }

              clicked = true;

          

          });

          $(document)

              .bind('mouseup touchend', function () {

              clicked = false;

          })

              .bind('mousemove touchmove', function (e) {

              if (clicked) {

                  var pageX;

                  if (e.type == "touchmove") {

                      pageX = window.event.targetTouches[0].pageX;

                  } else {

                      pageX = e.pageX;

                  }

                  widthStep = 20;

                  if (Math.abs(currPos - pageX) >= widthStep) {

                      if (currPos - pageX >= widthStep) {

                          currImg++;

                         if (currImg > imageTotal) {

                                                          currImg = 0;}

                      } else {

                          currImg--;

                          if (currImg < 1) {

                              currImg = imageTotal;

                          }

                      }

                      currPos = pageX;

                      $imgs.eq(lastImg).addClass('notseen');

                      $imgs.eq(currImg).removeClass('notseen');

                      lastImg = currImg;

                      // $obj.html('<img src="' + aImages[options.currImg] + '" />');

                  }

              }

          });

      });

       

       

      Now what I want to be able to do is to incorporate this into an edge document and then automate the changing of classes so that every photo will be cycled through automatically. Any idea on how I would do this?