同一頁上的多個畫廊 - 前進畫廊

我使用Featured Box Slider在我的網站上創建了幾個畫廊，但在同一頁面上同時運行兩個畫廊時遇到了問題。同一頁上的多個畫廊 - 前進畫廊

我有一個簡單的上一個和下一個按鈕的畫廊上的導航設置。但是，當我點擊下一個或上一個時，它將只操作一個畫廊，而不是爲他們各自的畫廊進行操作。

如何解決此問題？

下面是代碼：

//Gallery 1 

jQuery(document).ready(function($j) { 
gallery = $j("#transformed-aviation-gallery").featuredbox({ 
     width: 940, 
     height: 400, 
     slidesAnimation: "slide-left", 
     startPositionOffsetX: 0, 
     startPositionOffsetY: 0, 
     slidesSpeed: "slow", 
     hParts: 1, 
     vParts: 6, 
     blocksWaitInterval: 50, 
     descriptionAnimation: "fade", 
     descriptionSpeed: "slow", 
     rotateInterval: 0, 
     slidesReverseAnimation: false, 
     slidesPattern: "random", 
     previous: ".next", 
     useFadeIn: true, 
     pauseOnMouseHover: true 
     });    
}); 

//Gallery 2 
jQuery(document).ready(function($j) { 
gallery = $j("#changed-aviation-gallery").featuredbox({ 
     width: 940, 
     height: 400, 
     slidesAnimation: "slide-left", 
     startPositionOffsetX: 0, 
     startPositionOffsetY: 0, 
     slidesSpeed: "slow", 
     hParts: 1, 
     vParts: 6, 
     blocksWaitInterval: 50, 
     descriptionAnimation: "fade", 
     descriptionSpeed: "slow", 
     rotateInterval: 0, 
     slidesReverseAnimation: false, 
     slidesPattern: "random", 
     previous: ".next", 
     useFadeIn: true, 
     pauseOnMouseHover: true 
     });    
});

HTML

<div id="transformed-aviation"> 
    <div class="box-wrap"> 
    <div class="border"> 
    <div class="featuredbox-wrapper" id="transformed-aviation-gallery"> 
     <!-- Gallery Images --> 
</div> 
</div> 
<div class="small img-center"> 
<a href="javascript: gallery.prev();">Previous</a> 
| 
<a href="#" id="back1" class="back">Back</a> 
| 
<a href="javascript: gallery.next();">Next</a> 
</div> 
</div> 

<div id="changed-aviation"> 
    <div class="box-wrap"> 
    <div class="border"> 
    <div class="featuredbox-wrapper" id="changed-aviation-galleryy"> 
     <!-- Gallery Images --> 
</div> 
</div> 
<div class="small img-center"> 
<a href="javascript: gallery.prev();">Previous</a> 
| 
<a href="#" id="back2" class="back">Back</a> 
| 
<a href="javascript: gallery.next();">Next</a> 
</div> 
</div>

我想我需要確定畫廊以前或N分機應該是控制，但我該怎麼做？

注：最後或第二個畫廊是可以向前或向後移動的畫廊。點擊下一個或上一個時，第一個圖庫不會執行任何操作。

請提供示例。

謝謝！

UPDATE

我試圖一個iframe添加到網站，看看如果我能得到的畫廊發揮好並徹底打破了畫廊。

來源

2012-08-16 L84

我不得不做出改變，以畫廊代碼：

//Gallery 1 

jQuery(document).ready(function($j) { 
gallery1 = $j("#transformed-aviation-gallery").featuredbox({ //I added a 1 to gallery 
     //gallery code 
     });    
}); 

//Gallery 2 
jQuery(document).ready(function($j) { 
gallery2 = $j("#changed-aviation-gallery").featuredbox({ //I added a 2 to gallery 
     //gallery code 
     });    
});

然後我不得不改變以正確的庫相關聯的鏈接：

<!-- For Gallery 1 --> 
<div class="small img-center"> 
<a href="javascript: gallery1.prev();">Previous</a> 
| 
<a href="javascript: gallery1.next();">Next</a> 


<!-- For Gallery 2 --> 
<div class="small img-center"> 
<a href="javascript: gallery2.prev();">Previous</a> 
| 
<a href="javascript: gallery2.next();">Next</a>

來源

2012-08-16 16:10:43 L84

同一頁上的多個畫廊 - 前進畫廊

回答

相關問題