2010-04-06 7 views
0

http://opiefoto.com/articles/photoslider의 아주 멋진 PhotoSlider 스크립트를 사용하여 내 고객 중 한 명을위한 슬라이드 쇼를 만듭니다.PhotoSlider 스크립트로 생성 된 img 링크에 HREF와 클래스를 연결 하시겠습니까?

이 스크립트는 큰 이미지를 클릭 할 수있는 이전의 직접 코딩 된 자바 스크립트 솔루션을 대체하여 클릭 한 그림의 전체 크기 버전을 보여주는 라이트 박스 모달 팝업을 제공합니다.

물론 클라이언트는이 기능이 그대로 유지되지만 PhotoSlider 스크립트 자체에서 큰 이미지의 HTML 코드가 즉각적으로 생성됩니다.

이 말은 클래스 ("라이트 박스")와 href (또는 클릭 이벤트 중 더 적합한 것)를 첨부하기 위해 스크립트를 약간 수정해야한다는 의미지만, 이것을 성취하십시오. 미리보기 이미지를 클릭 할 때마다 이벤트와 수업을 첨부해야한다고 생각하지만 이것이 최선의 방법이 아니라면 조언을 부탁드립니다.

클릭 또는 클래스없이 here처럼 스크립트가 내 페이지에 구현됩니다. stackoverflowites가 제공 할 수있는 도움이 정말 감사 할 것입니다. 사전에

감사합니다!

답변

2

jquery live() 메서드를 살펴보면 현재 또는 미래에 존재하는 선택기에 이벤트를 첨부 할 수 있습니다. 효과적으로, 당신이합니다 (photoslider 사이트의 예를 기준)과 같이 수행 할 수 있습니다

$(document).ready(function() { 
    $('.photoslider_main img').live('click', function() { 
    $(this).showLightbox(); 
    }); 
}); 
+0

감사합니다. Greg! 나는 당신이 기꺼이 볼 수있는 경우에 이것으로 가지고있는 또 다른 문제점을 추가했습니다. –

+0

내가 사용하는 이유를 모르겠다. var src = $ (". photoslider_main img"). attr ("src"); 경고를 결과 변수 "src", 계속 "정의되지 않은"점점? 나는 * photoslider가 구조를 설정 한 후에 이것을 호출 할 것이므로 반드시 작동해야합니다. –

+0

document.ready() 내에서 작업하고 있습니까? 코드 흐름에 따라 (예 : photoslider를 호출 한 후) "후"인 경우 실제로 그 시점에서 완료되었음을 의미하지 않을 수 있습니다. 그 시점에서 이벤트 등을 기다리고있을 가능성이 있기 때문입니다. (javascript 및 jquery와 같은 라이브러리로 시작할 때 매우 일반적인 오류). console.log ($ ('. photoslider_main img'))를 실행하고 무엇을 얻을 수 있는지 확인하십시오. (방화 광명이 설치되어 있어야합니다.) – gregmac

1

썸네일을 클릭하고 새 이미지가 표시된 후에는 jQuery의 bind을 사용하여 click 이벤트를 새 이미지에 첨부 할 수 있습니다. 나중에 제거해야하는 경우 unbind을 사용할 수 있습니다.

1

스크립트가 HTML 코드 생성을 완료하고 사용자 취향에 맞게 수정 될 때까지 기다립니다. PhotoSlider가 HTML을 한 번 생성하므로 각 클릭에 대한 수정이 필요하지 않습니다.

0

여기에 변수 'SRC'결과 전체 코드의를 정의되지 않은되고 - 왜 확실하지 않다.

<div class="photoslider" id="default"></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    //change the 'baseURL' to reflect the host and or path to your images 
    FOTO.Slider.baseURL = ''; 

    //set images by filling our bucket directly 
    FOTO.Slider.bucket = { 
     'default': { 
      <% if imgs1 <> "" then %> 0: {'thumb': '<%=replace(imgs1,"pn.","tn.")%>', 'main': '<%=imgs1%>'}<% end if %><% if imgs2 <> "" then %>, 
      1: {'thumb': '<%=replace(imgs2,"pn.","tn.")%>', 'main': '<%=imgs2%>'}<% end if %><% if imgs3 <> "" then %>, 
      2: {'thumb': '<%=replace(imgs3,"pn.","tn.")%>', 'main': '<%=imgs3%>'}<% end if %><% if imgs4 <> "" then %>, 
      3: {'thumb': '<%=replace(imgs4,"pn.","tn.")%>', 'main': '<%=imgs4%>'}<% end if %><% if imgs5 <> "" then %>, 
      4: {'thumb': '<%=replace(imgs5,"pn.","tn.")%>', 'main': '<%=imgs5%>'}<% end if %> 
     } 
    }; 
    FOTO.Slider.reload('default'); 
    FOTO.Slider.preloadImages('default'); 
    FOTO.Slider.enableSlideshow('default'); 

    //or set our images by the bucket importer 
    //var ids = new Array(0,1,2,3); 
    //FOTO.Slider.importBucketFromIds('default',ids); 


    console.log($('.photoslider_main img')); 
    var src = $(".photoslider_main img").attr("src"); 
    $(".photoslider_main img").wrap($('<a/>').attr('href', 'waka').attr('class','lightbox')); 

    $('a.lightbox').lightBox(); 

// $('.photoslider_main img').live('click', function() { 
// $(this).showLightbox(); 
// }); 
}); 



</script> 
관련 문제