在Tabs和滑动图像库( jQuery )中使用simplyScroll
在Tabs和滑动图像库( jQuery )中使用simplyScroll
提问于 2011-10-14 15:13:55
我正在建设一个游艇网站，在游艇页面上，它显示游艇的图像和更多的照片，上面显示的主要图片，当点击。
此外，它还有选项卡，这样用户就可以在不离开页面的情况下看到游艇的一些虚拟游览(就像第二个图片库)。
我的问题是，当我使用jQuery选项卡时，第二个选项卡有第二个图库(虚拟旅游)，不能显示图像，滚动器也不能工作。查看我看到的代码，它与($j(".tab_content").hide();) jQuery .hide函数有关，但如果我将其注释掉，它将显示所有选项卡。
以下是jQuery代码：
<script type="text/javascript">
// Initialize the plugin with no custom options
var $j = jQuery.noConflict();
$j(document).ready(function() {
//Default Action
$j(".tab_content").hide(); //Hide all content
$j("ul.tabs li:first").addClass("active").show(); //Activate first tab
$j(".tab_content:first").show(); //Show first tab content
//On Click Event
$j("ul.tabs li").click(function() {
$j("ul.tabs li").removeClass("active"); //Remove any "active" class
$j(this).addClass("active"); //Add "active" class to selected tab
$j(".tab_content").hide(); //Hide all tab content
var activeTab = $j(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$j(activeTab).fadeIn(); //Fade in the active content
return false;
});
$j("#scroller").simplyScroll({
speed: 25
});
$j("#scroller2").simplyScroll({
speed: 25
});
});
$j('.project').live('click',function(){
newImg = $j(this).attr('rel');
$j('img.projectImg').attr('src', newImg);
hideLoading();
});
$j('.vrtour').live('click',function(){
newSwf = $j(this).attr('rel');
var newObjElement = '<object style="width:681px;height:511px;"><param name="movie" value="'+newSwf+'"><embed src="'+newSwf+'" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="681" height="511"></object>';
$j('#Swf').html(newObjElement);
hideLoading();
});
</script>下面是HTML：
<ul class="tabs">
<li><a href="#tab1">PHOTOS</a></li>
<li><a href="#tab2">VIRTUAL TOUR</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="photosItem">
<!-- Item Image -->
<div class="itemImageBlock" id="imageBox">
<span class="itemImage">
<img src="184b7cb84d7b456c96a0bdfbbeaa5f14_L.jpg" alt=" Posillipo 80 1997" style="width:681px; height:511px;" class="projectImg" />
</span>
</div>
<div class="clr"></div>
</div>
<!-- Item image gallery -->
<a name="itemImageGalleryAnchor" id="itemImageGalleryAnchor"></a>
<div class="itemImageGallery">
<div id="gallery">
<ul id="scroller">
<li><img rel="IMG_3104.jpg" src="jwsigpro_cache_8d00638fe2img_3104.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3109.jpg" src="jwsigpro_cache_8d00638fe2img_3109.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3133.jpg" src="jwsigpro_cache_8d00638fe2img_3133.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3136.jpg" src="jwsigpro_cache_8d00638fe2img_3136.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3156.jpg" src="jwsigpro_cache_8d00638fe2img_3156.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3159.jpg" src="jwsigpro_cache_8d00638fe2img_3159.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3164.jpg" src="jwsigpro_cache_8d00638fe2img_3164.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
<li><img rel="IMG_3169.jpg" src="jwsigpro_cache_8d00638fe2img_3169.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
</ul>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab_content">
<div id="photosItem">
<div class="itemImageBlock" id="imageBox">
<span class="itemImage">
<div id="Swf">
<object width="681" height="511">
<param name="movie" value="Ferretti_165_main_saloon.swf">
<embed type="application/x-shockwave-flash" src="Ferretti_165_main_saloon.swf" width="681" height="511" class="projectSwf"></embed>
</object>
</div>
</span>
</div>
<div class="clr"></div>
<div class="itemImageGallery">
<div id="gallery">
<ul id="scroller2">
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="example.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="example.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
<li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
</ul>
</div>
</div>
</div>
</div>这是演示页面，如果你想现场观看的话：
http://www.cre8.gr/test/
如果有人能帮忙，我会非常感激的。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-10-18 13:18:27
问题在于你的#滚动器2的宽度。
我不知道这个插件，但我的猜测是它增加了所有<li>的宽度(这里是136 is )来设置<ul>的宽度。
对于第一个选项卡，宽度很好:8拇指* 136 px =1088 px。
对于第二个选项卡，宽度设置为0px，因此无法工作。
我想说的是，Simply涡旋试图获取<li>的外部宽度，但是失败了，然后它们就被隐藏了。
因此，在调用simply涡旋之后，可以尝试隐藏这些选项卡。
ie：
移动
$j("#scroller2").simplyScroll({
speed: 25
});你剧本的开头。
然而，最好的解决方法是编辑插件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7769726
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号