顯示圖片庫在iframe外彈出

我在這裏讀了一些線程，但是我還沒有找到一個好的圖庫項目解決方案。我在jQuery中沒有預期，所以請在這裏忍受我。我有代碼在iframe之外顯示一個圖像。但我的目標是添加左/右箭頭滾動瀏覽我的畫廊。顯示圖片庫在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] //增加左/右邊緣

也使彈出消失。

有沒有可能這樣做？

來源

2014-09-02 user3037484

您可能需要手動創建您的畫廊元素第一所以儘量

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

來源

2014-09-02 17:26:35 JFK

我用你的代碼。但現在，花哨盒停止彈出。那裏的回報如何？有沒有另一個jQuery可以做到這一點？我嘗試了Visuallight box和magnific pop，但兩者都不起作用。只有Fancybox是最接近的。首先感謝您的時間。 – user3037484 2014-09-02 17:55:14

這段代碼工作得很好http://jsfiddle.net/uj0zLco4/'return false'使默認行爲無效，因爲我們在'click'事件之後以編程方式發射fancybox。 – JFK 2014-09-02 18:42:07

對不起，我正在輸入消息。它適用於Firefox，IE，safari。但Chrome瀏覽器遇到問題會彈出。任何想法？如果我替換了'parent。$。fancybox（gallery，{'to'$ .fancybox（gallery，{'和Chrome可以彈出。 – user3037484 2014-09-02 18:48:32

這裏是一個的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。

來源

2014-09-02 18:47:23 user3037484

適用於我，至少在Chrome版本36.0.1985.143 m +（Windows） – JFK 2014-09-02 21:51:25

顯示圖片庫在iframe外彈出

回答

相關問題