Posts/rsshttp://www.wowgoldme.com/ Comment from gracehttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64376http://www.wowgoldme.com/posts/c64376:) Even the post is concise, loving it! Thank you again sweetness.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 07:58:25 +0000 Comment from Sean Gaffneyhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64377http://www.wowgoldme.com/posts/c64377Looks really similar to what we did on http://pocketyoursite.com, but yours is more elegantly coded. :) Mine is additionally ugly because I had to sync two "shows" and ended up just doubling up the code...Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 07:58:29 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64378http://www.wowgoldme.com/posts/c64378Impressive! I guess you could indeed use <code>eq(0)</code> instead of <code>:first-child</code> in most cases. (Depending on how many of these slideshows you would want on one page, and how youa€?d specify the different element sets on which to invoke the effect, <code>:first-child</code> and <code>eq(0)</code> could return different results.) Specifying <code>img</code> in <code>next()</code> is something I personally wouldna€?t do, since Ia€?d be using an unordered list containing <code>IMG</code> elements. Fade effects work on any HTML element, so therea€?s no problem there. Dropping the <code>img</code> in <code>next()</code> wouldna€?t just make your script smaller, it would increase its <strong>flexibility</strong> by accepting different markup scenarios.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 08:03:35 +0000 Comment from Steve Rydzhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64379http://www.wowgoldme.com/posts/c64379Great work Jonathan, however when Javascript is disabled you can only see one image. Would it not be better to perhaps set the images to overflow:auto so at least the user could scroll through the images if they didn't have Javascript?Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 08:04:44 +0000 Comment from Justen Dohertyhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64380http://www.wowgoldme.com/posts/c64380good job - i got the perfect use for this!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 08:13:36 +0000 Comment from Eugenio Grigolonhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64381http://www.wowgoldme.com/posts/c64381Wow, what a nice slideshow. This can help lots of people with no jQuery knowledge. No need to add anything else. Nice job.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 08:21:28 +0000 Comment from Andy Fordhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64382http://www.wowgoldme.com/posts/c64382I was prepared with a "why not use <a href="//www.malsup.com/jquery/cycle/lite/">Cycle lite</a>" comment, but then I saw how little code you used to pull this off. Very cool!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 08:27:43 +0000 Comment from Jakehttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64383http://www.wowgoldme.com/posts/c64383Sweet Jonathan. I love when code is nice and small. Will definitely check this out next time I need slideshow functionality. Thanks for sharing :)Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 08:28:09 +0000 Comment from Thomas Fuchshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64385http://www.wowgoldme.com/posts/c64385Hey Jonathan, nice to have met you in Amsterdam! If you rearrange the images to be in reverse-order, you can fade with basically just one line of code. For a cross-fade it's just necessary to fade out the overlaying object (you don't need to fade two elements at the same time). Here's my implementation with Prototype and scriptaculous, with <a href="//script.aculo.us/stuff/simplest_slideshow/">three lines of code</a>. :) <pre><code>setInterval(function(){ $$('.fadein img').last().fade({ duration: .3, afterFinish: function(e){ e.element.remove(); } }); }, 3000); </code></pre> By the way, I love the comment preview functionality on your site.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 09:11:21 +0000 Comment from Eli Dupuishttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64386http://www.wowgoldme.com/posts/c64386Sweet! I use Alsup's cycle all the time and it works great. but this takes the cake from a simplicity standpoint. Thanks!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 09:17:32 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64387http://www.wowgoldme.com/posts/c64387Jonathan, your code can easily be made into a jQuery plugin: <pre><code> $.fn.slideShow = function(timeOut) { var $elem = this; this.children(':gt(0)').hide(); setInterval(function() { $elem.children().eq(0).fadeOut().next().fadeIn().end().appendTo($elem); }, timeOut || 3000); }; $(function() { $('.fadein').slideShow(); });</code></pre> Now you can use something like this to invoke the slideshow on an element: <pre><code>$('.fadein').slideShow();</code></pre> As you can see, Ia€?ve added a <code>timeOut</code> parameter. The default value is <code>3000</code> (I just took this from your code) but this can easily be specified: <pre><code>$('.fadein').slideShow(300);</code></pre> <a href="//mathiasbynens.be/examples/slideshow">I uploaded an example of your script in this plugin format.</a>Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 09:29:49 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64388http://www.wowgoldme.com/posts/c64388I also did the changes I mentioned in <a href="/archives/javascript/simplest-jquery-slideshow#c64378">my first comment</a>, allowing for more flexibility in the markup. Herea€?s <a href="//mathiasbynens.be/examples/slideshow-ul">an example of your script cycling through an unordered list</a>.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 09:42:14 +0000 Comment from Thomas Fuchshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64389http://www.wowgoldme.com/posts/c64389I had a pretty big bug in my code, but have corrected it now (unfortunately, requires some extra hoops). Anyway, here it goes: <pre><code>setInterval(function(){ var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); }); if(visible.length&gt;1) visible.last().fade({ duration: .3 }); else imgs.last().appear({ duration: .3, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show'); } }); }, 3000);</code></pre> I personally don't like either the jQuery (too "magic", not readable) nor my code (too complicated). Will think about it and hopefully come up with something nicer. Thanks for the food for thought!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 09:45:27 +0000 Comment from Derek Pennycuffhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64390http://www.wowgoldme.com/posts/c64390If you ignore the opening and closing function call and don't bother to specify 'img' for next(), the minified version of this is exactly 140 characters. Any jQuery function that both does something useful and fits inside a single tweet is something to be proud of.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 09:59:06 +0000 Comment from Daniel Marinohttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64391http://www.wowgoldme.com/posts/c64391@Steve Rydz - I would think that you'd want to hide the other images, otherwise it could break the layout of the page (depending on how the images fall into place). Other way's I've seen this done (though not using Snook's methodology) is that in the HTML you only specify one image and use JS to append the other images to use in the slideshow. If the user has JS disabled, they only see the one, placeholder image. This is kind of the same, except that the JS isn't adding the other images... they're specified in the HTML.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 10:11:47 +0000 Comment from Jeffhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64392http://www.wowgoldme.com/posts/c64392Bravo snook! I'm really liking this! Is there some way to control how fast the image fades out? Would you do that by extending the interval time?Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 10:14:56 +0000 Comment from Adam Detrickhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64393http://www.wowgoldme.com/posts/c64393Thomas - I agree in a way regarding the jQuery syntax... The enthusiasm for code like this makes me anxious. Don't get me wrong, it's beautiful... It's just that I've had one to many experiences working with <em>really cool and terse</em> jQuery "sream of consciousness" style code. Also, I hate the misconception that this is just a few lines of code. It's a few lines of code plus the jQuery library. Readability and performance gains seem to be canceled out here in a way. It just upsets me when I imagine the complex web app that's written entirely like this because a developer gets too excited about how few lines of code something might take instead of making something understandable and scalable. With that said, this is a really cool post! I look forward to more, and I'm really loving the redesign here... Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 10:15:02 +0000 Comment from Jonathan Snookhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64394http://www.wowgoldme.com/posts/c64394@<a href="#c64392">Jeff</a>: to change the speed at which the fade occurs, you need to pass in a parameter to the fadeIn/fadeOut methods. <pre><code>$('.fadein :first-child').fadeOut(1000) .next('img').fadeIn(1000) </code></pre>Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 10:51:12 +0000 Comment from adam j. sontaghttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64395http://www.wowgoldme.com/posts/c64395"Too magic to understand" strikes me as a bizarre criticism of what is a relatively simple code snippet that a majority of jQuery developers could grok in a matter of seconds. Jon's example is clearly only a few lines of code, there is no "misconception" there. LOC is not calculated by adding up all the lines of code that are used in the library methods that you employ in the original function. There is a lot of energy invested on large jQuery sites on organising and structuring code (or at least there should be), so the idea that someone would write a "complex web app" as a random bunch of jQuery snippets seems like an unfounded fear. It does happen, but unsavvy developers writing crappy code is not a problem that is unique to jQuery or even JavaScript. I have frequently encountered this perception that jQuery is "too easy" from a lot of people who tend to conflate complexity with worthiness, and I just don't buy it. That the potential exists for something to be misused does not mean it should be eschewed altogether. I shudder at the thought of seeing this code written out with native DOM methods, and I shudder again at the thought that someone that would be preferable. Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 10:57:24 +0000 Comment from Jonathan Coombshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64396http://www.wowgoldme.com/posts/c64396I love the simple slideshow concept here. But I notice that all the images are the same size in the slideshow. Does anyone have an example of showing both landscape and portrait photos in the same slideshow with the portrait photos centered? All photos would be the same height, but of course the portrait photos would have a smaller width. Thanks!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 10:58:08 +0000 Comment from Steve Rydzhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64397http://www.wowgoldme.com/posts/c64397@Daniel Marino That is one way. Surely however the images must be relevant to the content and therefore should be accessible. Having them hidden or positioned absolutely on top of each other means that in the situation where JS isn't available the user cannot access the images at all except whichever one is on top. The only way I can see this being acceptable is if the images are there purely for decoration but then they wouldn't be in the content, they would be specified in the stylesheet.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 11:06:59 +0000 Comment from Graham Bradleyhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64398http://www.wowgoldme.com/posts/c64398I'm glad someone else pointed out that this "tiny" piece of code requires the entire jQuery library behind it. I know there's a judgement call to be made - when to stop writing custom code and use a library - but a novice doesn't know about that. I'm not arguing against jQuery or Jon's code - I just think that, in general, its a good idea to mention an alternative to using a framework, in case a reader only needs the functionality you're describing. Otherwise a novice is going to follow a Jon's article and end up using a sledgehammer to crack a walnut. @Adam Sontag <blockquote>"I shudder at the thought of seeing this code written out with native DOM methods, and I shudder again at the thought that someone that would be preferable.</blockquote> Writing a custom script to do the same isn't hard - I recently wrote something very similar for a client that comes in well under 1k <strong>un</strong>compressed. There are plenty of occasions where going native is preferable.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 13:15:21 +0000 Comment from Michael Eichelsd??rferhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64399http://www.wowgoldme.com/posts/c64399I have written a "fully-fledged" (e.g. chainable) jQuery plugin based on the ideas above. It can be called with timeout and speed parameter values. <pre><code> (function($){ $.fn.simplestSlideShow = function(settings){ var config = { 'timeOut': 3000, 'speed': 'normal' }; if (settings) $.extend(config, settings); this.each(function(){ var $elem = $(this); $elem.children(':gt(0)').hide(); setInterval(function(){ $elem.children().eq(0).fadeOut(config['speed']) .next().fadeIn(config['speed']) .end().appendTo($elem); }, config['timeOut']); }); return this; }; })(jQuery); </code></pre> You may use it like this: <pre><code> $(".fadein").simplestSlideShow({'timeOut': 5000, 'speed': 1000}); </code></pre> Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 13:35:38 +0000 Comment from Michael Eichelsd??rferhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64400http://www.wowgoldme.com/posts/c64400BTW: It's still less than 20 lines!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 13:43:01 +0000 Comment from Chris Sullinshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64401http://www.wowgoldme.com/posts/c64401Graceful degradation: When the slideshow is initialized, add a second class to <code>.fadein</code>, and reference the js-dependent css using that class. Also, might as well just get all direct children of <code>.fadein</code>. The simple slideshow is inconstent between <code>img</code> and <code>:first-child</code>, so that's basically a requirement anyway. While we're at it, why not store <code>$('.fadein')</code> via closure? <pre><code>.fadein-js &gt; * { position: absolute; top: 0; left: 0; }</pre></code> <pre><code>$(function(){ var fadein = $('.fadein').addClass('fadein-js'); fadein.children().slice(1).hide(); setInterval(function(){ fadein.children().eq(0).fadeOut() .next().fadeIn() .end().appendTo(fadein); }, 3000); });</code></pre> This would be incredibly easy to turn into a function to allow multiple slideshows on a page.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 14:10:03 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64402http://www.wowgoldme.com/posts/c64402Thanks Micha??l, I was about to update my a€?plugina€? example with that functionality (speed setting + chainability). I see you wrapped the code inside <code>this.each(function() { a€| }</code>, so <a href="//mathiasbynens.be/examples/slideshow-update">it works for several elements at the same time</a>. Awesome! I took the liberty of <a href="//github.com/mathiasbynens/Simplest-jQuery-Slideshow">adding this to GitHub</a>, so ita€?s easier to reference future improvements of the script. I hope thata€?s okay.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 14:26:28 +0000 Comment from Andrew Cornetthttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64403http://www.wowgoldme.com/posts/c64403Dude that is so clean. Two lines??? That's why you're the man, Snook! Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 15:47:30 +0000 Comment from Trevorhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64404http://www.wowgoldme.com/posts/c64404Mathias, How do you change the fadeIn, fadeOut animation with your code?Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 18:19:43 +0000 Comment from peterhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64405http://www.wowgoldme.com/posts/c64405I like the fact that you show us how to do it instead of just providing a plug in. Awesome tutorial.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 18:26:40 +0000 Comment from Jonathan Snookhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64406http://www.wowgoldme.com/posts/c64406@<a href="#c64397">Steve Rydz</a>: If you're looking for a non-JS alternative, I'd look at attaching a "with JS" class at runtime. With that said, when talking about accessibility, those with screenreaders and other assistive software usually browse with JavaScript on. Which still begs the question of how the interaction should work when there's no real interaction at play. What I'd recommend is having the images fade in/out but set visibility to hidden and display set to block (do not set it to none). Make sure the images have alt text. That should still allow screenreaders to access the content regardless of the animation.Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 18:41:05 +0000 Comment from Steve Rydzhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64407http://www.wowgoldme.com/posts/c64407I think you misunderstand me Jonathan. I mean more of a situation where someone is viewing the site without Javascript but not assistive technology. For example I used to work in an office and we had free reign on the web in quiet times but were not able to use JS, so in a situation like this I would only be able to see one image and not even have the option to scroll through the other images. This might work from a presentation point of view however if the images are in the content then surely they should be available without JS? This is more of a CSS thing than JS really. I hope you get what I mean?Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 18:50:11 +0000 Comment from Jonathan Snookhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64408http://www.wowgoldme.com/posts/c64408Right, I understand now. In which case, I'd do as mentioned in previous comments and as I mentioned in the first sentence of my comment: just add a class to the body or to the surrounding element via javascript and use that to set the absolute positioning. Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 18:52:26 +0000 Comment from Steve Rydzhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64409http://www.wowgoldme.com/posts/c64409Ah I get what you mean now. Sorry I was on a completely different wave length. You live and you learn ;-)Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 11 Dec 2009 19:20:04 +0000 Comment from Michael Eichelsd??rferhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64410http://www.wowgoldme.com/posts/c64410@MATHIAS BYNENS: Thanks for putting it on GitHub. Just one more thing: According to the <a href="//docs.jquery.com/Plugin">jQuery plugin guidelines</a> the name of the (plugin) file should be "jquery.simplestslideshow.js" (or "jquery.slideshow.js", but I prefer the first).Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 00:57:50 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64411http://www.wowgoldme.com/posts/c64411<blockquote>Mathias, How do you change the fadeIn, fadeOut animation with your code?</blockquote> Just to be clear: ita€?s not 'my code', I just wrapped <strong>Jonathana€?s code</strong> into a plugin with some enhancements from Michael. Credit to these fella's! To answer your question: sorry, thata€?s not what this script does. As Jonathan explained, this is just a simple slideshow where images cross-fade. If you want more fade effects, use a (heavier) plugin, like <a href="//malsup.com/jquery/cycle/">Cycle</a> or <a href="//malsup.com/jquery/cycle/lite/">Cycle Lite</a>. <blockquote>According to the jQuery plugin guidelines the name of the (plugin) file should be "jquery.simplestslideshow.js" (or "jquery.slideshow.js", but I prefer the first).</blockquote> Thanks for the tip, Michael, <a href="//github.com/mathiasbynens/Simplest-jQuery-Slideshow/commit/54301404d9c9de58c23140c4687c7b546d60a992">I renamed it</a>.Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 02:02:31 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64412http://www.wowgoldme.com/posts/c64412I love how, after some optimizations, the minified plugin version of this script is only 291 characters long.Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 02:49:30 +0000 Comment from Chrishttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64413http://www.wowgoldme.com/posts/c64413This is great! Thanks for explaining how it all comes together Jonathan. Is there anyway to make this work with the same class for multiple slideshows on the same page?Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 07:27:59 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64414http://www.wowgoldme.com/posts/c64414<a href="#c64413">Chris</a>: This would be very easy using <a href="//github.com/mathiasbynens/Simplest-jQuery-Slideshow">the plugin</a>. <a href="//mathiasbynens.be/examples/slideshow">Herea€?s an example of multiple slideshows (having the same class) in one page</a>.Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 07:34:14 +0000 Comment from Chrishttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64415http://www.wowgoldme.com/posts/c64415Thank you Mathias :DJonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 09:51:14 +0000 Comment from Christian Fleschhuthttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64416http://www.wowgoldme.com/posts/c64416Great post! Instead of cross-fading two images you can also just get the first one, hide it, append it to the end of the image stack and fade it in from there so that the (in this case white) page background wona€?t shine through. Like this: <a href="//jsbin.com/isegi">http://jsbin.com/isegi</a>Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 10:32:27 +0000 Comment from Charleshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64417http://www.wowgoldme.com/posts/c64417It is a very simple slideshow. Useful for some projects. I like the Christian Fleschlut solution. Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Dec 2009 12:49:09 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64418http://www.wowgoldme.com/posts/c64418Nice solution, Christian! Unfortunately your scripts starts off with the wrong image.Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 06:32:39 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64419http://www.wowgoldme.com/posts/c64419<a href="#c64416">Christian</a>: My latest comment was phrased incorrectly. Your example flashes the last image in the stack upon loading, then quickly switches to the first image. I found this to be pretty annoying. Also, note that Jonathana€?s demo doesna€?t have this tiny issue. This can be fixed through CSS (in combination with <a href="#c64406">a a€?with JSa€? class</a>), and by adding some tweaks to your code. Currently, you have the following: <pre><code>$(function() { $('.fadein :first-child').appendTo('.fadein'); setInterval(function() { $('.fadein :first-child').hide().appendTo('.fadein').fadeIn(2000); }, 4000); });</code></pre> Try this instead: <pre><code>$(function() { $('.fadein :first-child').appendTo('.fadein').show(); setInterval(function() { $('.fadein :first-child').hide().appendTo('.fadein').fadeIn(2000); }, 4000); });</code></pre> As you can see, <code>.show()</code> explicitly makes the first image visible. Combined with the a€?with JSa€? class, you can use CSS to hide all the images inside <code>.fadein</code> until the script makes them visible again: <pre><code> &lt;head&gt; &lt;!-- Other stuff herea€| --&gt; &lt;style&gt; .js .fadein img { display: none; } .js .fadein img:first-child { display: block; } &lt;/style&gt; &lt;script&gt; document.documentElement.className += 'js'; &lt;/script&gt; &lt;/head&gt; </code></pre> If you omit <code>.js .fadein img:first-child { display: block; }</code>, this will also cause a small a€?flasha€?, going from the background color of the page to the first image. This is better already a€“ at least ita€?s not a a€?flasha€? between two images. But by adding that line, <a href="//jsbin.com/azofe">we dona€?t get a flash at all</a> :)Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 07:40:45 +0000 Comment from Mathias Bynenshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64420http://www.wowgoldme.com/posts/c64420Whoops, that last link should be <a href="//jsbin.com/alada3">http://jsbin.com/alada3</a>. Jonathan, could you please edit my previous post and remove this one? Thanks!Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 07:47:39 +0000 Comment from "Cowboy" Ben Almanhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64422http://www.wowgoldme.com/posts/c64422Jonathan, I wrote a tiny plugin that does just this to help someone in the irc.freenode.net #jquery IRC channel earlier this year. What I did was very similar, except that it did allow stopping and restarting, as well as a "one-off" fade without any kind of loop. I'm not a big fan of setInterval, for reasons explained on <a href="//benalman.com/code/projects/jquery-dotimeout/examples/delay-poll/">this doTimeout example page</a>, so I've used setTimeout instead. The plugin code is available in the source of <a href="//benalman.com/code/test/js-jquery-fade-queue.html">the 'fadeQueue ' example page</a>. This is one of this little plugins that got totally lost in the shuffle.. thanks for reminding me of it!Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 19:31:23 +0000 Comment from Cesarhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64424http://www.wowgoldme.com/posts/c64424Amazing trick with such tiny amount of code, thanks for sharing.Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 22:46:09 +0000 Comment from Matthew Simmonshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64425http://www.wowgoldme.com/posts/c64425It's funny that you posted this. I've been looking for a plugin to do exactly this. I'm still in the beginning stages of learning jQuery so I couldn't do it myself. again, thanks!Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 22:58:54 +0000 Comment from Riohttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64426http://www.wowgoldme.com/posts/c64426I'm use this code with jquery tools slider. It seems conflict mixing with jquery tools because it only fade one time and then stop. What solution for this? Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Dec 2009 23:15:18 +0000 Comment from Babar O'Caphttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64427http://www.wowgoldme.com/posts/c64427Check out Slidedown. It Generates syntax-highlighted slides from Markdown. http://github.com/nakajima/slidedownJonathan Snook <jonathan@www.wowgoldme.com>Mon, 14 Dec 2009 00:49:37 +0000 Comment from Joe Kirksonhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64432http://www.wowgoldme.com/posts/c64432Good stuff Jonathan, you make it seem so effortlessly easy!Jonathan Snook <jonathan@www.wowgoldme.com>Mon, 14 Dec 2009 06:36:21 +0000 Comment from Riohttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64433http://www.wowgoldme.com/posts/c64433Forget my previous comment, I found the problem :] Your code is running smooth right now, It's a miracle!Jonathan Snook <jonathan@www.wowgoldme.com>Mon, 14 Dec 2009 15:49:45 +0000 Comment from Heyhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64434http://www.wowgoldme.com/posts/c64434WhatJonathan Snook <jonathan@www.wowgoldme.com>Mon, 14 Dec 2009 16:46:43 +0000 Comment from Ben Tortorahttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64435http://www.wowgoldme.com/posts/c64435You would not believe how much time I have spent looking for something like this to solve my problem. This should be the default setup for anyone looking for a photogallery solutionJonathan Snook <jonathan@www.wowgoldme.com>Mon, 14 Dec 2009 18:49:21 +0000 Comment from johanhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64439http://www.wowgoldme.com/posts/c64439For a port to mootools, would be great to have that...Jonathan Snook <jonathan@www.wowgoldme.com>Wed, 16 Dec 2009 09:50:56 +0000 Comment from natehttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64441http://www.wowgoldme.com/posts/c64441I was trying to make it work when each image is a link. Any suggestions? Thanks!Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 17 Dec 2009 14:19:48 +0000 Comment from Frankhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64443http://www.wowgoldme.com/posts/c64443Wow. That's what I call lightweight. Thank you!Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 20 Dec 2009 02:06:29 +0000 Comment from e-sushihttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c64444http://www.wowgoldme.com/posts/c64444Just an idea... I tend to do jquery stuff completely internal; meaning, I also handle all CSS stuff using jquery, making the modding of yet-another-file (the css file) void. I'm not sure if everyone will agree, but I am convinced that it strips some bytes from the main css and it only uses the jquery-needed css rules if the user has javascript enabled. You might want to try it... it downgrades more beautifull and surely is a bit more minimal when those robots come haunting your site for more search-engine food. Nice site btw. - and I sure like that "preview" while writing my comment. It simply rocks!Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 20 Dec 2009 18:18:47 +0000 Comment from Cara Micohttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c65641http://www.wowgoldme.com/posts/c65641Love this script, use it on my own site! Thanks, if only all code was this concise!Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 03 Feb 2011 12:21:59 +0000 Comment from Petehttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c65662http://www.wowgoldme.com/posts/c65662Anyone know how to add links to the images or the whole thing?? Its exactly what i'm looking for if it had that!!Jonathan Snook <jonathan@www.wowgoldme.com>Fri, 04 Feb 2011 07:51:23 +0000 Comment from Petehttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c65671http://www.wowgoldme.com/posts/c65671found a way to link the whole thing, not ideal but basically adding onclick to the surrounding div. If anyone has a cleaner way let me know: http://www.shore.co.uk/snow/snow-jackets/ladies-snow-jackets.htmlJonathan Snook <jonathan@www.wowgoldme.com>Fri, 04 Feb 2011 23:53:03 +0000 Comment from Danhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66425http://www.wowgoldme.com/posts/c66425It's quite easy to do. Just add a link around each image have the links fading back and forth instead of the images. The css would look something like this: <pre><code> .fadein a {display:block;} </pre></code> And the Javascript would look like this: <pre><code>$(function(){ $('.fadein a:gt(0)').hide(); setInterval(function(){ $('.fadein a:first-child').fadeOut() .next('a').fadeIn() .end().appendTo('.fadein');}, 3000); });</pre></code>Jonathan Snook <jonathan@www.wowgoldme.com>Mon, 07 Mar 2011 12:08:55 +0000 Comment from Cathttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66555http://www.wowgoldme.com/posts/c66555I am new to jquery and was wondering can anyone explain what the gt(0) in this line of code $('.fadein img:gt(0)').hide(); stands for? Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Mar 2011 11:22:44 +0000 Comment from anthonyhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66559http://www.wowgoldme.com/posts/c66559How to do this with img's of different sizes?Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 12 Mar 2011 15:28:58 +0000 Comment from Jonathan Snookhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66568http://www.wowgoldme.com/posts/c66568@Cat: it means 'greater than' zero. That means get every image except the first one and hide it. @Anthony: You can do all sorts of different sizes, you just need to make sure that you've reserved room for the largest image. If you wanted it to resize the space for each image, that's a little more complicated. You'd have to get the dimensions of the image and then resize the container around it.Jonathan Snook <jonathan@www.wowgoldme.com>Sun, 13 Mar 2011 14:30:06 +0000 Comment from Richardhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66602http://www.wowgoldme.com/posts/c66602Thanks for this although I'm having trouble with jquery 1.4.2 here: &lt;http://www.hakomimallorca.com/about-mallorca&gt; It seems to skip through the images once then stops at the final one instead of looping.Jonathan Snook <jonathan@www.wowgoldme.com>Tue, 15 Mar 2011 04:12:08 +0000 Comment from Richardhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66603http://www.wowgoldme.com/posts/c66603Please disregard my previous comment...thanksJonathan Snook <jonathan@www.wowgoldme.com>Tue, 15 Mar 2011 04:53:04 +0000 Comment from Sam Rogalhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66791http://www.wowgoldme.com/posts/c66791Sir, you are gentleman and a scholar. I've been wrestling with slideshows of one kind or another for the last six ours trying to meet a deadline for a client. Everything else was breaking the layout with the styles being dynamically applied or the use of static positioning. This was simple, clean, and elegant. Perfect. A million thanks to you. -Sam Jonathan Snook <jonathan@www.wowgoldme.com>Wed, 23 Mar 2011 17:16:00 +0000 Comment from anithahttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66799http://www.wowgoldme.com/posts/c66799I need to add a play/pause, forward and backward to this jquery. Could you please help me with this. Is it possible to do that? Can I use this code to my website. Is it legal?Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 24 Mar 2011 02:56:01 +0000 Comment from Danielhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66806http://www.wowgoldme.com/posts/c66806Hi! I've been looking for a slideshow like this, but, at the same tiem i've downloaded a lot of them, by the way this one is the most practic one, congrats!!!, i would like to ask you a thing, why all of them are constructed with PA Divs and not with simple Divs??? If you could answer me i'll be very grateful. THNKS!!!Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 24 Mar 2011 09:27:08 +0000 Comment from Jonathan Snookhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66811http://www.wowgoldme.com/posts/c66811@Daniel: What's a PA div and how does it differ from a simple div?Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 24 Mar 2011 14:33:15 +0000 Comment from Adham Dannawayhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66814http://www.wowgoldme.com/posts/c66814Nice one, very simple. Sometimes a whole library just isn't needed.Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 24 Mar 2011 18:36:49 +0000 Comment from Dodgem Riderhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c66899http://www.wowgoldme.com/posts/c66899Great solution. Was trying to work out the neatest way to advance the slides with a mouse click (instead of via "set Interval"). Similar to the query from Anitha (above). Any ideas on this would be appreciated. I now there are many other slideshows out there, but having the images in a single div with a class is potentially great for use with a CMS. Jonathan Snook <jonathan@www.wowgoldme.com>Mon, 28 Mar 2011 03:57:47 +0000 Comment from Geoffhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c67636http://www.wowgoldme.com/posts/c67636I think Daniel is trying to say AP div. Absolute positioned div. Thanks for the easy script.Jonathan Snook <jonathan@www.wowgoldme.com>Tue, 26 Apr 2011 15:25:22 +0000 Comment from smitahttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c67669http://www.wowgoldme.com/posts/c67669I am unable to see this slideshow when i add jquerymobile cssJonathan Snook <jonathan@www.wowgoldme.com>Thu, 28 Apr 2011 06:09:46 +0000 Comment from smitahttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c67670http://www.wowgoldme.com/posts/c67670Please help Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 28 Apr 2011 06:10:03 +0000 Comment from Muhammad Adnanhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c67866http://www.wowgoldme.com/posts/c67866thx for so simple &amp; easy slideshow script.......plz help me in tab switching and drop down menu......thx in advance.Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 05 May 2011 06:08:52 +0000 Comment from Robert Coxhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c67928http://www.wowgoldme.com/posts/c67928Just wanted to thank the creator for this simple slideshow, and for helping me learn how to make slideshows in general (web student for almost year and a half now).Jonathan Snook <jonathan@www.wowgoldme.com>Sat, 07 May 2011 17:26:42 +0000 Comment from Ianhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c67995http://www.wowgoldme.com/posts/c67995Hi, thanks for the code. If I wanted to add a pause to the slideshow, so when a user hovers on an image the show pauses and on mouseout the show resumes how would I go about doing this? I've tried adding onMouseOver and onMouseOut attributes but I'm not really a coder and haven't got very far! Jonathan Snook <jonathan@www.wowgoldme.com>Tue, 10 May 2011 03:33:54 +0000 Comment from Giselli M.http://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c68001http://www.wowgoldme.com/posts/c68001AMAZING! Thank you so much :)Jonathan Snook <jonathan@www.wowgoldme.com>Tue, 10 May 2011 08:21:43 +0000 Comment from Jesshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c68034http://www.wowgoldme.com/posts/c68034This is absolutely amazing, and exactly what I needed. I'm a newbie at js and jQuery, so please forgive the intro answer. Is there any way to randomize the order that the images are displayed in, while keeping the multiple slideshows on the same page? TIA!Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 12 May 2011 09:01:49 +0000 Comment from Jesshttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c68035http://www.wowgoldme.com/posts/c68035One more question - yes, I'm still a newbie. Is there any way to adjust the timing on the slideshows so that they look like they are daisy chaining - so a second slideshow on the page starts a few miliseconds later than the first? TIA!Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 12 May 2011 10:36:34 +0000 Comment from jcnapwhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c68135http://www.wowgoldme.com/posts/c68135I thought it would be easy to find a clean-coded fade slideshow... boy was I wrong. I'm a novice at programming to begin with but after hours of searching I was really feeling like an idiot. Thanks so much for this script!! Jonathan Snook <jonathan@www.wowgoldme.com>Wed, 18 May 2011 12:25:46 +0000 Comment from Sarahhttp://www.wowgoldme.com/archives/javascript/simplest-jquery-slideshow#c68171http://www.wowgoldme.com/posts/c68171Is there a way to randomize the images ??Jonathan Snook <jonathan@www.wowgoldme.com>Thu, 19 May 2011 19:45:15 +0000久久中文字幕免费高清,三级在线看中文字幕完整版,中文字幕偷乱视频在线