26. Jun, 2011 
50 Comments
jQuery Image Slider Part 1 Part 2 = www.youtube.com jquery.js file = www.harryfinn.co.uk jslider file = www.harryfinn.co.uk prev button = www.harryfinn.co.uk next button = www.harryfinn.co.uk
This is a quick tutorial of how you can use jquery to make some cool animation effects. It just using the slideToggle and some added CSS3 rounded corners to make it look even better.
nafw7: im first to comment but this is not the moviie i ...
TheWealthyPromoter: Ok after over a week of debating over this program...
abhilash1995ad: loooooser! this site wanted me to download a virus...
FlentMan: none of the files on the website work , evin the m...
frenchsquared: Check out wordpress . gordonFrench . com to see a ...
© 2011 WP Plates! | Wordpress Themes. All Rights Reserved.
Powered by Wordpress. Designed by 
thanks, cool tutorial
cool thx
That’s sweet dude!
Thank you so much for this video; it made it really simple for me, and launched me into the world of jquery. Bless you
That’s sweet dude!
Thank you so much for this video; it made it really simple for me, and launched me into the world of jquery
How do you do that big space? Like I have to press the space bar 5 or 6 times to get that lenght, when you press it once.
@nickwyatt123 in the code? im using the TAB key.
could you make an onclick on onmousedown I am new to using jquery.
hey.. just wondering.. how do you make the bars slide upwards instead of downwards? many thanks.. please reply asap..
@TheSuwage23 you would need to custom animate the height.
first setup your html so that as you adjust the height manually you get the effect you want. Then setup a .animate() to follow what you did manually.
ic.. im kinda new to jquery.. anyway to show a quick clip on how to make the boxes go upwards instead?
Just a note that this video uses code which is *not* supported in all the major browsers – for instance, the rounded corners code that is used is not support in the latest version of IE which is version 8.
@c532869 This makes me smile.
Screw microsoft.
Could you please help with this, I was able to change it so that instead of when you hover over it and it slides down, you have to click it. I achieved this by changing .hover() to .click(). However how could I make the header change to a different color when the box is showing, and back to orange when the tab isn’t. Please help, I’m new to JQuery.
@pstap92 So what you need to do is in the click, select the tab with jquery and run .css(“background-color”,”blue”)
and then for making it go back, whenever it slides back up, also have it select the tab and do .css(“background-color”,”orange”)
If you send me code I can show you with your code.
@optikalefxx I can make it change color, however I can’t get it to change back.
@pstap92 your hover must not be right. make sure you have the right syntax for the hover method.
you can always use mouseover and mouseout as separate functions instead of hover.
Nice Tut optikalefxx. WHY? Because it is done at a good flowing pace, and yet informative. Nice narration to. I know all the stuff in this tut, but i wish I had seen it when I was learning. Good effort!!!
I don’t know if any one has pointed this out, but the CSS for rounding corners in Firefox is wrong. It’s supposed to be -moz-border-radius-topleft: -moz-border-radius-topright: and so on and so on. Other than that, great stuff. Thanks for the tut.
wow, cool video. Thanks alot
This looks cool but there’s gotta be a better way to do it. You’re using slideToggle() twice and it’s already a toggle, so using it twice seems redundant. I would think it would be better to have slideDown() for the first hover function argument then slideUp() for the second. It does the same thing but seems more correct in terms of the jquery method used.
@giantsfan245 – using a click handler instead of hover seems more user-friendly to me. Then the code would be shortened to just:
$(‘.header’).click(function () {
$(‘.box’).slideToggle();
});
@optikalefxx Amin
I don’t know if any one has pointed this out, but the CSS for rounding corners in Firefox is wrong. It’s supposed to be -moz-border-radius-topleft: -moz-border-radius-topright: and so on and so on. Other than that, great stuff. Thanks for the tut.
@pbsallad Youre right
@optikalefxx yeah truly, i agree with u fully, i mean dear Gawd,, if u can program jquery why would u use IE8.. or IE in any universe or for any reason even as an end user… most people are finally adapting to firefox atleast and samsung is pushing the google browsing concept… so im sure 2 years from now everything will be a ok for any scripts.. screw IE9 aswell… go chrome or go home.. yay for safari and dnt run with the flocks get firefox… lol.. thanks for the awesome tut.
Nice tut, I’m developing my site using your slider – on the web at baad.co
Quick Q: Do you know why it doesn’t start and stop at every pic?
@gatebasher311 just had a quick look at your site – I’d need to take a look at the code and script source you are using in case there is something wrong with that/conflicting as it should work fine.
Hi harry, me again. could you replace the images with an embeded youtube video?
hi I cant get it to function. Its just 3 pics on top of each other and I cant get it to slide. any help would be greatly appreciated.
@tuminh112 Hi – Please email me a copy of your code to [email protected]
Ok, so I got everything to work, but now i have 2 questions, that should evolve into a third follow up video. 1 How to you hide the bottom 2 images so you can continue working beneath, instead of having 3-10 images listed down your site in the local view of your website, and second how to have the images Pause for x seconds before starting the slideshow, with x seconds in between.
@WorldStarStudios can you please clarify/re-explain what you mean by hiding the bottom 2 images in local view? the plugin itself is not designed to start and then stop or vice-versa etc I will have a look at this tomorrow for you but I dont think it can support a starting pause itself. Perhaps using some ajax/jquery to hold/pause the slider from loading would work instead/just as well
@HarryFinnUK For example I use Dreamweaver and I see the 3 images listed down the page in my local view when I hit f12 I just see the 3 images stacked into the jslider, I was wondering if there is a way to see the images stacked in the local view so I can continue developing my page beneath the Jslider. (I would like to ass content directly beneath the jslider, but the images extend down the page.
@WorldStarStudios Ah right well your problem there is Dreamweaver not the jquery slider. Dreamweaver fails to support and display the jquery scripting and library. The images will not actually be there on an actual website or server when uploaded properly, instead it will show the slider correctly (i.e. the iamges stacked) – when you are using dreamweaver are you using the design view or code view? If its the code view and you are capable coding the html and css I suggest you try another program
@HarryFinnUK i.e. notepad++ which is what I use on my windows machine or text wrangler on my macbook pro.
Hi, Where is the “jslider” file from? i’m trying to figure out if there is a way to add text to the images as an overlay but i cant find anymore information on the jslider file.
@TheZaza101 – The slider file is in the description with all the other file links. As for a text overlay you would need to use CSS to position a new div layer on top of the image. If you are at all unsure how to do this then let me know and I’ll happily make a video explaining how to so!
Can this be used in WordPress?
@kakoomakoo Yes, I’ve used it with several wordpress sites. You can copy and paste your normal HTML slider code for it to work too.
Will this jslider slider work with nested uls?
@FrozenShield As long as your HTML is correct then yes it will work fine!
@HarryFinnUK really? ok cool I am going to give it a go then.
@FrozenShield good luck feel free to send me and email if you get stuck with it at all!
Thanks for this, really useful. It’s working perfectly in all browsers apart from Google Chrome. Have you encountered a problem in the past?
I’m sure my global style sheet is conflicting with it somehow. I’m using Blueprint CSS grid to layout the page. When I swap the link to a simple style sheet (similar to the one in the video) it functions fine. Odd that it’s just happening in Chrome though. In Chrome, the inline CSS generated for div.slider is width: 0px rather than 900px as set by CSS.
@ant0marlow Hi there, no I haven’t come across this issue before as it works perfectly fine for me with chrome. Like you’ve already said, there is obviously a css conflict with the blueprint CSS grid layout styles. I suggest that you try and either locate the conflicting element(s) or rename the slider element styles and update your html to see if that resolves the issue. Feel free to email me any code if you’re stuck!
Great job on this video!
the prev button don’t work O.O
The firefox debug console gives me this error: $(“.slider”).jslider is not a function
@novasism is the slider functioning correctly or is it not working at all and flagging this error up?
@HarryFinnUK It’s not functioning at all. I’ve probably missed some part, although I’ve gone through the code and this tutorial several times now. I managed to create a slide that looks somewhat the same as yours with some help from the documentation at jquery.com. I’ll be sure to leave you a message if I find out what went wrong. Might save you time with other newbies having the same problem