Create Featured Content Slider Using jQuery UI

Posted in jQuery Popular

Featured Content Slider using jQuery UI

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

1. With jQuery UI version less than 1.9

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

2. jQuery UI Version greater than 1.9

Updated on (Oct 12, 2012)

In the recent jquery UI release, the tabs rotate method has been deprecated and it is now available as a separate plugin for those who need to use it. To get this slider working, you will need to change the code a little bit. First, grab the JqueryUI tabs rotate plugin(jquery-ui-tabs-rotate.js file) created by Christopher McCulloh and add it to the html page containing slider.
Next, in the html code, remove the ui-tabs-selected class from the ui-tabs-nav first list item.

<ul class="ui-tabs-nav">
	<li class="ui-tabs-nav-item" 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>

Finally, add these css styles to styles.css file because now jquery ui adds ui-tabs-active class to the currently active tab instead of ui-tabs-selected.

#featured li.ui-tabs-active{ 
	background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-active a{ 
	background:#ccc; 
}

View Demo with jQuery UI 1.9.0 and jQuery 1.8.2

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

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf 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)

  1. iwpdesign says:

    Very nice. I will use this tutorial on my next wordpress project wich wil be a portfolio theme :)

  2. Jesse says:

    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!

  3. Simon says:

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

  4. sam says:

    awesome work. I’ve been trying to do this for a while..

  5. shin says:

    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.

  6. Naresh says:

    awesome tutorial. great work. i have bookmarked this page.

  7. sonichtml says:

    very nice..thank you

  8. mrki says:

    great tutorial. will port it to a cms as a block. thank you very much

  9. szabaduszo says:

    thanks, great tut. I will use it.

  10. Rahul Jadhav says:

    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 :)

  11. Ionut Staicu says:

    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)

  12. hcabbos says:

    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.

  13. Thomas says:

    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.

  14. Andrew says:

    Is it possible for the right column to scroll to allow more thumbs?

  15. Vamsi K says:

    Thank you for the tutorial! I always wanted to implement this on my website.

  16. Max says:

    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

  17. WOLF says:

    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!

  18. dirk says:

    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?

  19. joxxe says:

    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.

  20. Rahul Jadhav says:

    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

  21. Travis says:

    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.

      • lebisol says:

        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!

  22. joxxxe says:

    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.

  23. Dré says:

    Great work. Maybe for the next update add a “onmouseoverpause” function.
    I’ll keep this in mind.
    thnx for sharing!

  24. alemao says:

    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

  25. Aaron Allen says:

    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

  26. 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.

  27. banny says:

    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

  28. Don says:

    @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

    • Van says:

      $(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…:(((((((

  29. Hey I am trying to implement this but the main box does not change! http://www.sussexvision.com

  30. Niaz A Morshed says:

    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! :)

  31. Ryan Gliozzo says:

    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!

  32. V.C says:

    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

  33. Anna L. says:

    It works like a miracle… I’m a begginer in jQuery adoption so such tutorals are extremely helpful. Thank you a lot.

  34. SPbb says:

    jQuery UI 1.7.2 works fine for me..

    THANKS ALOT! U REALLY HELP US! KEEPUP THE GOOD WORK!

    • Van says:

      it doesnt work for me, can you post the code or your site ? i use 1.7.2 and it doesnt work..:(

  35. Abu Farhan says:

    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 ?

  36. J says:

    Is there any way to change the timing of the slide changes? I’d like it to be longer. Thanks!

  37. Bazmo says:

    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.

  38. J says:

    Thanks!

  39. Neel says:

    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.

  40. Seb says:

    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

  41. alfred says:

    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!!

  42. Neel says:

    Hi Any solution for my problem. I am waiting for a reply from you

  43. Vivekanand says:

    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

  44. shiva says:

    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.

  45. umesh chand says:

    Its very nice but i want one facility.If i put mouse pointer over the image it should be stoped.Can it possible

  46. mehmet says:

    Great plugin.. thanks..
    is it possible to place thumbs “under” main content , not on the right?

  47. Kaan says:

    Thanks a lot for sharing this great plug-in.

  48. nano says:

    how much is the max images ? 4 or N ?
    i want rotate 8 news …. is valid ????????
    anything special configuration ????????????

  49. Thad says:

    Is there a plugin or something for this available with WordPress?

  50. Charllyano says:

    I’m very much greatful having this code Thanks very much for that !!!!

  51. Mohamed kaja says:

    Hi,
    Thanks a lot.good work.

    But the effects are not working in ie6 browsers.any thing i need to do?

  52. alpin says:

    very simple descriptions, thanks

  53. Mark says:

    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

  54. Tim says:

    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

  55. Tim says:

    Thank you very much!

  56. marujo says:

    hi. its very cool. it works with wordpress, to show posts?

  57. Amy says:

    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.

  58. Jeremy says:

    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!

  59. Vernon says:

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

    • Uri Grinwald says:

      Hey Vernon,

      Thanks for posting a solution to this question. Didn’t think there would be a response until now.
      Great work!

      • Vernon says:

        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!

  60. Jeremy says:

    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!

  61. Siv says:

    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

  62. ivanichi says:

    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…..

  63. ivanichi says:

    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

  64. Joe says:

    Very nice!
    Is it possible to crossfade the slides instead of all fading from white?

  65. Filme noi says:

    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 !

  66. AnubisibunA says:

    Another way to change on hover is

    $(function() {
    $(“#tabs”).tabs({
    event: ‘mouseover’
    });
    });

    [ from : http://www.jqueryui.com/demos/tabs/#mouseover ]

  67. Kirsten says:

    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…

    • jeremy says:

      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.

      • Kirsten says:

        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…

      • Kirsten says:

        It worked! Thanks I put it at the very bottom of the code and it worked.

  68. Rick says:

    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

  69. Absolutely awesome – looks great just what I need – I will try it out this week.

    Thanks

    Jonathan

  70. Andy Gosling says:

    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

      • Vince says:

        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.

  71. Uri Grinwald says:

    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

  72. Kirsten says:

    Is there any way of slowing down the fade?

    Not the timing, but the actual fade itself…

    Thanks! This is great!

  73. aljuk says:

    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.

  74. aljuk says:

    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).

  75. Nice script. I like it! Thx.

  76. mike says:

    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.

  77. Jaspal Singh says:

    Excellent use of jquery. this example is exactly what I want to have on my website. Thanks for sharing.

  78. selva says:

    Thanks very useful info……

  79. Balou says:

    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…:(

  80. Khawar says:

    Hi, Really nice one.

    is it possible that it also works on hover, when someone mouseover on the li , become visible in tabs panel.. ??

  81. Kirsten says:

    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!

  82. Jeremy says:

    Has anyone figured out how to make it pause on click instead of hover?

  83. This is the best slide script, works great and adapted very easily

  84. Best script on the web. thanks

  85. amarshukla123 says:

    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?

  86. vnjporg says:

    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

  87. 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!

  88. Bartolo says:

    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!

  89. NICKD says:

    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.

  90. 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/

  91. Mat says:

    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

  92. Nikesh ponnen says:

    i am gettingsome problem with ie

    http://revelomax.blogspot.com/

  93. Gie says:

    I will implement this to my web project…, thanks a alot..

  94. Ben Green says:

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

  95. gkiller says:

    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

  96. TransDisplay says:

    Nice tutorial mate, i’ll try that to create a nice addons

    Thanks

  97. Andrew says:

    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.

    • Andrew says:

      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.

  98. gkiller says:

    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

  99. mp says:

    What about adding a function to stop the rotation onMouseClick?

Comments are closed for this post.