Magento: how to add a jQuery image and content carousel

05.11.2010 35 comments

4672 days since last revision. Details are possibly out of date.

Want to add a content carousel to your Magento based store? In this post I’ll explain how to set your Magento store to work with jQuery 1.4.3 and install a jQuery Carousel script for rotating content on any Magento page.

If you’re designing a store in Magento one of the bug-bears for me has always been getting jQuery goodies to play happily alongside all the standard Magento Javascript frameworks. I’ve tried a few times to fudge it when in a hurry but finally got the time to figure how it should be done properly. Here’s how…

This was done on v1.4.1.1 of Magento, using jQuery 1.4.3

1. Download the latest version of jQuery.

2. Open the file in a text editor and add the following line to the the very end:

 jQuery.noConflict();

3. Save the jQuery file file as ‘jQuery-1.4.3.js’ in the js/jquery/ folder of your Magento store.

4. Download the brilliant Infinite Carousel 2 from CatchMyFame (this is the script that will do the sliding content), save the JS file as ‘jquery.infinitecarousel2.js’ and upload that and the ‘images’ folder into the js/jquery/ folder of your Magento store.

5. Open app/{your skin}/{your skin}/layout/page.xml. Around line 50, in the first block of ‘addJs’ calls add the following 2 lines after all the others in that section:

6. In the Magento Admin/backend go to CMS, Pages (or static blocks if you want a Carousel in a static block) and choose the page you want to add the carousel. For this script the Carousel images must live with a DIV with an id of ‘carousel’. Therefore, enter something like this:




	
	This is the caption for the second image.

Note: the paths to the images may be different on your store. I saved my Carousel images in the skin directory and then the sub-folder of slider/images/. If you want yours elsewhere, change the paths accordingly. Be sure to amend the width and height dimensions to suit also.

7. That’s it! Save that CMS page, load up the relevant page of your store and you should have a lovely content Carousel working in Magento and powered by jQuery.

35 comments:

Juanrules says:

November 11, 2010 at 3:29 pm

Wow! thanks benfrain!

It worked perfectly! Now Im workning on the style.

Reply
Angel says:

December 28, 2010 at 1:01 pm

It doesn’t work for me.
Web browser says “jquery undefined”

Reply
- benfrain says:
  
  December 29, 2010 at 11:35 am
  
  Mmm, that error is usually because you haven’t got the jQuery library loaded. Is your page definitely calling jQuery? View the page source code to check.
  
  Reply
Max says:

January 1, 2011 at 11:49 am

Thank you very much for the step by step you showed here.
But i am having the problem that ie7 not working. In ie8 and
firefox is working very fine. Please do you any idea about that?
Would be very grateful. Happy New Year. Max

Reply
- benfrain says:
  
  January 2, 2011 at 12:45 pm
  
  Hi Max, I’m not back in the office until the 6th but will take a look at IE7 then.
  
  Reply
benfrain says:

January 6, 2011 at 2:01 pm

Hi Max,

Figured out your problem. IE7 is very particular when it comes to JS formatting. All I needed to do is remove the final comma from the code in point 4. above. I’ve now amended the post so there should be no future issues. For clarity, here is what the code needs to be:

jQuery(function(){
jQuery(‘#carousel’).infiniteCarousel({
imagePath: ‘js/jquery/images/’,
textholderHeight : .15
});
});

Reply
Max says:

January 7, 2011 at 6:43 am

Thanks Benfrain! It works out fantastic. Keep this good work alive. But the problem i am having is that my dropdown doesn’t pull down any more on ie7. I tried using position absolute on the carousel div and putting different index but didn’t work. Please any idea. Thanks a million Benfrain.

Reply
James says:

January 13, 2011 at 9:52 pm

Very cool contribution – thanks. I don’t get any images in
Chrome, but I do get the number blocks. Any ideas?

Reply
benfrain says:

June 10, 2011 at 1:14 pm

Hi James, apologies for the delay on this – only just got chance to take a look. It’s because the height and width of the images haven’t been eplicitly stated in the CMS page. I’ve now amended the post so future users shouldn’t get the problem. For clarity, images within the carousel should be entered like this:

