• Címkék:
  • accordion
  • concertina
  • harmonika
  • horizontal
  • slider

zAccordion

Példa

  • Első kép

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.

  • Második kép

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

  • Harmadik kép

    Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.

  • Negyedik kép

    Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.

  • Ötödik kép

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

Deklaráció

        $(document).ready(function(){
          $('#splash').zAccordion({
            slideWidth: 600,
            easing: 'easeOutQuint',
            width: 900,
            height: 400,
            timeout: 3000,
            slideClass: 'slide',
            animationStart: function() {
              $('#splash').find('li.slide-previous div').slideUp();
            },
            animationComplete: function() {
              $('#splash').find('li.slide-open div').slideDown();
            },
            afterBuild: function () {
              $('#pelda').fadeIn(3000);
            }
          });

          $('#splash').find('li.slide-closed div').css('display', 'none');
        });
      

HTML kód

        <div id="pelda">
          <ul id="splash">
            <li>
              <img src="images/img1.jpg" width="600" height="400" alt="" />
              <div class="splash-bg"></div>
              <div class="splash-info">
                <h4>Első kép</h4>
                <p class="splash-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus
                  sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed
                  blandit at, bibendum non dolor.
                </p>
              </div>
            </li>
            <li>
              <img src="images/img2.jpg" width="600" height="400" alt="" />
              <div class="splash-bg"></div>
              <div class="splash-info">
                <h4>Második kép</h4>
                <p class="splash-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem.
                  Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a
                  tellus.
                </p>
              </div>
            </li>
            <li>
              <img src="images/img3.jpg" width="600" height="400" alt="" />
              <div class="splash-bg"></div>
              <div class="splash-info">
                <h4>Harmadik kép</h4>
                <p class="splash-text">
                  Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue
                  molestie. Donec ultrices facilisis erat at porttitor.
                </p>
              </div>
            </li>
            <li>
            <img src="images/img4.jpg" width="600" height="400" alt="" />
              <div class="splash-bg"></div>
              <div class="splash-info">
                <h4>Negyedik kép</h4>
                <p class="splash-text">
                  Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem
                  luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.
                </p>
              </div>
            </li>
            <li>
              <img src="images/img5.jpg" width="600" height="400" alt="" />
              <div class="splash-bg"></div>
              <div class="splash-info">
                <h4>Ötödik kép</h4>
                <p class="splash-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem.
                  Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a
                  tellus.
                </p>
              </div>
            </li>
          </ul>
        </div>
      

« bezár