Как вы получаете данные изображения при щелчке каждого изображения галереи fancybox?

Question

Я создал галерею в fancybox.

Галерея генерирует в нее динамически загружаемый заголовок, и я пытаюсь найти URL-адрес изображения, которое нажата и получает скрытое входное значение внутри, в котором содержится URL-адрес для этой записи.

Вот мой код:

$('.front .fancybox').attr('rel', 'gallery').fancybox({ 
    afterLoad: function (current, previous) { 
      if (this.title) { 
      var src = $('#fancybox-img').attr('src'); 
      console.log(src); 

       var content = $('.front .fancybox').find('.perma_link').val(); 
       var textContent = $('.front .fancybox').find('.fancybox-title').text(); 
       var image = $('.front .fancybox').find('img').attr('src'); 
       var imageAlt = $('.front .fancybox').find('img').attr('alt'); 
       console.log(content); 
       console.log(image); 

       //this.title += '<div class="lookbook-holder">'+ content +'</div>'; 
       $('.fancybox-title').css({'top':'0px', 'bottom':'auto'}); 
       // Lets create a social items holder 
       this.title += '<div class="shared">'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-twitter"></a>'; 
         this.title += '<div class="panel">'; 
          this.title += '<div class="tweet"><a href="https://twitter.com/share" width="40" height="30" class="twitter-share-button" data-count="none" data-url="' + content + '">Tweet</a></div><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>'; 
         this.title += '</div>'; 
        this.title += '</div>'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-facebook"></a>'; 
         this.title += '<div class="panel">'; 
          this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + content + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>'; 
          this.title += '</div>'; 
        this.title += '</div>'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-google-plus"></a>'; 
         this.title += '<div class="panel">'; 
         this.title += '<div class="gplus"><g:plusone class="gplus" size="medium" annotation="none" href="' + content + '"></g:plusone><script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script></div>'; 
         this.title += '</div>'; 
        this.title += '</div>'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-tumblr"></a>'; 
         this.title += '<div class="panel">'; 
          this.title += '<a class="tumbl-button" href="http://www.tumblr.com/share/photo?source=' + encodeURIComponent(image) + '&caption=' + encodeURIComponent(textContent) + '&clickthru=' + encodeURIComponent(content) +'" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url("http://platform.tumblr.com/v1/share_4.png") top left no-repeat transparent;"></a>'; 
         this.title += '</div>'; 
        this.title += '</div>'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-pinterest"></a>'; 
         this.title += '<div class="panel">'; 
         this.title += '<a href="http://pinterest.com/pin/create/button/?url=' + content + '&media=' + image + '&description=' + imageAlt + '" class="pin-it-button" count-layout="none"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'; 
         this.title += '</div>'; 
        this.title += '</div>'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-reddit"></a>'; 
         this.title += '<div class="panel">'; 
         this.title += '<a class="reddit" href="http://www.reddit.com/submit" onclick="window.location = "http://www.reddit.com/submit?url="' + content + '"> <img src="http://www.reddit.com/static/spreddit5.gif" alt="submit to reddit" border="0" /> </a>'; 
         this.title += '</div>'; 
        this.title += '</div>'; 
        this.title += '<div class="item">'; 
        this.title += '<a class="icon-mail"></a>'; 
         this.title += '<div class="panel">'; 
         this.title += '<a class="mail" target="_blank" href="mailto:?subject=' + textContent + '&amp;body=' + textContent + '" title="Share by Email"><p class="icon-mail"></p></a>'; 
         this.title += '</div>'; 
        this.title += '</div>'; 


       //Lets close the share holder here 
       this.title += '</div>'; 

       // Start the request bar below 

        this.title += '<div class="request"><a href="#">request more information</a></div>'; 

      } 


     }, 
     afterShow: function() { 

      $('.fancybox-wrap .fancybox-title .shared .item').mouseenter(function() { 
       $(this).find('.panel').stop(true, true).animate({'top': '-5px'}, 200); 
      }).mouseleave(function() { 
       $(this).find('.panel').stop(true, true).animate({'top': '30px'}, 200); 
      }); 

     }, 
     helpers : { 
      title : { 
       type: 'outside' 
      } 
     }, 
    closeBtn : false, 
    aspectRatio : false, 
    fitToView : true, 
    autoCenter : true, 
    autoHeight : true, 
    autoWidth : true, 
    autoResize : true, 
    openEffect : 'fade', 
    openSpeed : 350, 
    openEasing : 'easeInOutQuart', 
    closeEffect : 'fade', 
    closeSpeed : 350, 
    closeEasing : 'easeInOutQuart', 
    nextEffect : 'fade',  // 'elastic', 'fade', 'drop' or 'none' 
    nextSpeed : 350, 
    nextEasing : 'easeInOutQuart', 
    preload  : 3,   // Number of gallery images to preload 
    mouseWheel : true, 
    overlay : { 
     closeClick : true,  // if true, fancyBox will be closed when user clicks on the overlay 
     css  : {'opacity': '1.0','backgroundColor': '#fdf6f0'}   // custom CSS properties 
    } 
}); 

** Вот отредактированный область **

HTML для каждого элемента FancyBox:

<article class="two-four front"> 
    <div class="portfolio"> 
    {images} 
    <a class="fancybox" href="{url}" title="{url_title}"> 
     <img class="{dimension} root" src="{url}" alt="{url_title}-image" /> 
     <input type="hidden" value="{url_title_path='ss13'}" class="perma_link" />   
    </a> 
    {/images} 
     </div> 
</article> 

В каждом элементе FancyBox есть изображение а затем есть скрытый ввод с URL-адресом. Все, что мне нужно сделать, это получить доступ к URL-адресу для каждого элемента с щелчком и изображения src, но все, что я получаю, - это первое изображение в коллекции, независимо от того, на что я нажимаю.

Любая помощь будет больше на этом

Answer 1

Если вы хотите получить доступ к URL, образ-х src и скрытый input каждого щелкнули элемента, то вам нужно использовать $(this.element) в FancyBox обратного вызова (можно скорее использовать beforeShow вместо afterLoad) так:

$(".fancybox").attr('rel', 'gallery').fancybox({ 
    beforeShow: function() { 
     if (this.title) { 
      var src = this.href; // same as $('.fancybox-image').attr('src'); 
      var content = $(this.element).find('.perma_link').val(); 
      var textContent = this.title; // same as $(this.element).attr("title"); before you modify it using this.title += 
      var image = $(this.element).find('img').attr('src'); // this is the URL of the thumbnail 
      var imageAlt = $(this.element).find('img').attr('alt'); 

      // validate each returned value 
      console.log("src = " + src); 
      console.log("content = " + content); 
      console.log("textContent = " + textContent); 
      console.log("image = " + image); 
      console.log("imageAlt = " + imageAlt); 
     } 
    } 
}); 

См JSFIDDLE