javascript - Replace Picture Source (Adding) -
what wish have div containing image, when button/mini picture pressed image's source change 1-2 2-3, etc adding 1 each time. needs go both ways: i.e right arrow: 1.jpg 2.jpg left arrow 3.jpg 2.jpg script needs include if statement if picture doesn't exist button visibility: hidden; in css. if picture source 5.jpg + 1 doesn't exist #mini img visibility: hidden; had idea use not same similar (jquery). used script change image on hover, figure change onclick , use similar.
$(function() { $('#buttons #right img').each(function() { var originalsrc = this.src, hoversrc = originalsrc.replace(/\.(gif|png|jpe?g)$/, '_over.$1'); image = new image(); image.src = hoversrc; $(this).hover(function() { image.onload = function() { } this.src = hoversrc; }, function() { this.src = originalsrc; }); }); })
it not hard
the image supports onerror load image onclick , onload replace source
var currentimage; function loadimage(img,dir) { currentimage = document.getelementbyid(img); var currentnumber = parseint(currentimage.src.split("gallery/")[1]); // number var newnumber = currentnumber + (dir===1)?1:-1; var testimage = new image(); testimage.onload=function() { currentimage.src=this.src; currentimage.style.visibility='visible' } testimage.onerror=function() { currentimage.style.visibility='hidden' } testimage.src="gallery/"+newnumber+".jpg"; return false; } <img id="image1" src="gallery/1.jpg" /> <a href="#" onclick="return loadimage('image1',-1)" title="prev"><img src="prev.gif" border="0" /></a> <a href="#" onclick="return loadimage('image1',1)" title="next"><img src="next.gif" border="0" /></a>
update: jquery version: http://jsfiddle.net/mplungjan/8fb5z/2/
Comments
Post a Comment