Использование jQuery для вкладок и скользящей галереи изображений (просто прокрутка) - PullRequest
Новая
       12

Использование jQuery для вкладок и скользящей галереи изображений (просто прокрутка)

2 голосов
/ 14 октября 2011

Я создаю веб-сайт для яхты, где на странице яхты показывается изображение яхты вместе с другими фотографиями, которые отображаются на главном изображении при нажатии.

Также на ней есть вкладки, чтобы пользователь мог видеть некоторые из них.виртуальные прогулки по яхте, не покидая страницы (это похоже на вторую галерею изображений).

Моя проблема в том, что когда я использую вкладки 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/

Буду очень признателен, если кто-нибудь сможет помочь.

Спасибо!

1 Ответ

1 голос
/ 18 октября 2011

Проблема в ширине вашего # scroller2.

Я не знаю этот плагин, но я предполагаю, что он добавляет ширину всех <li> (здесь 136px), чтобы установить ширину<ul>.

Для вашей первой вкладки ширина хороша: 8 thumb * 136 px = 1088px.

Для вашей второй вкладки ширина установлена ​​в 0px, поэтому она можетне работает.

Я бы сказал, что просто прокрутка пытается извлечь внешнюю ширину <li>, которая не работает, тогда они скрыты.

Так что, возможно, попробуйте скрыть вкладки ПОСЛЕ вызова простой прокрутки.

т.е.:

move 

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

В начало вашего сценария.

Однако лучший способ исправить это - отредактироватьплагин.

...