同一页面上的多个画廊 - 前进的画廊

Multiple Galleries on Same Page - Advancing Galleries

本文关键字:一页      更新时间:2023-09-26

我正在使用特色框滑块在我的网站上创建几个画廊,但在同一页面上同时运行两个画廊时遇到了问题。

我在图库上有一个简单的"上一个"和"下一个"按钮的导航设置。但是当我单击下一个或上一个时,它将只操作一个画廊,而不是为它们各自的画廊操作。

如何解决此问题?

这是代码:

.JS

//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>

我假设我需要确定上一个或下一个应该控制哪个画廊,但我该怎么做?

注意:最后一个或第二个图库是可以向前或向后移动的图库。第一个库在单击下一个或上一个库时不执行任何操作。

请举例说明。

谢谢!

更新

试图向网站添加一个 iframe,看看我是否可以让画廊玩得很好,这完全破坏了画廊。

我不得不对图库代码进行更改:

//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>