2013-02-20 2 views
1

나는 HTML 목록을 사용하여 jquery 사진 갤러리를 만들었습니다. 이전 및 다음 버튼에 문제가 있습니다. 로드 직후에 사진을 열면 제대로 작동합니다. 갤러리를 닫으면 다른 사진으로 이동하고 클릭하여 내 다음 변수 및 이전 변수를 열면 더 이상 제대로 작동하지 않는 경우 사진을 건너 뜁니다. 내가 뭘 하려는지 변수를 사용하고 jquery. 다음과 화살표에 대한 .previous입니다.jquery photogallery using list

정말 고마워요.

여기 http://jsbin.com/uvikug/11/edit

그것의 데모를 가지고 다음, 사진을 열고 이전 버튼에 대한 코드는 특별히이,하지만 당신은 그 링크에 그것을 모두 볼 수 있습니다 : 기본적으로

$(".photo").click(function() { 
    $("#loading_box_container").animate({ 
    height: "100%" 
    }, 300, function() { 
     $("#close").css({ 
     display: "block" 
     });   
    }); 

    id = $(this).attr('id'); 
    $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg'); 

    fadeIn('#' + id); 


    $("#next").click(function() { 
    if (!$('#' + id).hasClass("last")) { 
     $("#preload").fadeOut(500, function() { 
     var id_a = $('#' + id).next().attr('id'); 
     id = id_a; 

     $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id_a + '.jpg'); 

     fadeIn('#' + id_a); 
     }); 
    } 
    }); 

    $("#prev").click(function() { 
    if (!$('#' + id).hasClass("first")) { 
     $("#preload").fadeOut(500, function() { 
     var id_b = $('#' + id).prev().attr('id'); 
     id = id_b; 

     $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg'); 

     fadeIn('#' + id); 
     }); 
    } 
    }); 
}); 

답변

1

귀하의 코드가 전혀 나쁜 것은 아니며 단지 하나의 사소한 문제입니다. 누군가가 <li class="photo" />을 클릭 할 때마다 이벤트 처리기를 첨부하고 있습니다.

그냥 블록

$("#prev").click(function() {..

"$("#next").click(function() { ..." 모든 이러한 코드 블록 "$(".photo").click(function() { ... })" 중면을 넣어.

그리고 제대로 작동합니다.