使用jQuery标签和滑动图像库(simplyScroll)

Using jQuery for Tabs and Sliding Image Gallery (simplyScroll)

本文关键字:simplyScroll 图像 jQuery 标签 使用      更新时间:2023-09-26

我正在建立一个游艇网站,在游艇页面上显示游艇的图像以及点击主图像时显示的更多照片。

它也有标签,所以用户可以看到一些游艇的虚拟之旅,而不离开页面(它就像第二个图片库)。

我的问题是,当我使用jQuery选项卡的第二个选项卡有第二个画廊(虚拟之旅)不显示图像和滚动不起作用。查看代码,我看到它与jQuery .hide函数($j(".tab_content").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/

如果有人能帮忙,我将非常感激。

谢谢!

问题是你的#scroller2的宽度。

我不知道这个插件,但我的猜测是它添加了所有<li>的宽度(这里是136px)来设置<ul>的宽度。

对于你的第一个标签,宽度是好的:8拇指* 136 px = 1088px。

对于第二个选项卡,宽度设置为0px,所以它不能工作。

我想说,simplyscroll试图获取<li>的外宽度,这失败了,然后他们被隐藏。

所以也许试着隐藏标签后调用simplyscroll.

ie:

移动
$j("#scroller2").simplyScroll({
                speed: 25
            });

到你的脚本的开头。

但是,修复它的最好方法是编辑插件