Touch Image Gallery - przegląd zdjęć
Prosta przeglądarka zdjęć z przyciskami nawigacji przód / tył przeznaczona do przeglądarek mobilnych jak i stacjonarnych. W galerii można nawigować w następujący intuicyjny sposób:
- przesuwając w lewo lub w prawo za pomocą palców w mobilnych przeglądarkach, lub przeciągając myszką,
- poprzez stuknięcie lub kliknięcie krawędzi galerii w lewo lub w prawo,
- klikając na auto wygenerowane kule pod spodem galerii.
Oto jak to wygląda przyklad z tej strony
Oto kod do sekcji HEAD:
<link rel="stylesheet" href="/touchgallery.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.touchSwipe.min.js"></script>
<script src="/touchgallery.js">
/***********************************************
* Touch Image Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script>
jQuery(function(){ // on DOM load
$('div#touchgallery1').touchgallery({ // initialize first demo
width: 250,
height: 200
})
$('div#touchgallery2').touchgallery({ // initialize second demo
width: 400,
height: 350
})
})
</script>Wywołanie w pliku HTML w sekcji BODY:
<div id="touchgallery1" class="touchgallery">
<ul>
<li><img src="/image1.jpg" /></li>
<li><img src="/image2.jpg" /></li>
<li><img src="/image3.jpg" /></li>
<li><img src="/image4.jpg" /></li>
</ul>
</div>
<br /><br />
<div id="touchgallery2" class="touchgallery">
<ul>
<li><img src="/amster1.jpg" /></li>
<li><img src="/amster2.jpg" /></li>
<li><img src="/amster3.jpg" /></li>
<li><img src="/amster4.jpg" /></li>
</ul>
</div>I dodatkowo pliki zewnętrzne które należy pobrać i załadować do tego samego katalogu co strona:
