Rotating Image Slider [Support Thread]

Hello ;-)

This jQuery powered asymetrical image slider rotates the images slightly with a small delay when playing. It comes with an autoplay option and the mousewheel functionality.

Attachment 11551

See a live demo here:

Rotating Image Slider for Zen Cart Live Demo

Features:

• Completely customizable

• Add your images, and links

• Cool asymmetrical, rotating images

• Cross browser compatible with Firefox, Chrome, Safari, and ie9. Degrades gracefully for ie8 and less, just doesn't show the cool asymmetrical images.

• No changes to core files

• Easy Installation

• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

• Fully compatible with versions 1.3.8x, 1.3.9x, 1.5x. Would probably work with lower versions although it has not been tested.

Please post any questions or bugs here:

Thanks,

Anne

Anne that is awesome!!!

Quote:

---

Originally Posted by picandnix

Anne that is awesome!!!

---

I am glad that you like it and hope that you can use it on your zen cart site.

Thanks,

Anne

how can i change the slider to a different size? like more smaller the height.
thanks for all your hard work plugins anne.

Quote:

---

Originally Posted by 21yanks

how can i change the slider to a different size? like more smaller the height.
thanks for all your hard work plugins anne.

---

You will need to make adjustments to the includes/templates/override/css/ stylesheet_rotating_image_slider.css and possible to the includes/templates/YOUR_TEMPLATE/jscript/jquery.RotateImageMenu.js file. See this tutorial for a step by step explanation on how the slider was built:

http://tympanus.net/codrops/2011/04/...-image-slider/

Thanks,

Anne

Hi Anne,

I'm using this slider on Glasgow Neat. Is there a setting where the slider will automatically begin to rotate when on homepage without the customer having to hit "play"? A suggestion from a niece.

Thanks.

Quote:

---

Originally Posted by SPH

Hi Anne,

I'm using this slider on Glasgow Neat. Is there a setting where the slider will automatically begin to rotate when on homepage without the customer having to hit "play"? A suggestion from a niece.

Thanks.

---

I think that this can be done. Take a look at the tutorial and comments for instructions:

http://tympanus.net/codrops/2011/04/...g-image-slider

Thanks,

Anne

Amazing slideshow and highly customable.

Allthough I found the mousewheel rotation made my main-page less accessible.
It disabled the mousewheel so customers where not able to scroll up and down my website anymore, without clicking-sliding on the right scrollbar.


So I disabled the mousewheel rotation by commenting the following line in de jscript file located at includes/templates/YOUR_TEMPLATE/jscript/jquery.RotateImageMenu.js.

Change this:

$(document).bind('mousewheel', function(e, delta) {
if(delta > 0) {
stopSlideshow();
rotateImages(0);
}
else {
stopSlideshow();
rotateImages(1);
}
return false;
}).keydown(function(e){
switch(e.which){
case 37:
stopSlideshow();
rotateImages(0);
break;
case 39:
stopSlideshow();
rotateImages(1);
break;
}
});

Into this:

/*$(document).bind('mousewheel', function(e, delta) {
if(delta > 0) {
stopSlideshow();
rotateImages(0);
}
else {
stopSlideshow();
rotateImages(1);
}
return false;
}).keydown(function(e){
switch(e.which){
case 37:
stopSlideshow();
rotateImages(0);
break;
case 39:
stopSlideshow();
rotateImages(1);
break;
}
});*/

Now to autostart the slideshow on pageload:

Insert this line:

startSlideshow();

Just above this line:

return {init : init};

Quote:

---

Originally Posted by Digiwinkel

Amazing slideshow and highly customable.

Allthough I found the mousewheel rotation made my main-page less accessible.
It disabled the mousewheel so customers where not able to scroll up and down my website anymore, without clicking-sliding on the right scrollbar.


So I disabled the mousewheel rotation by commenting the following line in de jscript file located at includes/templates/YOUR_TEMPLATE/jscript/jquery.RotateImageMenu.js.

Change this:

$(document).bind('mousewheel', function(e, delta) {
if(delta > 0) {
stopSlideshow();
rotateImages(0);
}
else {
stopSlideshow();
rotateImages(1);
}
return false;
}).keydown(function(e){
switch(e.which){
case 37:
stopSlideshow();
rotateImages(0);
break;
case 39:
stopSlideshow();
rotateImages(1);
break;
}
});

Into this:

/*$(document).bind('mousewheel', function(e, delta) {
if(delta > 0) {
stopSlideshow();
rotateImages(0);
}
else {
stopSlideshow();
rotateImages(1);
}
return false;
}).keydown(function(e){
switch(e.which){
case 37:
stopSlideshow();
rotateImages(0);
break;
case 39:
stopSlideshow();
rotateImages(1);
break;
}
});*/

Now to autostart the slideshow on pageload:

Insert this line:

startSlideshow();

Just above this line:

return {init : init};

---

Thank you so much for posting your solution for disabling the mousewheel functionality on the slide show. I am sure that there will be others who will want to know how to do this.

Thanks,

Anne

I am so excited to try this! Thanks for making and posting it!