jQuery Image Slider Part 1

VN:F [1.9.9_1125]
Rating: 0.0/5 (0 votes cast)

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.

pixel jQuery Image Slider Part 1

50 Responses to “jQuery Image Slider Part 1”

  1. thanks, cool tutorial

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  2. cool thx

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  3. johnprattchristian Reply 27. Jun, 2011 at 9:16 PM

    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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  4. johnprattchristian Reply 27. Jun, 2011 at 8:54 PM

    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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  5. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  6. @nickwyatt123 in the code? im using the TAB key.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  7. could you make an onclick on onmousedown I am new to using jquery.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  8. hey.. just wondering.. how do you make the bars slide upwards instead of downwards? many thanks.. please reply asap.. :D

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  9. @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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  10. ic.. im kinda new to jquery.. anyway to show a quick clip on how to make the boxes go upwards instead? :D

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  11. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  12. @c532869 This makes me smile.

    Screw microsoft.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  13. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  14. @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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  15. @optikalefxx I can make it change color, however I can’t get it to change back.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  16. @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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  17. 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!!!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  18. 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. :)

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  19. wow, cool video. Thanks alot

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  20. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  21. @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();
    });

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  22. @optikalefxx Amin

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  23. 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. :)

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  24. @pbsallad Youre right

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  25. @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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  26. 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?

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  27. @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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  28. FormidableTutorials Reply 27. Jun, 2011 at 7:56 AM

    Hi harry, me again. could you replace the images with an embeded youtube video?

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  29. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  30. @tuminh112 Hi – Please email me a copy of your code to harry@harryfinn.co.uk

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  31. WorldStarStudios Reply 27. Jun, 2011 at 5:39 AM

    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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  32. @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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  33. WorldStarStudios Reply 27. Jun, 2011 at 5:02 AM

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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  34. @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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  35. @HarryFinnUK i.e. notepad++ which is what I use on my windows machine or text wrangler on my macbook pro.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  36. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  37. @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!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  38. Can this be used in WordPress?

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  39. @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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  40. Will this jslider slider work with nested uls?

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  41. @FrozenShield As long as your HTML is correct then yes it will work fine!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  42. @HarryFinnUK really? ok cool I am going to give it a go then.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  43. @FrozenShield good luck feel free to send me and email if you get stuck with it at all!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  44. 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.

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  45. @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!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  46. Great job on this video!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  47. the prev button don’t work O.O

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  48. The firefox debug console gives me this error: $(“.slider”).jslider is not a function

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  49. @novasism is the slider functioning correctly or is it not working at all and flagging this error up?

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
  50. @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 :-)

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.CommentLuv Enabled

SEO Powered By SEOPressor