How to use the jquery.rotate and jquery.cycle plugins together

Question

I have a series of photos (3 series actually) that need to cycle, which the jQuery cycle plugin does nicely for me.

My problem is I also want to rotate them (rotate as in turn) by a few degrees each in varying directions on page load, to achieve a 'scattered' look. jQuery Rotate does this nicely too ... my problem is I can't get both rotate and cycle to happen on the same page.

It looks as if the solution is going to involve rotating the images within the cycle code itself, but that is beyond my limited capability (at least in the time available). Has anyone else tried this? Got any pointers?

If all else fails, I can pre-rotate the images in photoshop but that's not ideal--the js rotate would mean the photos can be easily refreshed by the site's owner simply dumping new ones in a directory. Photoshop otoh would mean rotating each one -and- converting them from jpg to a format that supports transparency (or even worse, duplicating the appropriate background colours etc in the right places).

I'm using standard jquery.cycle... html pre-loads 1st 3 images like this:

<div id="slideshow" class="pics">  
    <img class="rotate" src="images/image1.jpg" width="100" height="100" />  
    <img class="rotate" src="images/image2.jpg" width="100" height="100" />  
    <img class="rotate" src="images/image3.jpg" width="100" height="100" />  
</div>

And I have the usual js that kicks off the cycle:

$(document).ready(function() {       

   var stack = [];  

   var imagesPath = '../images/image';  
   if(window.location.href.indexOf('\/html\/') == -1)  
      imagesPath = 'images/image';  

      for (var i = 0; i < 8; i++) {  
      var img = new Image(100,100);  
      img.src = imagesPath + i + '.jpg';  
      $(img).bind('load', function() {  
          stack.push(this);  
      });  
   }  

   // start slideshow  
   $('#slideshow').cycle({  
      timeout:  600,  
      before:   onBefore ,  
      speed: 2000  
   });  

   // add images to slideshow  
   function onBefore(curr, next, opts) {  
     if (opts.addSlide) // <-- important!  
          while(stack.length)  
         opts.addSlide(stack.pop());  
   };  
});

The js to rotate the first of these images with jQuery.rotate is:

$('.rotate')[0].rotateLeft(5);

The above works if I disable cycling, but nothing happens when cycling is on. Removing the array reference per the following rotates the visible image, removes it from the slideshow, and leaves it on the page.

$('.rotate').rotateLeft(5);

Perhaps the ideal would be to rotate the containing div instead, but jquery.rotate uses canvas and so only works on images. Let me know if there's any more info I can provide. And thanks for your interest!

Answer 1

try using the CSS3 transform selector:

-webkit-transform: rotate(-15deg);

$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });