Fancybox for Images/Gallery - 위 내용을 추가하십시오

Fancybox v 2+를 사용하여 이미지/항목 위에 단순한 내용을 추가하고 싶습니다. 문제없이 아래 내용과 이미지/내용을 추가 할 수 있습니다.Fancybox for Images/Gallery - 위 내용을 추가하십시오

여기 내 바이올린입니다 : http://jsfiddle.net/9FE7Z/

코드 :

$(".fancybox").fancybox({ 
     openEffect : 'fade', 
     closeEffect : 'fade', 
     mouseWheel : true, 
     padding: 10, 
     closeBtn : false, 
     beforeShow: function() { 
      if (this.title) { 
      // New line 
      this.title += '<br />'; 

      // Add tweet button 
      this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> '; 

      // Add FaceBook like button 
      this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&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>'; 
      } 
     }, 
     afterShow: function(){ 
      // Render tweet button 
      twttr.widgets.load(); 

      var customContent = "<div class='customHTML'>My custom content</div>" 
      $('.fancybox-inner').append(customContent); 
      }, 
      helpers : { 
      title : { 
       type: 'inside' 
      } 
     } 

    });

은 기본적으로 내가 그것을 렌더링 할 때 customHTML DIV가 이미지 위에 싶어요. 이것을 어떻게 할 수 있습니까?

출처

2013-05-22 Keoki

사용 .prepend는() http://api.jquery.com/prepend/

$('.fancybox-inner').prepend(customContent);

출처

2013-05-22 22:06:21 Ben

감사를 참조 – Keoki

YW, 나는 당신의 mouseWheel에 대한 = "galleryName을"과 rel 필요가 있다고 생각합니다 (스크롤 마우스 휠은 전진/후진 이미지 갤러리의 원인) (원래 바이올린에서 누락) 작동합니다. 그러나 JFK의 해결책은 더 완벽 해 보인다 :) – Ben

그냥 재미를 위해 ... 당신과 함께 title의 위치를 전환 할 afterShow 콜백 내부의 .before() 방법을 사용할 수 content 같은 :

$(".fancybox").fancybox({ 
    // avoid unwanted flickering while changing the title to top 
    openEffect: "none", 
    nextEffect: "none", 
    prevEffect: "none", 
    helpers: { 
     title: { 
      type: 'inside' 
     } 
    }, 
    beforeShow: function() { 
     var customContent = "<div class='customHTML'>My custom content</div>"; 
     this.title = this.title ? this.title + customContent : customContent; 
    }, 
    afterShow: function() { 
     $(".fancybox-outer").before($(".fancybox-title")); 
    } 
});

또한 다음 CSS 선언이 필요할 수 있습니다.

.fancybox-title-inside-wrap { 
    padding-top: 0 !important; 
}

... title 위의 간격을 제거하십시오.

title 속성이 있거나없는 앵커에 대해서도 스크립트가 동일하게 작동합니다.

그 위의 내용을두고 있지만, 마우스 휠 기능을 나누기, jsfiddle

출처

2013-05-22 23:13:41 JFK

Fancybox for Images/Gallery - 위 내용을 추가하십시오

답변

관련 문제