0

私はstackoverflowの新人で、これが私の最初の投稿です。hidden()をshow()に変換して複数のオブジェクトで機能させようとしていますが、コンテンツスライダー(液体スライダー)で機能させることができません。 http://www.alfonsocarmelo.it/margherita/index10.html ウェブサイトをロードすると、スライダー(カメラスライダー)が表示される可能性がありますが、左下の「architettura」をクリックしてから「centroculturale-」をクリックするとExpo'Flussi di eVenti、Catania "は、液体スライダースクリプトを使用してコンテンツスライダー(画像とテキスト)を表示する必要があります。スクリプトは単独でも完璧に機能しますが、Webサイトには問題があります。狭く見えますが、完璧なビューはビューポートの100%の幅です。

HTML

<div id="architettura">
    <div class="content">
       <h4><span>A</span>rchitettura<span>/</span></h4>
       <img src="images/architettura/architettura.jpg">  
    </div>
 </div>

 <!-- architettura_centro_culturale_catania--> 
 <div id="architettura_centro_culturale_catania">
    <div class="content">
        <div class="liquid-slider"  id="slider-id">
                <div>
                  <h2 class="title">1</h2>

                   <div class="immagini">
                      <img src="images/pittura_02.jpg"> <!-- ELIMINAZIONE DIV E METTERE X OGNI FOTO align="left" width="60%" height="36%"-->
                      <img src="images/pittura_03.jpg">
                      <img src="images/pittura_04.jpg">
                   </div>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudindasdas</p>
                </div>
                <div>
                  <h2 class="title">2</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>          
                <div>
                  <h2 class="title">3</h2>
                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                </div>
                <div>
                  <h2 class="title">4</h2>
                  <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
        </div>
        <!-- Liquid Slider Ends Here -->


    </div> 
    <!-- end content -->
 </div>
 <!-- end architettura_centro_culturale_catania--> 

 <!-- architettura_centro_culturale_giarre--> 
 <div id="architettura_centro_culturale_giarre"></div>
 <!-- end centro culturale Giarre -->

 <div id="slideshow">
    <div class="content">
          <div class="fluid_container">

              <div class="camera_wrap camera_magenta_skin" id="camera_wrap_1">

                <div data-src="images/slides/prova3_modificata.jpg">

                    <div class="camera_caption fadeFromBottom">
                        pittura <span>/</span> LA RICCHEZZA INTERIORE
                    </div>

                </div>

                <div data-src="images/slides/prova4_modificata.jpg">
                    <div class="camera_caption fadeFromBottom">
                        architettura <span>/</span> MUSEO D&acute;ARTE CONTEMPORANEA E CENTRO POLIFUNZIONALE
                    </div>
                </div>



            </div> <!-- #camera_wrap_1 -->

          </div> <!-- .fluid_container  -->
    </div>
</div>


</section>

<footer>
 <nav>
    <ul id="fmenu">
        <li>
         <a href="#" id="idarchitettura"><span>a</span>rchitettura</a>
            <ul id="fmenu_architettura">
                <li id="centro_culturale_catania"><a href="#">centro culturale - Expo' Flussi di eVenti, Catania </a></li>
                <li id="centro_culturale_giarre"><a href="#">centro culturale, Giarre</a></li>
            </ul>  
        </li>
        <li>
         <a href="#" id="idpittura"><span>p</span>ittura</a>
            <ul id="fmenu_pittura">
                <li id="la_ricchezza_interiore"><a href="#">la ricchezza interiore</a></li>
                <li id="trattenuta_da_1_sentimento"><a href="#">trattenuta da un sentimento</a></li>
                <li id="il_bacio"><a href="#">il bacio</a></li>
                <li id="sguardo_ignoto"><a href="#">sguardo all&acute;Ignoto</a></li>
                <li id="kolorimmersi"><a href="#">kolorimmersi</a></li>    
                <li id="gli_amanti"><a href="#">gli Amanti</a></li>
                <li id="la_danzatrice"><a href="#">la danza(U)trice</a></li>
                <li id="lottare_senza_mani_senza_piedi"><a href="#">lottare senza mani e senza piedi</a></li>
                <li id="kolorinaere"><a href="#">kolorinaere</a></li>
            </ul>
        </li>
        <li>
         <a href="#" id="iddesign"><span>d</span>esign</a>
            <ul id="fmenu_design">
                <li id="borse_accessori"><a href="#">borse e accessori</a></li>
                <li id="monili"><a href="#">monili</a></li>
                <li id="oggetti_arredo"><a href="#">oggetti d&acute;arredo</a></li>
            </ul>   
        </li>
        <li id="pubblication"><a href="#"><span>p</span>ubblicazioni</a></li>
        <li id="profile"><a href="#"><span>p</span>rofilo</a></li>
    </ul>        
 </nav>
    </footer>

JQUERYコード

   $('#idarchitettura').click(function() { 

              $('#slideshow').hide();

              $('#architettura_centro_culturale_catania').hide();
              $('#architettura_centro_culturale_giarre').hide(); 
              $('#pittura').hide();
              $('#pittura_la_ricchezza_interiore').hide();  
              $('#pittura_trattenuta_da_1_sentimento').hide(); 
              $('#pittura_il_bacio').hide(); 
              $('#pittura_sguardo_ignoto').hide();  
              $('#pittura_kolorimmersi').hide(); 
              $('#pittura_gli_amanti').hide(); 
              $('#pittura_la_danzatrice').hide();
              $('#pittura_lottare_senza_mani_senza_piedi').hide();
              $('#pittura_kolorinaere').hide();
              $('#profilo').hide();
              $('#pubblicazioni').hide();
              $('#design').hide();
              $('#design_borse_accessori').hide();
              $('#design_monili').hide();
              $('#design_oggetti_arredo').hide();

              $('#architettura').fadeIn('slow');

              /*for menu'*/
              $('#fmenu_architettura').slideToggle();
              $('#fmenu_pittura').slideUp('fast');
              $('#fmenu_design').slideUp('fast');
        }); 

        $('#centro_culturale_catania').click(function() {

              $('#pubblicazioni').hide();
              $('#profilo').hide(); 
              $('#architettura').hide();
              $('#architettura_centro_culturale_giarre').hide(); 
              $('#pittura').hide(); 
              $('#pittura_la_ricchezza_interiore').hide(); 
              $('#pittura_trattenuta_da_1_sentimento').hide(); 
              $('#pittura_sguardo_ignoto').hide();
              $('#pittura_il_bacio').hide();    
              $('#pittura_kolorimmersi').hide();   
              $('#pittura_gli_amanti').hide(); 
              $('#pittura_la_danzatrice').hide();
              $('#pittura_lottare_senza_mani_senza_piedi').hide();
              $('#pittura_kolorinaere').hide();
              $('#design').hide();
              $('#design_borse_accessori').hide();
              $('#design_monili').hide();
              $('#design_oggetti_arredo').hide();

              $('#architettura_centro_culturale_catania').fadeIn('slow');
        });

    });

別のスライダースクリプトを試しましたが、同じ問題があるので、スライダースクリプトでhide()からshow()に問題があると思います。

どんな助けでも大歓迎です...私はこれを行う方法に迷っています。よろしくお願いします。

アルフォンソ

4

2 に答える 2

0

Alfonso、実装が間違っているに違いありません。あなたが共有している .js コードは、プラグインの実装の一部ではないと確信しています。また、個々の ID を使用してこれらすべての div を非表示にしている理由がよくわかりません。これらすべての ID が本当に必要な場合でも、一度にすべてを非表示にするクラスを追加します (コードの実行速度が大幅に向上します)。例: これらすべての ID を class="toHide" に変更するか、これらすべての行の代わりにそのクラスを追加する場合は、次のように単純に使用できます。

$('.toHide').hide();

そしてブーム。すべてが同じように機能します。スライダー プラグインの使用方法を再確認することをお勧めします

于 2012-12-18T13:27:17.400 に答える
0

そのように要素を個別に非表示にしないでください。これはパフォーマンスの問題を引き起こす可能性があり、また、ずさんなコードでもあります。

ただし、Liquid Sliderに関する問題については、スライダーがパネルの高さを認識していないために発生しています (パネルが非表示になっているため)。

DOM ツリーを見ると、次のように表示されます。

<div class="liquid-slider" id="slider-id" style="height: 0px;">

高さが 0 であることに注意してください。

Liquid Sliderを使用すると、ほとんどの内部機能にアクセスできます。最初にスライダーをオブジェクトとして設定する必要があり、次に高さを調整できます。adjustHeight()スライダーを表示するクリックイベントにメソッドを追加できると思います。試してみてください。

var sliderObject = $.data( $('#slider-id')[0], 'liquidSlider');

sliderObject.adjustHeight();
于 2012-12-18T17:26:43.233 に答える