Loading:


Przewijana galeria obrazków JavaScript (QScroller)

Skrypt Javascript wyświetla galerię która umożliwia przewijanie obrazków w bardzo atrakcyjny sposób.

Na początek pobierzemy biblioteke QScroller : [ pobierz ]


Poniżej przedstawiam przykładowy kod korzystający z tej biblioteki używa on 3 obrazków :
product1, product2, product3 , ale w samej paczce są już gotowe przykłady.

Skrypt jest banalnie prosty w modyfikacji i na pewno uatrakcyjni waszą witrynę.



Napisz Artyku³

Listing


<html>
<head>
<link href="qscroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="qscroller.js"></script>
</head>
<body>
<div id="qscroller2" class="qscroller"></div>
<div class="qscroller2-nav">
  <div>
  <a id="go-prev" href="javascript:void(0)">&lt;&lt;</a>&nbsp;
  <a id="go-next" href="javascript:void(0)">&gt;&gt;</a>
  </div>
</div>
<div class="hide">
  <div class="qslide2">
  <img src="images/product1.jpg" alt="" />
  <h1>Product1</h1>Simple example of product showcase. Use arrows at the bottom to scroll.
  </div>
  <div class="qslide2">
  <img src="images/product2.jpg" alt="" />
  <h1>Product2</h1>Product description here.
  </div>
  <div class="qslide2">
  <img src="images/product3.jpg" alt="" />
  <h1>Product3</h1>Product description here.
  </div>
</div>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
    slides: 'qslide2',
        duration: 1500,
    buttons: {next:'go-next',prev:'go-prev'},
    transition: Fx.Transitions.Quint.easeOut
  }
  var scroller = new QScroller('qscroller2',opt);
  scroller.load();
});
//-->
</script>
<h2>&nbsp;</h2>
</body>
</html>
 




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors