Using jQuery for Tabs and Sliding Image Gallery (simplyScroll)

Question

I'm building a yacht website where at the yacht page it shows the yacht's image along with more photos that are displayed ontop the main image when clicked.

Also it has tabs so the user can see some virtual tours of the yacht without leaving the page (It's like a second image gallery).

My problem is when I use jQuery tabs the second tab which has the second gallery (virtual tour) doesn't show the images and the scroller doesn't work. Looking the code I saw it has to do with jQuery .hide function ( $j(".tab_content").hide(); ) but if I comment it out it show all the tabs.

Here's the jQuery code:

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

And here's the 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>

And here's the demo page if you want to see it live:

http://www.cre8.gr/test/

I would greatly appreciate if anyone could help.

Thank you!

Answer 1

The problem is the width of your #scroller2.

I don't know this plugin, but my guess is that it adds the width of all <li> (here 136px) to set the width of the <ul> .

For your first tab, the width is good : 8 thumb * 136 px = 1088px.

For your second tab, the width is set at 0px, so it can't work.

I would say that simplyscroll tries to fetch the outerwidth of the <li> , which fails then they are hidden.

So maybe try to hide the tabs AFTER calling simplyscroll.

ie :

move

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

To the beginning of your script.

However, the best way to fix it would be to edit the plugin.