• Címkék:
  • slider
  • kép
  • diavetítő
  • slideshow
  • csúsztat
  • lapozó

Diapo

Példa

Etiam aliquet diam ac eros scelerisque pretium rhoncus magna sodales. Etiam rhoncus justo luctus dolor dapibus facilisis.
Sed a felis quis orci fringilla
Sed a felis quis orci fringilla
Phasellus malesuada laoreet enim. Quisque risus libero, aliquet vitae pharetra non, viverra id nisi. Nullam dignissim adipiscing felis viverra tempor.
Suspendisse sapien ligula, porta a interdum vulputate, posuere id sem. Sed interdum adipiscing ante a vestibulum. Aliquam erat volutpat.

Deklaráció

        $('#pelda').diapo();
      

HTML kód

        <div id="pelda">
          <div data-thumb="images/thumbs/img1.jpg" >
            <img src="images/slides/img1.jpg" width="940" height="470" alt="" />
            <div class="caption elemHover fromLeft">
              Etiam aliquet diam ac eros scelerisque pretium rhoncus magna sodales. Etiam rhoncus justo luctus dolor dapibus facilisis.
            </div>
          </div>
          <div data-thumb="images/thumbs/img2.jpg">
            <img src="images/slides/img2.jpg" width="940" height="470" alt="" />
            <div class="caption elemHover fromRight" style="bottom: 60px; padding-bottom: 15px; font-weight: bold; text-transform: uppercase">
              Sed a felis quis orci fringilla
            </div>
            <div class="caption elemHover fromLeft" data-easing="easeOutExpo" style="color: #e9c708; left: 0px; bottom: 0px;">
              Sed a felis quis orci fringilla
            </div>
          </div>
          <div data-thumb="images/thumbs/img3.jpg">
            <img src="images/slides/img3.jpg" width="940" height="470" alt="" />
          </div>
          <div data-thumb="images/thumbs/img4.jpg">
            <img src="images/slides/img4.jpg" width="940" height="470" alt="" />
            <div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:50px; color: #fff; text-shadow: 1px 1px 1px #000">
              Phasellus malesuada laoreet enim. Quisque risus libero, aliquet vitae pharetra non, viverra id nisi. Nullam dignissim adipiscing felis viverra tempor.
            </div>
          </div>
          <div data-thumb="images/thumbs/img5.jpg">
            <img src="images/slides/img5.jpg" width="940" height="470" alt="" />
            <div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="width: 300px; color: #fff; left:30px; bottom:78px;">
              Suspendisse sapien ligula, porta a interdum vulputate, posuere id sem. Sed interdum adipiscing ante a vestibulum. Aliquam erat volutpat.
            </div>
          </div>
        </div>
      

« bezár