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:

jquery.touchSwipe.min.js
touchgallery.js
touchgallery.css

Projekt © 2009 - INFOPROG 67920 odwiedzin