[html]<li><a href="http://www.yoursite.com"><img src="{{skin url=slider/images/image1.jpg}}" alt="Image1" height="325px" width="725px"/></a></li>[/html]

Reply
Chris says:

November 25, 2011 at 4:35 pm

I can’t get it to work, all I see is the 2 or however many DIVs on screen stacked up on eachother. It doesn’t hide any of the others and there is no rotation 🙁 i really need a simple working slider gallery for magento, i’ve been struggling for hours with this! Any help would be appreciated!

Reply
- benfrain says:
  
  November 25, 2011 at 4:39 pm
  
  Chris, you really need to provide more info than ‘it doesn’t work’ – what version of Magento are you running, can you paste in the JS you’re using etc? If the images are stacked on one another the jQuery isn’t executing so you have a problem there. Probably missing character or something. It does work but you must have an error somewhere in your code.
  
  Reply
Chris says:

November 25, 2011 at 4:46 pm

I didn’t say it doesn’t work I said I can’t get it to work, big difference 🙂
I’m using magento 1.5.0.1.
Downloaded jquery – check.
Added jQuery.noConflict(); to the end – check.
Uploaded to (my magento store path)/js/jquery – check (had to create the folder)
Downloaded and copied jquery.infinitecarousel2.js to jquery folder – check.
Added the 2 lines in the page.xml for my skin (although they are a different format to the other Addjs lines – check
Copied and pasted your CMS demo code, replaced the images with real ones – check
Saved and ran it – not playing.
Spot anything i’ve done wrong?

Reply
Chris says:

November 25, 2011 at 4:51 pm

Have a look at http://americansports.co.uk/shop/slidertest

Thats the page i’m getting, I’ve looked in the source and spotted no jQuery being loaded. I’m assuming it’s not reloading my page.xml file properly.

Reply
benfrain says:

November 25, 2011 at 4:57 pm

I think you’ve got jQuery in the wrong folder, it goes within the js folder of your theme, not the root of the Magento store.

Reply
Chris says:

November 25, 2011 at 5:06 pm

I’ve put it where you say:

“js/jquery/ folder of your Magento store”

Which I’m assuming is not in the skin folder?
The file doesn’t have to be named “jQuery-1.4.3.js” does it?

Reply
benfrain says:

November 25, 2011 at 5:10 pm

It needs to be called whatever you have called it in the XML as that’s what it’s trying to load.

Yes, it needs to go in the skin folder as it’s to do with your skin. You shouldn’t be putting anything in the root as that’s for core Magento files, not skin specific stuff.

You may find it useful to take a look at the Magento designers PDF (free) for best practice info on how to build the theme, otherwise, your design may break in future when you apply an update.

Reply
Chris says:

November 26, 2011 at 1:28 am

Got it working after moving some older versions of jquery out of unwanted areas. Only problem now is the text does not float over the images it pushes them to one side, but I guess thats the carousel app I need to look at. Great post 🙂

Reply
Ken says:

January 12, 2012 at 2:11 am

I’ve got the stacking issue as well. I can see the javascript is being called properly but it’s not working. It’s not your slider app, but it’s the same problem that your post seems to address. Thoughts?

Reply
benfrain says:

January 12, 2012 at 7:08 pm

Hi Ken,

If the images are stacking up either all the scripts aren’t loading, or you’re targeting the wrong id/images path. Have another look at step 4 and ensure all the paths are relevant.

Reply
Max says:

February 4, 2012 at 4:51 pm

Hi again! i have included the slideshow in the index page and everything is working fine but i wanted to include another jquery funtion calling a continious thumbnails slideshow javascript and it seems the javascript not been called. Is it possible to even call two different functions from magento cms -> pages HOME ?

Regards

Reply
thijs says:

March 22, 2012 at 9:46 pm

Hee Ben,

Thanks for this mini-tutorial! Works perfect.

Cheers,
Thijs

Reply
Abhinav says:

April 16, 2012 at 9:07 am

I need to add other product attributes along with the images such as product name and price. However, when I add those to the list, how to I adjust the height of the carousel accordingly? It seems that the height of the carousel is determined by the height of the image only.

Reply
- Ben Frain says:
  
  April 18, 2012 at 10:33 pm
  
  Could be a limitation of that particular carousel plugin. Thee are loads of others you could also use. I believe slideJS will do what you need so it’s worth taking a look at that.
  
  Reply
skg says:

July 31, 2012 at 6:28 pm

Thank you! We did it a little different. I’m posting in case it helps others. We loaded the .js files into the theme’s skin folder as Ben mentioned a few posts ago.
skin/frontend/(your interface)/(your theme)/js/jquery

Then in the page.xml file located in app/design/frontend/(your interface)/(your theme)/layout/, in the same location as Ben instructed we called the .js files like this:

<action method=”addItem”><type>skin_js</type><name>js/jquery/jQuery-1.7.2.js</name></action>

<action method=”addItem”><type>skin_js</type><name>js/jquery/jquery.infinitecarousel2.js</name></action>

Reply
JR says:

August 9, 2012 at 11:19 pm

Need help with the image path option, the default value or the one here is not working for me.

After inserting a value like: imagePath: ‘/js/jquery/images/’, the web page thinks this is the whole path, and cant find it.

Im not actually sure where to add the actual files, because i already have them everywhere in my skin folders (my theme, default and so on)

Using the latest magento and latest version of carousel

Reply
Milan says:

August 28, 2012 at 6:41 am

thanks a lot. It saved my day.

Reply
ricky says:

October 19, 2012 at 6:19 am

Hi It works great! Thanks a lot.
But it is a bit jerky. I have tried increasing the speed but it stucks while rotating. Could you please tell me why is that?

Reply
Kitty says:

December 10, 2012 at 4:08 am

Appreciate the tutorial! Works great. Thanks 🙂

Reply
Matchelo3 says:

December 14, 2012 at 4:16 am

Can anyone help me, please?

I tried several times, in several different ways and this is not working on my site!

The images are appearing all at once. One above the other.

look the test: http://www.mascote.pt/carousel

Reply
Matchelo3 says:

December 16, 2012 at 12:07 am

I got it!

There was a conflict with another app (bestseller), but it was just disable javascript function that app and it worked!

Great! 🙂

Reply
Jason says:

December 18, 2012 at 11:49 pm

Thanks! I use Magento Go which lacks the ability to FTP etc. However you can upload Javascript files and images in the Theme section. Just a case of getting the paths right and everything will link up well 🙂

Reply
Fabio says:

January 21, 2013 at 11:28 am

Thank you for this great tutorial !

But I have a question. I’ve added the carousel in my footer. It’s work fine for the homepage and the catalog grid view, but nowhere else.

For exemple, in the product view, I have all my pictures displayed but without any effect or CSS…

Do you have any idea of what the problem is?

Reply
Chrstopher says:

January 30, 2013 at 11:02 pm

I have checked everything in this post twice. I am getting stacked images as well. jQuery is loading, but along with other versions?

http://accentcloset.com/AccTest/slider

Using Mage 1.7.0.2, jQuery 1.9, Infinite Carousel 3. All files were put within my theme. Page.xml was edited as needed, as you can see when viewing the source of above link. I have tried both versions of the code that lives within the carousel DIV. I tried both versions of the code for Page.xml, what you suggested and what SKG suggested, yours caused a blank page for some reason, I assume the version of Mage?

I am at a loss…I feel I am so close. I have tried to double check all locations and files…not sure what the issue is.

Reply
Ben Frain says:

January 30, 2013 at 11:08 pm

Hi Christopher, apologies but I’m in the midst of finishing up a book so don’t have time to have a look. However, something is definately off if you are getting multiple versions. I also wrote this a couple of years back and I’m not sure how accurate it is against current versions of Magento.

Reply
Chrstopher says:

January 30, 2013 at 11:27 pm

Sorry I meant other instances of JS that have jquery in the name. For example jquery.cycle.all.js which was already in there. But thanks for letting me know you aren’t avail, I will just seek another result.

Reply

35 comments:

Leave a Reply Cancel reply

Cubecart: how to add sub-category descriptions to product pages

Migrate IMAP mail accounts and messages from one server to another