jQuery Image Slider - Part 2

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 467

  • @_jsmth
    @_jsmth  12 років тому

    No problem! If you haven't already make sure you like my facebook page (link in the description) there you can find out latest news about up coming tutorials and the website as well as subscribing to my channel. Thanks!

  • @_jsmth
    @_jsmth  12 років тому

    Thanks for making this clear, I am going to make sure that in my next tutorials I am going to be explaining these small details people miss.
    Thanks for the feedback, at the moment my internet connection is down, as a phone line has gone down somewhere near my 'pad' so I am going to have to wait a tiny bit before more tutorials come out but they are on there way soon! stay tuned.

  • @_jsmth
    @_jsmth  12 років тому

    Thanks man, it's great to get feedback! I hope to get some more tutorials out soon! It's been to long, so stay tuned!

  • @_jsmth
    @_jsmth  12 років тому

    you can zip up the package and send it to my personal email joe@sleekode.com I will personally take a look at your problem until Helpingdevelop is back up, Sorry for taking so long for the other tutorials the internet is down atm. :) thanks.

  • @TheFizzingWhizbee
    @TheFizzingWhizbee 10 років тому

    Thanks for the tutorial! For anyone who is confused, jQuery methods are now different, so instead of using show() and delay(), use fadeIn() or other methods.

  • @alessandroyorba8187
    @alessandroyorba8187 11 років тому

    Awesome tutorial! No need to code the shadow effect. One work around for those who want the shadow to appear only when the image appears: add the shadow to the images in Photoshop, save as .PNG (to preserve transparency). Make sure to use the newly created canvas size for all images by updating the code with the corresponding pixel height and widths.

  • @racememrulkayes
    @racememrulkayes 11 років тому

    This is a brilliant piece of tutorial. I have tried following a few others, most times I have difficulty with the first image appearing instantly.
    For this tutorial to work perfectly, you MUST name the image ID's as integers, i.e. 1, 2, 3 etc. As in the script the ID's are used as count. So, if you are trying to replace your original ID's and hoping it to work, it will most probably not!
    I have a feeling "fade" instead of "slide" looks better. Well, thanks to Helping Develop!

  • @calvindigital
    @calvindigital 12 років тому

    After going over it over and over I figured out the problem that we are having. The problem is with line that has the Set Interval function. If you followed the tutorial step by step it should look like:
    setinterval(function (){
    It needs to look like:
    setInterval(function (){
    The only difference is the i in "interval" must be capitalized.
    Fantastic tutorial!

  • @xXStevieGillenXx
    @xXStevieGillenXx 11 років тому

    Absolute legend!! Been looking for a good jquery tutorial for a long time and you finally come up with the goods. Massive thumbs up and a subscriber.
    Cheers

  • @gizzambler
    @gizzambler 11 років тому

    This tutorial video is the best one I have seen on UA-cam on how to make a jQuery Slider. Thank you!

  • @haunted2bhaunted
    @haunted2bhaunted 12 років тому

    It is really tough to get good tutorials on UA-cam..If there are any good tutorials then they are not free ...These my friend are the best tutorials i have seen on youtube on website development and related stuff...These actually lay emphasis on what people want their websites to be like..Thanks a ton..N I pray that you could be back as soon as possible on youtube..

  • @hantklem
    @hantklem 10 років тому +16

    thx alot
    but please turn the music down because its so loud , couldn't focus !

  • @thorna100
    @thorna100 11 років тому

    I actually Loooove you!!!! Ive been trying to do this for like a year now and finally with your tutorial i have managed it woooooooooooooo! keep up the good tutorials.

  • @_jsmth
    @_jsmth  12 років тому

    Ahhh your a fan of the background music! I actually stopped this in recent tutorials. But I think it is going to be something to add in again in my next tutorials as a lot of people enjoyed that!

  • @mahdimashrafi104
    @mahdimashrafi104 9 років тому +9

    First Image works smoothly but the rest of the images dont show up? Please Help ;(

  • @Exfridos
    @Exfridos 11 років тому

    The CSS selector ".slider#1" suggests that the given elements have BOTH the class .slider and the id 1. What you're looking for is the element with id 1 inside the element with the class .slider. Long story made short, there is quite a difference between ".slider#1" and ".slider #1".

  • @_jsmth
    @_jsmth  12 років тому

    Thank you for the kind reply sir, over time we will bring out more animation techniques, but now we are trying to think of another series we can do. thanks... any ideas?

  • @_jsmth
    @_jsmth  12 років тому

    No problem dude. I will be uploading a couple more tutorials tonight or tomorrow, about how to Send and collect data using jQuery and PHP for instant form checking and posting! (2 parts) I hope you enjoy them!

  • @TimCooley
    @TimCooley 12 років тому

    Thank yo ufor this response I was messing around with this for about an hour. I made sure everything was correct and once I changed the "i" ti an "I" it worked perfectly! Thanks for finding this!!!!

  • @sherrychen9646
    @sherrychen9646 11 років тому

    Thank you!! I was staring at the code for hours and couldn't figure out what was wrong until I see this :)

  • @_jsmth
    @_jsmth  12 років тому

    Okay what I find the most common problem is when people come to me about this is they write it like this.
    $(".slider#"+count).show(...)
    when for jQuery to pick the id as a separate element there need's to be a space so like:
    $(".slider #"+count).show(...)
    make sure you do that everywhere it is used in the setInterval I did make a note of it on the video and next time I will be sure to say something about it or zoom in better.
    Hope this helped!

  • @CustomClass7
    @CustomClass7 10 років тому +11

    For anyone having trouble with the rest of the slide show not running, check the "i" in setinterval. it should be "setInterval" with a capital I. and check the spaces there should be a space here: $(".slider #"+count). worked for me just now.

  • @_jsmth
    @_jsmth  12 років тому

    the download link in the description will lead you to the source code which works... compare it against yours see what you done wrong!

  • @bluecafe509
    @bluecafe509 12 років тому

    Never mind, I got it to work perfectly!! One of my problems was that I had the # symbol touching ".symbol." There should have been a space.
    Thanks for this. This is my first attempt at JQuery. I'm subscribed to the channel.

  • @_jsmth
    @_jsmth  12 років тому

    No problem :) this Wednesday you will see some more tutorials also :D look forward to them :)

  • @granaat90
    @granaat90 11 років тому

    I had the same issue as you guys, at first i had an incorrect url for the jquery js files and then i scanned my code and had written some mistakes. So i recommend to just check your code if there are some misspelled functions or mistakes!

  • @_jsmth
    @_jsmth  12 років тому

    Hey thanks for letting me know and no problem... It's just me making tutorials Joe Smith ^.^... stay tuned :p

  • @faisalasif5986
    @faisalasif5986 7 років тому

    Best way of teaching.. Thanks dear.. Love from Pakistan

  • @sarahmanandhar7291
    @sarahmanandhar7291 11 років тому

    Hi Tara, You should be using the single quoted comma instead of the doubles just like in the video.Here,try this instead.
    $(".slider #1").delay(5500).hide("slide",­{direction: 'left'},500);

  • @_jsmth
    @_jsmth  12 років тому

    NO problem man :) James Dowen is working on HTML tutorials for the beginners and I will be making more advanced ones like these :) so have any coding..jquery...php...html?? video requests?

  • @_jsmth
    @_jsmth  12 років тому

    Thanks for your support.
    - Joe

  • @_jsmth
    @_jsmth  12 років тому

    Haha no problem! Glad you enjoyed it.

  • @_jsmth
    @_jsmth  12 років тому

    haha! No problem man, I always find myself looking for small errors like that. Glad you found it by your self! Great work! :D

  • @adamjack1
    @adamjack1 12 років тому

    It was a little tough to accomplish with out example source code but I got there in the end. Hope the website is completed soon as it looks like it would be very useful but I can relate to being busy with studies.

  • @_jsmth
    @_jsmth  12 років тому

    Thank you I think you will be pleased to hear that Part 3 and 4 of this series is coming out, where we go over how to make a file uploader in PHP which uploads images to a folder, then we let PHP dynamicly collect the images uploaded to that folder and display them in our slider... no need for having to re-edit the code everytime... PHP can do it for us.

  • @_jsmth
    @_jsmth  12 років тому

    it looks like I am going to have to hold this one off for a bit, a lot of people want me to make simpler smaller tutorials before moving onto the big series's which i can kinda see their point too... sorry :)

  • @TheOlympians2S2K
    @TheOlympians2S2K 12 років тому

    Hey great tutorial, everything's well explained and easy to understand. Any chance of a video or info on how to add 'next' and 'previous' buttons, which allow the user to manually control the slider? Thanks.

  • @eadn07
    @eadn07 12 років тому

    Thank you! I had the same problem, but your comment saved me.
    Bless from Colombia.

  • @richardbarry2056
    @richardbarry2056 10 років тому +2

    My problem was 'setinterval', make sure it's 'setInterval' with a capital I. Thanks for the tutorial.

  • @SeNniN06
    @SeNniN06 10 років тому +10

    nothing was working for me, but I realized that the path provided on google website doesn't include "http:" in the url, so if nothing is working for you, just add http: in the url, and it should be fine.

    • @shubrotoshuvo867
      @shubrotoshuvo867 10 років тому

      You made my day man. How silly it is to overlook such silly mistakes XD . Thanks for that

    • @SeNniN06
      @SeNniN06 10 років тому

      Shubroto Debnath
      np, I know how frustrating these small things can be, glad I could help out. :]

    • @earthwormjj
      @earthwormjj 10 років тому

      Jesus,. thankyou mate,. cant believe I missed that :)

  • @DavidAshby1
    @DavidAshby1 10 років тому

    Nice tutorial. How would you alternate the direction for each image to slide out, e.g. 1st pic goes down, 2nd goes left 3rd goes up etc?

  • @AndreasSpartan
    @AndreasSpartan 8 років тому +1

    In beginning i wrote it wrong, actually i forget to type some characters :)
    It's works fine. Here you go, a code without any mistake :D
    function Slider(){
    $(".slider #1").show("fade", 500);
    $(".slider #1").delay(5500).hide("slide", {direction: 'left'},500);
    var sc = $(".slider img").size();
    var count = 2;
    setInterval(function(){
    $(".slider #"+count).show("slide", {direction: 'right'},500);
    $(".slider #"+count).delay(5500).hide("slide", {direction: 'left'},500);
    if (count == sc){
    count = 1;
    }else{
    count = count + 1;
    }
    },6500);
    }

  • @_jsmth
    @_jsmth  12 років тому

    Make sure the 'i' in interval is capitalized so instead of "setinterval" it is "setInterval"

  • @fuzailmohamed
    @fuzailmohamed 11 років тому

    Thank you for clearing my mind ... of messy codes ...

  • @Inverse_Sense
    @Inverse_Sense 12 років тому

    Thanks very much for the tut. I may try to tackle some of your other stuff too.

  • @dabellamy91
    @dabellamy91 12 років тому

    Thank you it works now! :) Great tutorials! Took me a very long time to grasp it haha.

  • @_jsmth
    @_jsmth  12 років тому

    Hopefully forums will be open on the website soon, I actually have no time I have to juggle, website and college and work all at once, hence no tutorials... once the site is completed I can get back to tutorials which source code and download's on the site and also forums to help all you guys out! :D

  • @SuperDannyboy911
    @SuperDannyboy911 10 років тому

    the site looks like it will never be back up but if you follow the tut carefully it does work !

  • @MahmoudElmahdi
    @MahmoudElmahdi 12 років тому

    Your tutorial i simple and clear, Thank you so much for your time to create this video. I just have a question if you please. Is that possible to add next/prev buttons or even bullets to this slider, and if its possible kindly feed me how ? Once again thanks a lot : )

  • @connerdassen7808
    @connerdassen7808 8 років тому +8

    I typed everything correct, but the first image doesn't fade in.

    • @fakejusername5193
      @fakejusername5193 8 років тому +1

      I had issus then I put space between .slider and #1 ,like this ..
      function Slider(){
      $(".slider #1").show("fade", 500);
      }

    • @crissoopaul
      @crissoopaul 8 років тому

      Still not working for me. I'm still stuck at the loder.gif

  • @_jsmth
    @_jsmth  12 років тому

    No problem man glad you liked it :D

  • @sonubisht6350
    @sonubisht6350 11 років тому

    Thanks Bro your tutorial is too much help full for the beginners .......
    I am happy............

  • @_jsmth
    @_jsmth  12 років тому

    not too sure? should work, but that sounds like it is a problem with directories and not the code. I always choose to code online and real-time just in another directory. as then I get the view which i know it will have online. I hope I help and thanks for watching my video.

  • @barabolak
    @barabolak 10 років тому +4

    if you're doing it now, then keep in mind google has changed the links a bit, and now they don't have "" so put it in your code manually, otherwise it won't work. Thanks for the tutorial!

  • @Aarmaxian
    @Aarmaxian 11 років тому

    Good tutorial but three things can make it even better. 1.Slow down 2. Zoom into the code. 3 Reduce the volume of the music. Any way thanks for the effort.

  • @my2004rx8
    @my2004rx8 9 років тому

    Thank you for this video. I have a question though, In the css we put display:none; and then show it with jquery. I tried to do the same with some text, but when I put display:none; for the text it never shows up.

  • @johnlouiscrutchfield5906
    @johnlouiscrutchfield5906 9 років тому

    Excellent videos.Clear and to the point.

  • @MohitManuja
    @MohitManuja 12 років тому

    in terms of ease how would you compare it with flash pro and as 3, i have heard jquery is a lot easier but as i was watching this tut i thought otherwise , whats your take ? also im gonna ask you a simple question if u can answer in a very simple language , the difference between javascript and jquery

  • @RangaTurk
    @RangaTurk 12 років тому

    Good to hear Joe!

  • @tirathmistry
    @tirathmistry 12 років тому

    Awesome tutorial of jquery slider
    Please keep updating us new animation trick of jquery slider
    Keep up Good work
    God Bless you :)

  • @AnakyUK
    @AnakyUK 9 років тому

    Thank you for this, worked out just fine. One Question though, how can I add another JQuery slider to my webpage?

  • @_jsmth
    @_jsmth  12 років тому

    I will help out as soon as I can I am very busy at the moment! But don't worry! I will be back soon.

  • @buddyroach
    @buddyroach 11 років тому

    you should make the shadow slide with each image for a more dynamic effect. in between images, the shadows just sits there being casted by nothing which kinds looks weird.

  • @_jsmth
    @_jsmth  12 років тому

    Alright dude... I have another jQuery one coming out today hopefully but I will keep that in mind dude!

  • @Jeansmicke666
    @Jeansmicke666 12 років тому

    Spent more than an hour figuring out whats wrong.. turns out i didint see the gap between .slider and #1 -.- Thanks for the great tutorial! It really helped me.
    Peace

  • @gyparakis
    @gyparakis 12 років тому

    hello i really love the video . but i would like to know with what technology did you make the intro and if gonne make a tutorial how to make such a intro too. because that intro is really cool . greedins from berlin

  • @fande789
    @fande789 12 років тому

    Thanks for this video it really helped me with sliders

  • @TheDistingueOne
    @TheDistingueOne 11 років тому

    I am not quite fluent with Web design, but I know a bit. It may be that you have to use a webkit. I wish I could tell you more man, but I don't have any idea. Just google webkits and slider transitions with fade in and fade outs. Joe can you shed some light on this?

  • @seanmaxa
    @seanmaxa 11 років тому

    Great video! with the exception of capitalizing the "I" in setInterval if you follow his code exactly you will have no problems.

  • @FGN60
    @FGN60 12 років тому

    Hello, thanks a lot for the tut. It works very fine. Just a question. what would I have to do when I want the first image to stay during fading in the second image and after a delay remove both images by fading in a third image? Would be great if you could assist. Background is, that I'm using 3 pairs of pictures. Pic1 will be shown for 5 secs, Pic2 has to overlay Pic1, then pic1 and pic2 will be replaced by pic3 which is shown for 5 sec. and pic 4 overlays pic 3, etc....

  • @yelvertondesign
    @yelvertondesign 12 років тому

    Awesome vid thanks. FYI for other if things aren't quite working. The src url of the google api now called snippet gives you the full script tag to past into your head. I had to add "h ttp:" at the start of the url to make it work.
    Also I didn't notice the capitalisation of the "I" on the setInterval. This caused it not to work after the first image.
    I would like to tweak this. How do I change it so that the second image slides in butted against the first so there is no gap between? Thanks!

  • @autopilot6942
    @autopilot6942 10 років тому

    very cool. it's working for me. Thanks mate.

  • @tankevens73
    @tankevens73 10 років тому

    this was great! I was able to get everything to work using the code editor net beans :) thanks for the video I hope you will keep them coming even though I have noticed that it seems this channel hasn't had any recent uploads for a while.....

  • @_jsmth
    @_jsmth  12 років тому

    Good point my friend, There's many ways for you guys to improve my scripts. I just leave that bit up to you :p, I believe it creates a better coder all together :p

  • @sensatron3000
    @sensatron3000 10 років тому +6

    This worked for me:
    function Slider(){
    $(".slider #1").fadeIn(500);
    $(".slider #2").delay(5500).fadeOut(500)

    • @sergiosalazar7231
      @sergiosalazar7231 10 років тому +3

      Here's the code working:
      function Slider() {
      $(".slider #1").fadeIn(500);
      $(".slider #1").delay(5500).hide("slide", { direciton: 'left' }, 500);
      }

  • @ridge_n
    @ridge_n 10 років тому

    Thank you so much, it worked. beautiful stuff.

  • @kevinloyola1851
    @kevinloyola1851 10 років тому

    i learn to much in this tutorial ..
    thank you :)

  • @ajayrajveerasamy1177
    @ajayrajveerasamy1177 10 років тому

    Hi, Could also please tell us how to have to buttons within the image or outside the image which will help you select the slide you want while the image loop is running

  • @sbeen434
    @sbeen434 12 років тому

    thanks alot! great video, i had a problem, and found that i forgot to make capital i in setInterval, works great now :D awesome tutorial!

  • @garyhorne7367
    @garyhorne7367 11 років тому

    great tutorial. If I include thi sin my website for my photos, will it be Ipad / Iphone compatible. Thanks

  • @_jsmth
    @_jsmth  12 років тому

    I was thinking another slider video tut which shows how to make forward and previous buttons :) then maybe another with a function which picks a random animation to use so that it is abit different each time :P

  • @_jsmth
    @_jsmth  12 років тому

    have you made sure you are doing onload="Slider();" within the body tag?

  • @MarcoRomero3d
    @MarcoRomero3d 12 років тому

    I just tried it on Firefox 16.0.1 and it works. What version are you using?

  • @kaushalsubba
    @kaushalsubba 12 років тому

    Good work, just a small suggestion .. please try to dim the background music or shut it completely down as it's too distracting, keep up the good work.

  • @venkataamareshiragavarapu900
    @venkataamareshiragavarapu900 9 років тому +1

    Hello....... thanks for this.... I have a doubt.... How can we remove the white space gap between 2 images? (i.e., they move as though they are connected end to end)??? Please explain fast.......
    Thanks

  • @lars_vs
    @lars_vs 8 років тому +1

    for the lazy people: I've used the nth-child() selector instead of naming every image with an ID. This way you don't have to label each image with an ID, and can just simply put images between images.
    function Slider() {
    $(".slider img:nth-child(1)").show("fade",500);
    $(".slider img:nth-child(1)").delay(5500).hide("slide",{direction:'left'},500);
    var sc = $(".slider img").size();
    var count = 2;
    setInterval(function(){
    $(".slider img:nth-child(" + count + ")").show("slide",{direction:'right'},500);
    $(".slider img:nth-child(" + count + ")").delay(5500).hide("slide",{direction:'left'},500);
    if(count == sc){
    count=1;
    }
    else
    {
    count=count +1;
    }
    },6500);
    }

  • @pmiedzik
    @pmiedzik 12 років тому

    You're a legend, sir!

  • @carlangeloangcana5372
    @carlangeloangcana5372 10 років тому

    What if I want the transition to be faded only? By the way, Thank you very much in this tutorial. It works fine.

  • @NaneTheArtist
    @NaneTheArtist 10 років тому +1

    If the pictures won't load: get rid of the onload="slider()" from . In the beginning of the script write:
    $(document).ready(
    function(){
    $(".slider #1").show("fade",1000); --Etc.--
    Also, check the "src" for the API and UI. If you copy it directly from Google you won't get the "http:" part of the code. If all else fails: open the file in Chrome > right click > Inspect element and it will check for errors.

  • @SitRepHD
    @SitRepHD 12 років тому

    best tutorials bro keep it up

  • @_jsmth
    @_jsmth  12 років тому

    sounds like a plan to me... okay next series will be creating a blog :P

  • @omeganova2002
    @omeganova2002 12 років тому

    Nr.1 Tutorial. Thx! Waiting for more :)

  • @JeffBlakeway
    @JeffBlakeway 11 років тому

    Thanks for the video. Really helpful!

    • @immyjackson
      @immyjackson 8 років тому

      can you please give me the file on my email please !!!!!!!

  • @benkoren1
    @benkoren1 12 років тому

    Great video, thanks for posting, I was wondering if you could say something about how to integrate JQuery with a Wordpress theme. Thanks!

  • @ruel1808
    @ruel1808 10 років тому

    it's really helpful bro.. but why i can't use setinterval in notepad++?

  • @_jsmth
    @_jsmth  12 років тому

    @amitkishoreda Thank you, and no problem :)

  • @milanstojanovic5547
    @milanstojanovic5547 10 років тому

    Thanks alot for thise tutorial, it works perfect for me

  • @pfeildesign8363
    @pfeildesign8363 8 років тому

    Hey, this thing is great, works perfect for me, thx ! I've just one question: Everytime a new slide appears everything underneath is kind of refitting to another height. It looks like the text underneath is reloading or stumbling, do you or anyone knows why?

  • @jacimcreynolds3416
    @jacimcreynolds3416 7 років тому

    This is an excellent tutorial! My first image fades in and slides left, but my second and third images never appear. Suggestions??

    • @jacimcreynolds3416
      @jacimcreynolds3416 7 років тому

      Thanks for all the comments below. I was able to fix my issue with different Google library scripts and the correct setInterval coding.

  • @thesouvikbose
    @thesouvikbose 10 років тому

    Excellent tutorial