Javascript - klik na sliku da bi je zumirao/la - bela varijanta

Odličan javascript koji prikazuje veliku sliku klikom na manju. Može se primeniti na više slika na stranici i tako formirati veoma funkcionalnu galeriju...

primer:

probajte kako radi - klik na sliku-zumiranje >>>

Upotreba: kod ispod kopirajte u head i body sekciju Vaše stranice. Skinuti dodatni fajl i sadržaj otpakovati u folder u kome je stranica!

Head kod:

<script type="text/javascript" src="highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">
	hs.graphicsDir = 'highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	//hs.dimmingOpacity = 0.75;

	// Add the controlbar
	hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			opacity: .75,
			position: 'bottom center',
			hideOnMouseOut: true
		}
	});
</script>

Body kod:

<div class="highslide-gallery">

<a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/gallery1.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" />
</a>

<div class="highslide-caption">
	Opis prve slike...
</div>
<a href="images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/gallery2.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<div class="highslide-caption">
	Opis druge slike...
</div>

<a href="images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/gallery3.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<div class="highslide-caption">
	Opis trece slike...
</div>

</div>

Dodatni fajlovi: paket-zoom-w.zip - otpakovati u folder u kome je stranica !

Novosti:

Partner sajta iz nagradne igre :

početna > Download > javascript - klik to zoom-white

Design by sajt-dizajn grupa