同一页面上的多个画廊 - 前进的画廊
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>
相关文章:
- 如何获取不属于我项目的上一页的URL
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 如何在一页网站中使用PHP重定向到一个页面
- Javascript并不是显示在每一页上
- 如何在一页上显示多个Highcharts图表
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- 如何为AngularJS制作智能表中第一页和最后一页的跳过按钮
- Bootstrap一页导航Fluid网站最小化问题
- 返回上一页时,Javascript仍处于活动状态
- 将jsp重定向到servlet,然后重定向到下一页
- 如何在重定向到asp.net中单击按钮的下一页之前应用javascript警报
- 传递表单值并移动到另一页
- 如何获取数组详细信息另一页
- 警报中的window.location必须重定向到上一页
- 一页签出在Magento版本1.7.0.2中不起作用
- 获取/保留上一页's具有SmoothState的URL
- 简单的一页水平滚动
- 翻开一页'的javascript变量更改为提要
- 记住下一页的段塞