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!

Quote:

---

Originally Posted by aperfecthost

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

---

You are welcome. I am happy that you are using it :-)

Thanks,

Anne

Great slider. How to put thumbs below slider

Quote:

---

Originally Posted by VitaminC

Great slider. How to put thumbs below slider

---

You will have to add functionality to the slider and javascript to accomplish this. You can take a look at the tutorial site to see if there is any help there:

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

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

You will have to add functionality to the slider and javascript to accomplish this. You can take a look at the tutorial site to see if there is any help there:

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

Thanks,

Anne

---

hey anne, want to ask how do i customize the slider title for each slides? for example first slide is for "shirts", second slide is "pants", 3rd slide is "underwear" and the last one is "shoes". i figured how to edit the title but i dont know how to add for each individual slides..

also, this is related to the glasgow neat template, how do i remove something from the main bar? for example i dont want the brands option and would like to delete it, which file do i need to modify?

one last thing, my shopping cart is being weird as shown in the image http://img713.imageshack.us/img713/4485/capturefggo.png, actually brands is also acting weird like this, how do i fix this?

Quote:

---

Originally Posted by denniszc

hey anne, want to ask how do i customize the slider title for each slides? for example first slide is for "shirts", second slide is "pants", 3rd slide is "underwear" and the last one is "shoes". i figured how to edit the title but i dont know how to add for each individual slides..

also, this is related to the glasgow neat template, how do i remove something from the main bar? for example i dont want the brands option and would like to delete it, which file do i need to modify?

one last thing, my shopping cart is being weird as shown in the image http://img713.imageshack.us/img713/4485/capturefggo.png, actually brands is also acting weird like this, how do i fix this?

---

Take a look at the code in includes/templates/glasgow_neat/common/tpl_rotating_slider.php to add titles for the slides.

If you read the readme.html file included in the template package you will see instructions for hiding the drop downs.



Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Take a look at the code in includes/templates/glasgow_neat/common/tpl_rotating_slider.php to add titles for the slides.

If you read the readme.html file included in the template package you will see instructions for hiding the drop downs.



Thanks,

Anne

---

thanks anne, i've managed to remove the brands from the mega menu, but i couldnt add different titles for the different slide pages, i managed to add a title by adding <h2><?php echo TITLE4 ?></h2> and then adding a define in the rotating_image_slider.php, but all it did was overlap both titles together instead of showing the one associated with the slider page.. also any ideas about how to fix the cart as shown in the image?

okay, i managed to solved the cart problem, there was some code that lacks a proper <?php ?> code, you can find the code at tpl_header.php. i still would really really like to know how to add different titles for different slide page

Quote:

---

Originally Posted by denniszc

okay, i managed to solved the cart problem, there was some code that lacks a proper <?php ?> code, you can find the code at tpl_header.php. i still would really really like to know how to add different titles for different slide page

---

I have made a note of this and will include this in a future update :-)

Thanks,

Anne

Quote:

---

Originally Posted by denniszc

thanks anne, i've managed to remove the brands from the mega menu, but i couldnt add different titles for the different slide pages, i managed to add a title by adding <h2><?php echo TITLE4 ?></h2> and then adding a define in the rotating_image_slider.php, but all it did was overlap both titles together instead of showing the one associated with the slider page.. also any ideas about how to fix the cart as shown in the image?

---

Have you checked the original tutorial here:

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

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Have you checked the original tutorial here:

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

Thanks,

Anne

---

yuo, already checked

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};

---

Quote Originally Posted by atemp View Post
Hello,

On the home screen I can not scroll down using the mousewheel. I can on any other screen.

Kind regards

Anthony
Can someone please assist me with having the main page scroll with mousewheel?

I looked at http://www.zen-cart.com/showthread.p...Support-Thread but i am unable to open and edit the Java files in includes/templates/YOUR_TEMPLATE/jscript/.

not sure this is still live, i'd personally will try everything I'm reading here ... I'm going to see if it improves appearance of my zen cart... i'll know where to come if I have a problem...