同一页面上的多个画廊 - 推进画廊 [英] Multiple Galleries on Same Page - Advancing Galleries
问题描述
我正在使用精选框滑块在我的个人资料库上创建一对画廊但在同一页面上同时运行两个画廊时遇到问题。
我在图库上设置了一个简单的上一个和下一个按钮。但是，当我点击下一个或上一个时，它将只操作一个画廊，而不是为他们各自的画廊进行操作。
我该如何解决这个问题？
以下是代码：
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： 慢，
hParts：1，
vParts：6，
blocksWaitInterval：50，
descriptionAnimation：fade，
descriptionSpeed：slow，
rotateInterval：0，
slidesReverseAnimation：false，
slidesPattern：random，
之前：.next，
useFadeIn：true，
pauseOnMouseHover：true
}）;
}）;
//图库2
jQuery（document）.ready（function（$ j）{
gallery = $ j（＃changed-aviation-gallery）。 {
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，
上一个：.next，
useFadeIn：true，
pauseOnMouseHover：真
}）;
}）;
HTML
< div id =transformed-aviation>
< div class =box-wrap>
< div class =border>
< div class =featuredbox-wrapperid =transformed-aviation-gallery>
<！ - 图库图片 - >
< / div>
< / div>
< div class =small img-center>
< a href =javascript：gallery.prev（）;>上一个< / a>
|
< a href =＃id =back1class =back> Back< / a>
|
< a href =javascript：gallery.next（）;>下一步< / a>
< / div>
< / div>
< div id =changed-aviation>
< div class =box-wrap>
< div class =border>
< div class =featuredbox-wrapperid =changed-aviation-galleryy>
<！ - 图库图片 - >
< / div>
< / div>
< div class =small img-center>
< a href =javascript：gallery.prev（）;>上一个< / a>
|
< a href =＃id =back2class =back>返回< / a>
|
< a href =javascript：gallery.next（）;>下一步< / a>
< / div>
< / div>
我假设我需要确定上一个或下一个应该控制哪个图库，但我该如何这样做吗？
注意：最后或第二个画廊是可以向前或向后移动的画廊。点击下一个或上一个时，第一个图库不会执行任何操作。
请提供例子。
谢谢！
更新
我试图添加iframe的网站，看看我是否可以让画廊打好，并完全打破了画廊。
我必须更改图库代码：
// Gallery 1
jQuery（document）.ready（function（$ j）{
gallery1 = $ j（＃transformed-aviation- gallery））。featuredbox（{//我添加了1到图库
//图库代码
}）;
}）;
//图库2
jQuery（document）.ready（function（$ j）{
gallery2 = $ j（＃changed-aviation-gallery）。 {//我添加了2到图库
//图库代码
}）;
}）;
然后，我必须更改链接以关联正确的图库：
<！ - 对于图库1 - >
< div class =small img-center>
< a href =javascript：gallery1.prev（）;>上一个< / a>
|
< a href =javascript：gallery1.next（）;>下一步< / a>
<！ - 对于图库2 - >
< div class =small img-center>
< a href =javascript：gallery2.prev（）;>上一个< / a>
|
< a href =javascript：gallery2.next（）;>下一步< / a>
I am using the Featured Box Slider to create a couple galleries on my site but have run into an issue when running two galleries at the same time on the same page.
I have navigation setup on the gallery a simple Previous and Next button. But when I click next or previous it will operate only one gallery instead of operating for their respective gallery.
How do I fix this issue?
Here is the code:
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>
I assume I need to identify which gallery the previous or next is supposed to be controlling but how do I do that?
Note: The last or 2nd gallery is the one that can move forward or backwards. The first gallery doesn't do anything when clicking next or previous.
Please provide examples.
Thanks!
UPDATE
I attempted to add an iframe to the site to see if I could get the galleries to play nice and that completely broke the gallery.
I had to make a change to the gallery code:
//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
});
});
Then I had to change the links to associate with the correct gallery:
<!-- 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>
这篇关于同一页面上的多个画廊 - 推进画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
