Create Featured Content Slider Using jQuery UI
Jun 17th, 2009 - 181 Comments »
Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.
There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.
Let’s start with it..
Add JavaScript Files
First of all, grab the jQuery and jQuery UI libraries, if you haven’t already and include them in your page header. For this tutorial, you’ll need jQuery UI version 1.5.3. I usually use Google AJAX libraries to load jQuery and jQuery UI files as it acts as a CDN for your JavaScript files.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
The Featured Content Structure
Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
The class names ui-tabs-selected and ui-tabs-hide should not be changed, you can change other class names to your own.
The CSS Styles
Now for the CSS part, I fixed the width and height of the outer container div with id #featured and added a right padding of 250px to make space for the absolutely positioned navigation tabs for our featured content slider. Also, i set its position attribute to relative so that i can absolutely position elements inside #featured div relative to it.
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
The navigation tabs are absolutely positioned to the right with following styles:
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
The content panels are given following styles so as to fit them inside featured div container. The ui-tabs-hide class is essential to working of this script as it decides which content panels are hidden and which is displayed.
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
And the selected tab is given a background image with a left arrow. Here are the styles for selected tab.
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
Since i used small thumbnail images in the navigation tabs, i applied following styles to them.
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
Also, in the content panel which is displayed, it has one image of size 400px x 250px and some relavent title and description inside the div with class info. To display .info div over the image i absolutely positioned it over the image with a transparent background to add some eye-candy.
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
Note: All the required styles are within style.css file.
The JavaScript Code
Finally the JavaScript code, that’ll make our featured content slider work. I’m using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
And there you are with a nice looking featured content slider.
View Working Demo or Download the source code and try it.
Update(Aug 20, 2008)
How To Use With Latest version of jQuery UI
If you are using the latest jQuery UI version aleady on your website, then do not use the earlier version I am using above, simply change the code as below(Thanks Deni Sri Supriyono for commenting about this):
Just change this line from the JavaScript code:
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
to:
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
Pausing Slideshow on Hover
Here is a nice solution from Vernon(in comments below) for those who were looking to enable pause on hover for the current slide. Use this piece of JavaScript code instead of above.
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
Bookmark n Share
Subscribe to Full RSS Feed
If you found this article
useful, then consider subscribing to our
RSS Feed or
e-mail updates to stay updated with
latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.
181 Responses (Add Your Comment)
Comments are closed for this post.
12 Lesser Known But Useful WordPress Hacks
15 Ways to Improve CSS Techniques Using jQuery
25 New & Useful PHP Techniques & Tutorials
21 Brilliant jQuery Image Gallery/Slideshow Plugins
25 Incredibly Useful CSS Tricks You Should Know
30+ Fresh & Amazing jQuery Plugins & Tutorials
Very nice. I will use this tutorial on my next wordpress project wich wil be a portfolio theme
glad you found this useful
I am very thankful for this . it really saved my day
This looks great! Excellent application of the UI. I swear, soon you won’t be able to tell the difference between js and flash photo sliders. Nice!
definitely Jesse, jQuery UI has full potential to act as Flash replacement in most cases.
Damn, unbelievable how you can obtain a great slideshow with so little javascript !
I definitly have to take a closer look at jquery UI. Even with jquery you would have a longer code.
Very nice, thanks !
But for firefox users a little:
a:active, a:focus {outline: 0;}
could be nice because of the dotted outline on firefox
awesome work. I’ve been trying to do this for a while..
An excellent application of jquery UI. Well done and thank you for sharing.
When I see it with IEtexter IE7 (and IE6) the div class=”info” content is off to left about 20px.
It looks great with iE8. I guess we can add a conditional statement.
awesome tutorial. great work. i have bookmarked this page.
very nice..thank you
great tutorial. will port it to a cms as a block. thank you very much
thanks, great tut. I will use it.
I need some help. It isnt appearing properly in Internet Explorer.
Please check my test blog with IE
http://testing4j.blogspot.com
Otherwise its working great in all the other browsers. Thanks for the great slider
IE 7 or earlier have some problems with CSS styles and the transparency effects. You should use css opacity filter to get the similar effect in IE.
Hey can you tell how to create a slider like the one at http://www.goal.com
Its similar to yours but there is a small button which allows more than 4 post in the slider
that type of effect will require some javascript code, that might require using Coda-slider jQuery plugin to control view of thumbnails.
and btw, nice implementation of this featured content tutorial on your blog
I really don’t think it’s a good idea to load UI only for this thing. You can achieve same effect with less code than UI (with jquery though)
So awesome! Is there any way to make it partially work if JS is disabled? By that I mean each slide is shown when clicked.
Wonderful! One thing though, If you include “a { outline: none; }” in your CSS, it gets rid of those nasty navigation image outlines when you select one.
Is it possible for the right column to scroll to allow more thumbs?
definitely Andrew, we can fix the height of ul element and set its overflow property to scroll or auto
Thank you for the tutorial! I always wanted to implement this on my website.
This looks great, is there a quick way to make the slider stop when i scroll over the content, instead of it continuing to the next item ?
PS – Im a Jquery noobie
Great implementation! Love it! Are you planning to make this a wordpress plugin for featured articles? Because if you did I can see this become one of the most popular ones!!!
Thank You!
Thanks Wolf, would consider your suggestion.
Can’t wait!
That would be great! 
Keep up the good work!
Two things that dissapoints me:
= What when you have many more Thumbs…
= Why is the transition not without the WHITE but truely pic to pic?
When linking your JS scripts straight to google instead of copying over locally, you make your pages awfully slowm and dependantly of google being online?
anything you like?
nice work!
Very thanks for this, but i have 1 problem, how can i show the info div outside at the bottom of the box, for have more space where xplain my products, hope your help, thanks very much.
that’ll require a bit of CSS tweaks to the info div to position it absolutely below the slider box
Thanks
But I had to remove the “padding-right:250px;” from
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
for the slider to work properly in IE. I removed it and adjusted the value of width. Now it works properly in all browsers.
Btw can u please implement the thing used by http://www.goal.com as I dont have any knowledge about Javascript
Is there a reason this requires jQuery UI version 1.5.3 and not the latest stable (1.7.2)?
jquery UI 1.7.2 needs different IDs to understand tabs structure, i used the one that jquery UI 1.5.3 uses. so you just need to use the tabs structure as defined by jQuery 1.7.2 if you wish to use it.
Is there a chart or a guide that lists the classes?
I have tried to use Jquery UI but everything seems to be ‘themed’ so 1 change on tabs trickles down to accordion, sliders etc.
Based on what do I name classes and then chain them as “ui-tabs-panel ui-tabs-hide”?
I have no problems making xhtml and css to my liking BUT mixing it with UI css seems to be a complete nightmare…
Thanks!
I did try but i dont have good results on changing image display, i wanna add more thumbs and show the descripcion under both columns, please help me, many thanks.
Great work. Maybe for the next update add a “onmouseoverpause” function.
I’ll keep this in mind.
thnx for sharing!
Hi,
i do love your script, but i dont get it running on my website, because i am already using jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js (for tabs and accordeon) so when i include this one it doesnt work, it show ups corretly but io cant navigate through it .
Can you please be more specific -maybe a small tutorial how to use the tab structure of jquery-ui-1.7.2.custom.min.js
Would be great. Thanks
Hey there, this is a really great feature that I’ve been looking into implementing on my site and I really like yours! One question though, and I haven’t been able to get it working so far:
How do I get the two sections of content to be swapped? I want the navigation on the left, which I am able to do by changing the div “featured ul.ui-tabs-nav” to have no padding. How would I go about getting the content to move over the 250 pixels?
Thank you,
Aaron
nice tutorial, easy to implement and great slider, mate!
@alemao: on my trial with jquery 1.3.2, jquery ui core 1.7.1 and jquery tabs 1.7.1 (all scripts using javascript bundled from wordpress installation), it works perfect.
i just change this line from the javascript code:
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
to:
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
i have not try it with 1.7.2.
hi
nice n great tut
but help me plzzzz
i want to implement a way so that the pix selector on left can randomly populate its list
like there is a car at the first pic
but on next page visit or refresh there shud be next or another randomly selected pic on the top selected first and so on instead of the car i hope u get wat i meant to ask help me thnx
@Deny Sri Supriyono It works well on UI 1.7.2.
Still trying to figure out how to fade-in/out simultaneously instead of the white out
$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
this is the code that works with 1.7.2 ????? In my case id doesnt work…:(((((((
Hey I am trying to implement this but the main box does not change! http://www.sussexvision.com
It seems you may be using jQuery UI 1.7.x if so then browse the comments above you.
I want to use more than 4 pictures but want the size of the image frame to be as it is. What to do? Thanks in advance for your solution. Not to say, a very nice plugin!
great tutorial and a great way to implement jquery for featured content. I am really getting into jquery at the moment, it is adding a whole new dimension to my websites. I have been implementing a lot of plugins on the new website I am doing for my kid’s school, and this is a welcome addition!
I was wondering if you could make a plugin from this awesome tips.
I think it’s good for newbie like me.
Thank you for this tips
It works like a miracle… I’m a begginer in jQuery adoption so such tutorals are extremely helpful. Thank you a lot.
jQuery UI 1.7.2 works fine for me..
THANKS ALOT! U REALLY HELP US! KEEPUP THE GOOD WORK!
it doesnt work for me, can you post the code or your site ? i use 1.7.2 and it doesnt work..:(
This one I looking for, other slide show only show image strip at bottom or top, but this one have title. I’ll use for my wodpress theme, Can you make tutorial to apply in WordPress that use jquery from wordpress in plugin, because have “no conflict” in jquery. one more question, can I add more than 4 Image ?
Is there any way to change the timing of the slide changes? I’d like it to be longer. Thanks!
Yes,
tabs(“rotate”, 5000, true);
Set the 5000 (5 seconds) to something higher.
Also if you remove the ‘true’ the tabs will stop rotating once they’ve been clicked on.
Thanks!
Thanks
I want to use this script on one wordpress project. But I want to use more images. But for thumbnails I want to show only 4 and when it moves at the 4th thumbnail i want the 4 thumbnails to scroll one step at top.
Can you give me any suggestion how to implement this.
Whooow! Works very well ! thanks for sharing your code.
The only thing that makes me hesitate to use definitively your code on my website is the size of the jquery ui to be downloaded for each client:
jquery-ui.1.5.3.min.js >> 180 Ko
and jquery-1.3.2..min.js >> 52 ko
>>232 ko for this content slider.
That is pretty much than the others. Yes the quality has a weight but I think it is a little too much.
Would it be possible to reduce the .js size?
Thanks !
Seb
Thanks!!… Great!… And not only works with images!!… i can put a swf in the slider!… and then a video!
….
If the Slider admit more than four “fragments/panels”, for example with a scrollable thumbs, it would be perfect =)
Thanks again!!
Hi Any solution for my problem. I am waiting for a reply from you
the solution to your problem is somewhat difficult as this slider uses jQuery UI Tabs, most likely you should make your thumbnails scroll up when the 4th item is shown by coding on the show event of tabs.
Refer to Events documentation of jQuery tabs here: http://www.jqueryui.com/demos/tabs/ for more detail on how to catch the show event of jquery UI Tabs
Thanks for your help. I will try to find any solution for my problem
Hi,
I would like to customize this code as per my requirement, since this going to help me a lot and I would like to thank you for your valuable effort on developing this one. Really, this has helped me a not on my upcoming and about to launch website.
Thanks a lot again, cheers! keep up the spirit….. Rock the Web World!
Thanks,
Vivek
[Founder of Developer Snippets: http://www.developersnippets.com
Hi ,
I have used this content slider in my website , but onthing i want to implement is dynamic background image for each div (Featured-1 (haveone background image ) featured -2 have another background image) how do i do that.
#featured .ui-tabs-panel{
width:300px; height:300px;
background:url(edges.jpg’); position:relative;
}
this will be constant ..
want to have one background for each div info.
pls help.
add unique classes to each of the div and then use custom background for each
Its very nice but i want one facility.If i put mouse pointer over the image it should be stoped.Can it possible
Great plugin.. thanks..
is it possible to place thumbs “under” main content , not on the right?
Thanks a lot for sharing this great plug-in.
how much is the max images ? 4 or N ?
i want rotate 8 news …. is valid ????????
anything special configuration ????????????
Is there a plugin or something for this available with WordPress?
I’m very much greatful having this code Thanks very much for that !!!!
Hi,
Thanks a lot.good work.
But the effects are not working in ie6 browsers.any thing i need to do?
very simple descriptions, thanks
Hello.
Thank you for your great library.
I was using the WordPress plugin.
Now is the personal use.
There was a request to use the plug-in from a friend.
Missing license for this library is currently pending.
This library is licensed?
You are free to use or modify the provided code in any way you like, but since jQuery and jQuery UI libraries are also required, please refer to their licenses too
Hello, Thanks for your works. I would like to use it in my new website. One thing I have problem with though. I have a JQury drop down menu just above this slider. And I cannot “overlay” your slider when the menu drop down. Can you help?
Appreciate!
Tim
try increasing the z-index CSS property for your drop down list items to a higher number like 9999
Thank you very much!
hi. its very cool. it works with wordpress, to show posts?
I love this tutorial. Thank you.
I need to adjust my large images approximately margin: -20px, -20px, 0px, 0px and nothing I’ve tried has worked. Any ideas for a workaround?
Thanks again for this great tutorial. Other than this small issue, it was easy to install.
Sorry – found a work around immediately after I sent this comment.
I cant get mine to cycle through. Im VERY new at all this. Can someone please check out my site and help me out?
http://www.greenspeedmagazine.com/fusion/files
Im not sure where to put the code:
1. $(document).ready(function(){
2. $(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
3. });
Do I need to install jquery on my server and then link to mine instead of the one listed in the code above? I desperately need help.
Thanks!
So I tried to install jquery on my site and it screwed it all up. if you try going to my site:
http://www.greenspeedmagazine.com/fusion/files it wont work now it just takes you to a jquery messages page. What is going on? I even deleted jquery from my server, how do I fix this?
and for help with my slider you can still see the site at:
http://www.greenspeedmagazine.com/fusion/files/news.php
Thanks!
ok fixed it, now I just need help fixing my slider. can someone look at my code and tell me what Im doing wrong?
thanks!
Jeremy, you haven’t put the code at right place, You need to add provided JavaScript code into the <head> tag of your page. See the demo http://demo.webdeveloperplus.com/featured-content-slider/ and check its source code
ok I tried moving the code into the head tag like in the example but it still isnt working. It wont cycle through or change the main picture when you click on a category.
Any more suggestions? Is my code still in the wrong place? I apologize for all the questions, but Im extremely new with all this.
Thanks!
This is a great tutorial and I thought I could add to it a bit in these comments. I saw some visitors had asked about pausing on hover. It’s actually quite simple:
$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured”).hover(
function() {
$(“#featured”).tabs(“rotate”,0,true);
},
function() {
$(“#featured”).tabs(“rotate”,5000,true);
}
);
});
Hey Vernon,
Thanks for posting a solution to this question. Didn’t think there would be a response until now.
Great work!
Thanks! Sorry for the late reply, but I just came back here again as I’m including this tutorial in a run down of tools and plug-ins to use when building a site around jQuery. Neat to see my solution added to the article. Sweet!
Any suggestions at all? Im willing to try anything. It wants to work, because when there is a problem with the code and the page displays wrong, eg the four pictures are all visible and displayed in a column down the page the pictures will flash and go through in order. so it wants to work, but for some reason I cant figure out, it wont.
like I said im willing to try anything at this point.
Thanks!
Hey, Implimenteed this worked fine except for the text that is supposed to appear over the picture!?
it just goes down the bottom of the slider outside the border for some reason “S
btw thanks
try this script..after
thanks. but, how to make featured function can be better for more image ?? i’am agree with siv it just goes down the bottom of the slider outside the border…..
hehe, i have solution for it after post….
hi, siv…and nano… you can try div style = overflow, after ul class ui-tabs-nav for create scroll on your small image, its work for me
Very nice!
Is it possible to crossfade the slides instead of all fading from white?
Hi there ,
I want to ask you …. how can i make this work in wordpress ? is there a way to implement this or a plugin something ???
Thanks allot !
Another way to change on hover is
$(function() {
$(“#tabs”).tabs({
event: ‘mouseover’
});
});
[ from : http://www.jqueryui.com/demos/tabs/#mouseover ]
Hi, I’m not sure if you can help me with this, but I really enjoy this slider and can’t get it to function properly on my site…
I’ve got it working here: http://lifewater.org/modx/assets/images/home-content/
But I cannot get it to work once I “plug” it into my actual site with content…..
http://lifewater.org/modx/
Do you have any ideas of what could be happening? I’m pretty sure I copied and pasted the same code…
It looks like it was working on your site, but not the first one. I had a problem with mine too when I would put it in my header. Im not sure how to explain this on here, but try putting the code for the content-slider outside of the rest of your code, like at the bottom of the page after everything else has been closed. then you can get it to show up where you want by editing its location in the css. does that make sense?
also is this your charity? i have whats called a charity of the month panel on my site where we sponsor a new charity every month and visitors can donate. I’d love to help with this charity and sponsor it for a month. 100% of the proceeds go to the chairty (unless there are some processing fees like mailing the check or something like that)
http://www.greenspeedmagazine.com/fusion/files is the site for now. Its a LONG way from finished, but when it is id love to work something out. let me know.
Hi thank you,
I tried placing this part of the code:
[code]
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3500, true);
});
[/code]
in various places and here is what I’m finding that it does open and work in Safari and a few browsers, but it does not work on a mac Firefox, but does work on a PC firefox.
And the links turn to something like this: http://lifewater.org/modx/#fragment-2
Rather than going to the other content where Safari says “Go to #fragment-2 on this page”…. So, it is something with the code in relation to Firefox.
Any ideas?
And yes it is a charity I work for and I’d love to post it once this site is done. The old site is old…
It worked! Thanks I put it at the very bottom of the code and it worked.
Hi there, congrats and thanks on this awesome solution! It works really well and will be visible in a new non-profit project of ours. Right now an image exits and a new image fades in. Would it be possible to have them fade over? This way there’s always an image.
Any help would be appreciated, I can’t seem to find my coding skills..
Regards Rick
Absolutely awesome – looks great just what I need – I will try it out this week.
Thanks
Jonathan
Many thanks for creating and sharing this – just what I was looking for.
I’ve added Vernon’s ‘Pausing Slideshow on Hover’ code which I’ve encountered a problem with. All works fine until I click a tab to view a different ‘fragment’, after which the ‘pause on hover’ no longer works. Wondered if anyone else has encountered this and if there is a fix?
Thanks again,
Andy
Hi Andy
I have the same issue adding the pause on hover code snippet – if you try clicking a few thumbnails and try and hover the transitions become really erratic.
We need a new pause on hover solution – anyone have any ideas or can fix Vernon’s solution?
Thanks
Jonathan
I was having the same problems of erratic jumping after the hover. I upgraded the UI to 1.7.2 and that seems to have corrected the issue.
Hi there,
Is there a way to have this work in a random order making sure not to repeat itself consecutively?
What about changing order of start item?
Thanks
Is there any way of slowing down the fade?
Not the timing, but the actual fade itself…
Thanks! This is great!
Many thanks for this, it’s very useful, and all working great.
3 points / questions:
1. It loads up with div fragment 4 selected, not div fragment 1. Any idea why?
2. Would you be able to advise how to cross-fade the images, rather than fade to white?
3. I’d like the info box to slide in dynamically, rather than just be there statically when each fragment fades in. Could you possible advise me how to achieve that?
I’m new to jquery, but this has certainly whetted my apettite. Thanks for that.
One further point which may help those who are not managing to get things working with the ui version 1.7.2 – when I copied and pasted the code from this page, the speech marks which came with it were curly, and should be replaced with straight ascii speech marks.
further to my previous comment (1) about fragment 4 loading first, that was my bad – it’s actually working fine (I was reloading an incorrect url).
Nice script. I like it! Thx.
This was very helpful, have been searching for a way to get rotate to work in 1.7.2 ui. Thank you very much. Very cool tutorial.
Excellent use of jquery. this example is exactly what I want to have on my website. Thanks for sharing.
Thanks very useful info……
Hi, this is a nice tut:)
But i need help
How can I implement it for WordPress recent posts? I want to show the 5 latest post in this slider,but I can’t figure out how to do this…:(
Hi, Really nice one.
is it possible that it also works on hover, when someone mouseover on the li , become visible in tabs panel.. ??
Is it possible to make the tabs on the right to be actual links? As in, they go to a different page?
When I tried to do that, it messed up the styling of it all…
Thanks!
Has anyone figured out how to make it pause on click instead of hover?
This is the best slide script, works great and adapted very easily
Best script on the web. thanks
Gr8 tutorial,
I am stucked in a situation where I am passing Featured Content Structure , i.e div using AJAX.I am using livequery plugin of jquery.But its not working.Can u help regarding this?Any suggestion?
I am using like this –
$(“#tab2″).livequery(‘click’, function(event) {
$(“#txt”).load(“portfolio.txt”);
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
on click of tab2 I am loading” Featured Content Structure” in txt DIV.portfolio.txt file contains “Featured Content Structure”. Where am I wrong?
Hello
Good script but I am using jootheme and it has a ajax menu. The following line conflicts with my menu
When I add this line to my header, my menu stop working and i get an java script error .
Could you please tell me how to solve this
Thanks
Hi there, really great script thanks, managed to integrate it into our website well, very quickly with your clear instructions. Love it! Was about to ask you a few issues, but with the help of Google i’ve managed to sort them out
One more time, thanks alot for your hard work! Let’s us people get on with the millions of things we gotta do!
Hi there,
as others said – superb slider, thank you very much for sharing your code. I tested it many times and it works perfect. It’s pretty easy to adapt but I have a problem with something that I can’t solve.
Hope you will be able to show me the answer
Anyway I would like to use it as menu that shows some text (on click), the problem is that each menu item is a graphic with another graphic for a hover and selected. Everything works great except one thing, I can set only one and the same graphic for selected menu item. How to add different selected graphic to each item?
I’m looking forward any help, thanks in advance!
Quick question. I got the script and customized it. This is honestly a great script and easy to use. I was wondering if we could add another element to it and how would I go about doing it. I was wondering if we could add a “Hide and Show” effect to the transparent background where the text shows inside the actual image so we are able to see the image in full without any text on it.
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/
I am getting an issue with IE…
The tab are not “rotating” and nothing happends when I am clicking on the ling to change tab… I don’t have any issue using Chrome or Firefox…
If you have any help to provide, that would be erally helpfull.
Thanks a lot.
Mat
good job! =)
i am gettingsome problem with ie
http://revelomax.blogspot.com/
I will implement this to my web project…, thanks a alot..
Hi all, can someone let em know how to get two of those working on the same page? I have created a whole new HTML section, with the ID featured2, and created all the CSS for this, I have then changed the call to this, but the second one still doesnt play:
$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured2 > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
Really great tutorial. The only issues I am having are the following:
1. Our jQuery accordion navigation menu now has a slow jerky animation when opening/closing. Is there a way to resolve this?
2. Our primary top level navigation drop-down menus (also jQuery) fall behind the news slider. Is there a way to make the drop down menus open on top of the slider?
Thanks
Nice tutorial mate, i’ll try that to create a nice addons
Thanks
Advice to get the PAUSE on HOVER to work.
Insert Vernon’s code:
$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured”).hover(
function() {
$(“#featured”).tabs(“rotate”,0,true);
},
function() {
$(“#featured”).tabs(“rotate”,5000,true);
}
);
});
Below the HTML of the slider.
This above does work, but once you click a tab it does not pause again.
What I did was wrap the “fragment” divs with a new div (#tabspanel) then assign it the CSS of “#featured .ui-tabs-panel”
I then changed this:
$(”#featured”).hover(
to this:
$(”#tabspanel”).hover(
Works perfectly! It only pauses when your mouse is over the Fragment blocks.
In Internet Explorer, the slider causes one of our accordion menus to slow down and have jerky movement when it is opened-closed. We also have a drop down menu that falls behind the slider causing it not to be viewable. We adjusted the z-index and for our menu, but the same behavior results.
None of the slowness occurs in Firefox or Safari…of course.
Any thoughts on this?
Thanks
What about adding a function to stop the rotation onMouseClick?