Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think the cleanest thing you could do would be to extend jQuery to include the functionality you want:</p> <pre><code>//random images pulled off of Google Image Search src1 = "http://www.o3mobi.com/jquery.jpg"; src2 = "http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg"; $.fn.fadeToSrc = function(src, speedOut, speedIn, callback) { return this.fadeOut(speedOut, function() { $(this).attr('src', src).fadeIn(speedIn, callback); }); }; $("#image").click(function () { $(this).fadeToSrc(src2, 1000, 4000); }); </code></pre> <p>You can test it here! <a href="http://jsfiddle.net/jPYyZ/" rel="nofollow noreferrer">http://jsfiddle.net/jPYyZ/</a></p> <p>====== Update =======</p> <p>If you want to do a mouseover thumbnail/preview system, this is all it takes: </p> <pre><code>//HTML &lt;img class="thumbnail" src="http://www.o3mobi.com/jquery.jpg"&gt; &lt;img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg"&gt; &lt;img id="fullsized"&gt; //CSS ​.thumbnail { width: 5em; height: 5em; } #fullsized { width: 10em; height: 10em; border: 2px solid red; }​ //JAVASCRIPT $.fn.fadeToSrc = function(src, speedOut, speedIn, callback) { return this.fadeOut(speedOut, function() { $(this).attr('src', src).fadeIn(speedIn, callback); }); }; $(".thumbnail").mouseover(function () { var newsrc = $(this).attr("src"); $("#fullsized").fadeToSrc(newsrc, 1000, 1000); }); </code></pre> <p>​You can test/tinker around with this one here: <a href="http://jsfiddle.net/AhwH7/" rel="nofollow noreferrer">http://jsfiddle.net/AhwH7/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload