Fancybox2 캡션을 사용하는 클릭 가능한 이미지

Question

Fancybox2에서 웹 사이트를 클릭 할 수있는 이미지를 만들고 싶습니다. 이 예제에서 복사 한 코드는 다음과 같습니다. http://jsfiddle.net/w6p49/

제목 대신 자막을 사용한다는 점만 제외하면 정확히 작동합니다. 여기에서 코드를 복사 : http://jsfiddle.net/vkDcG/

내 코드 자막이 표시되지 않는 것을 제외하고

//Launch website URLS 
$("#client-url").click(function() { 
    $.fancybox.open([ 
      { 
       href: 'http://xyz.com/images/portfolio/brand/client3/01.jpg', 
       link: 'http://www.clientwebsite.com' 
      }, 
      { 
       href: 'http://xyz.com/images/portfolio/brand/client3/02.jpg', 
       link: 'http://www.clientwebsite.com' 
      }, 
      { 
       href: 'http://xyz.com/images/portfolio/brand/client3/03.jpg', 
       link: 'http://www.clientwebsite.com' 
      }, 
      { 
       href: 'http://xyz.com/images/portfolio/brand/client3/04.jpg', 
       link: 'http://www.clientwebsite.com' 
      }, 
     ], 
     { 
      beforeShow: function() { 
       $(".fancybox-image").wrap('<a a target="_blank" href="' + this.link + '" />') 
      }, 
      /*Use caption attribute instead of title*/ 
      beforeLoad: function() { 
       this.title = $(this.element).attr('caption'); 
      }, 
      /*Fade image transition instead of default "elastic"*/ 
      openEffect: 'fade', 
      closeEffect: 'fade', 
      nextEffect: 'fade', 
      prevEffect: 'fade', 
      /*Hide the prev button on the first image, and the next button on the last one.*/ 
      loop: false 
     }); 
    return false; 
}); 

모든 것이 잘 작동합니다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

가를 가져옵니다 같은

<a id="client-url" caption="This caption will appear in all images of the gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 

을 html로 데

$(document).ready(function() { 
    $("#client-url").click(function() { 
     var caption = $(this).attr("caption"); 
     $.fancybox.open([ 
      { 
      href: 'http://fancyapps.com/fancybox/demo/1_b.jpg', 
      title: 'this image links to bbc news', 
      link: 'http://www.bbc.co.uk/news/'}, 
     { 
      href: 'http://fancyapps.com/fancybox/demo/2_b.jpg', 
      title: 'this image links to jquery', 
      link: 'http://jquery.com'}, 
     { 
      href: 'http://fancyapps.com/fancybox/demo/3_b.jpg', 
      title: 'this image links to fancybox', 
      link: 'http://fancyapps.com'} 
     ], { 
      beforeShow: function() { 
       $(".fancybox-image").wrap('<a href="' + this.link + '" />'); 
       this.title = caption; 
      }, 
      padding: 38, 
      nextEffect: 'fade', 
      prevEffect: 'fade' 
     }); 
     return false; 
    }); 
}); // ready 

DEMO :

var caption = $(this).attr("caption"); 

같은 click 이벤트 이후의 축소판 링크에서 10는

this.title = caption; 

전체 코드처럼 beforeShow 콜백 내에서 그 변수를 사용하여 title 설정

Answer 2

링크 끝에 ,이 추가로 있습니다. 다음과 같이해야한다

$.fancybox.open([ 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/01.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/02.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/03.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/04.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, // See here 
], 

:

$.fancybox.open([ 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/01.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/02.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/03.jpg', 
     link: 'http://www.clientwebsite.com' 
    }, 
    { 
     href: 'http://xyz.com/images/portfolio/brand/client3/04.jpg', 
     link: 'http://www.clientwebsite.com' 
    } // See here, no coma 
], 

또한 여기에 추가 a있다 :

<a a target="_blank" href="' + this.link + '" /> 
//Should be: 
<a target="_blank" href="' + this.link + '" />