그림 원본 바꾸기 (추가)

Question

내가하고 싶은 것은 이미지가 들어있는 div가 있고, 버튼/미니 사진을 누르면 이미지 소스가 1-2-3 등으로 바뀔 때마다 매번 1을 더합니다. 이것은 두 가지 방법으로 갈 필요가 있습니다 : 즉, 오른쪽 화살표 : 1.jpg 2.jpg 왼쪽 화살표 3.jpg 2.jpg 이제 스크립트에는 IF 문이 포함되어야합니다. 그러면 그림이 존재하지 않으면 버튼이 가시성이됩니다. 숨겨진; CSS로. IF 그림 소스와 같은 것 5.jpg + 1이 존재하지 않습니다. #mini img visibility : hidden; 현재 나는이 (jQuery)와 같지 않지만 비슷한 것을 사용할 수있는 아이디어가 있습니다. 이전에이 스크립트를 사용하여 호버 (hover)에서 이미지를 변경했는데,이를 클릭하여 변경할 수 있고 비슷한 것을 사용할 수 있습니다.

$(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; 
}); 
}); 
}) 

Answer 1

이미지가의 OnError 그렇게 간단하게 소스를

var currentImage;  
function loadImage(img,dir) { 
    currentImage = document.getElementById(img); 
    var currentNumber = parseInt(currentImage.src.split("gallery/")[1]); // get the 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> 

업데이트의 onclick 및 온로드 이미지를로드 교체 지원 정말 열심히되지 않습니다 : http://jsfiddle.net/mplungjan/8FB5z/2/