iframe 외부에 갤러리 팝업 표시

Question

여기에 일부 스레드를 읽었지만 갤러리 항목에 대한 좋은 해결책을 찾지 못했습니다. 나는 jQuery에서 expery가 아니기 때문에 여기에 나와 함께하시기 바랍니다. iframe 외부에 하나의 이미지를 표시하는 코드가 있습니다. 하지만 내 목표는 왼쪽/오른쪽 화살표를 추가하여 내 갤러리를 스크롤하는 것입니다.

나는이 스크립트

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox').click(function (e) { 
      e.preventDefault(); 
      parent.$.fancybox({   
       type : "image", // force type of content to image 
       href: this.href, 
       title: this.title, 
       helpers: { 
        title: { type: 'inside' }, 
        overlay: { 
         opacity: 0.3 
        } // overlay 
        //, buttons: {} 
       } // helpers 
      }); // fancybox 
     }); // click 
    }); 
</script> 

내 HTML 코드를 가지고

<a rel="gallery" class="fancybox" href="images/01.jpg" title="aaasdasdasd"><img alt="" src="thumbnails/01.jpg"/></a> 
<a rel="gallery" class="fancybox" href="images/02.jpg" title="bbsdfsdfsdfdsf"><img alt="" src="thumbnails/02.jpg"/></a> 

FancyBox이 작품을 팝업입니다. 그러나 화살표를 추가하여 "갤러리 항목"을 스크롤하고 싶습니다. 나는 ('갤러리', '확인해') 바로 부모 위의 갤러리 코드를 .attr를 추가하는 시도 $ fancybox가 ({

는하지만 팝업 그냥 사라

openEffect 추가 :... '없음'을, closeEffect '없음' nextEffect '없음' prevEffect '없음' 패딩 : 0 마진 : [20, 60, 20, 60] 증가 // 왼쪽/오른쪽 여백

또한 팝업이 사라지게하십시오.

그렇게 할 수 있습니까?

Answer 1

먼저 이렇게 여기

var gallery = []; 
jQuery(document).ready(function ($) { 
    $(".fancybox").each(function (i) { 
     var item = { 
      href: this.href, 
      title: this.title 
     }; 
     gallery.push(item); 
     $(this).on("click", function() { 
      parent.$.fancybox(gallery, { 
       // API options 
       index: i, // starts gallery from clicked item 
       type: "image", // force type of content to image 
       helpers: { 
        title: { 
         type: 'inside' 
        } 
       } // helpers 
      }); // fancybox 
      return false; 
     }); // on 
    }); // each 
}); // ready 

Answer 2

이 FancyBox가 iframe을

<script type="text/javascript"> 

var gallery = []; 

jQuery(document).ready(function($) { 
    $(".fancybox").each(function(i) { 

      var item = { 
       href: this.href, 
       title: this.title 
      }; 
      gallery.push(item);  

      $(this).on("click", function() {  
      parent.$.fancybox(gallery, { 
       index: i, // starts gallery from clicked item 
       type: "image", // force type of content to image 
       helpers: { 
        title: { 
         type: 'inside' 
        }, 
        overlay: { 
         opacity: 0.3 
        } // overlay 
       } // helpers 
      }); // fancybox 
      return false; 
     }); // click 
    }); 
}); 
</script> 

외부 갤러리 이미지를 보여주는 HTML 코드는

처럼 코드입니다 시도 수동 갤러리 요소를 작성해야 할 수도 있습니다

<a rel="gallery" class="fancybox" href="images/01.jpg" title="test1"><img alt="" src="thumbnails/01.jpg"/></a> 
<a rel="gallery" class="fancybox" href="images/02.jpg" title="test2"><img alt="" src="thumbnails/02.jpg"/></a> 

IE, Firefox, Safari에서는 작동하지만 Chrome에서는 작동하지 않습니다.