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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -