highslide - viac galérií v jednom html

Programovacie jazyky, rady, poradňa...
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3206
Registrovaný: 14 feb 2009, 22:34
Bydlisko: Bratislava
Kontaktovať používateľa:

highslide - viac galérií v jednom html

Príspevok od používateľa weroro »

Ahoj,

zo stránky http://highslide.com/ som si stiahol highslide balík, z ktorého používam script highslide-with-gallery.js
chcel by som v jednej html použiť tento script na 3 oddelené galérie, ale nedarí sa mi to a vždy mi tie galérie spojí do jedného celku.

html vyzerá nasledovne:

Kód: Vybrať všetko

<html>
	<head>
		<script type="text/javascript" src="../highslide/highslide-with-gallery.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.fadeInOut = true;
			hs.outlineType = 'rounded-white';
			hs.headingEval = 'this.a.title';
			hs.numberPosition = 'heading';
			hs.useBox = true;
			hs.width = 600;
			hs.height = 400;
			hs.showCredits = false;
			hs.dimmingOpacity = 0.8;

			hs.addSlideshow({
				//slideshowGroup: 'group1',
				interval: 5000,
				repeat: false,
				useControls: true,
				fixedControls: 'fit',
				overlayOptions: {
					position: 'top right',
					offsetX: 200,
					offsetY: -65
				},
				thumbstrip: {
					position: 'rightpanel',
					mode: 'float',
					relativeTo: 'expander',
					width: '210px'
				}
			});

			// Make all images animate to the one visible thumbnail
			var miniGalleryOptions1 = {
				thumbnailId: 'thumb1'
			}
			var miniGalleryOptions2 = {
				thumbnailId: 'thumb2'
			}
			var miniGalleryOptions3 = {
				thumbnailId: 'thumb3'
			}
		</script>
	</head>
	<body>
		<div class="highslide-gallery">
			<a class='highslide' id="thumb1" href='portfolio/3d/01.jpg' onclick="return hs.expand(this, miniGalleryOptions1)" title="GALERIA1">
				<img src='portfolio/3d/tmb/01_th.jpg' alt=''/></a>
			<div class="hidden-container">
				<a href="portfolio/3d/01.jpg" class="highslide" onclick="return hs.expand(this, miniGalleryOptions1)" title="GALERIA1">
					<img src="portfolio/3d/tmb/01_th.jpg" alt="obrázok" title="Kliknite pre zväčšenie" /></a>
				<div class="highslide-caption">
					Popis obrázku.
				</div>
			</div>
		</div>
		<div class="highslide-gallery">	
			<a href="portfolio/polepy/01.jpg" id="thumb2" class="highslide" onclick="return hs.expand(this, miniGalleryOptions2)" title="GALERIA2" >
				<img src="portfolio/polepy/tmb/01_th.jpg" alt="obrázok"/></a>
			<div class="hidden-container">
				<a href="portfolio/polepy/01.jpg" id="thumb2" class="highslide" onclick="return hs.expand(this, miniGalleryOptions2)" title="GALERIA2" >
					<img src="portfolio/polepy/tmb/01_th.jpg" alt="obrázok"	title="Kliknite pre zväčšenie" /></a>
				<div class="highslide-caption">
					Popis obrázku.
				</div>
			</div>
		</div>
		<div class="highslide-gallery">
			<a href="portfolio/velkoplosna/01.jpg" id="thumb3" class="highslide" onclick="return hs.expand(this, miniGalleryOptions3)" title="GALERIA3">
				<img src="portfolio/velkoplosna/tmb/01_th.jpg" alt="obrázok"/></a>
			<div class="hidden-container">
				<a href="portfolio/velkoplosna/01.jpg" id="thumb3" class="highslide" onclick="return hs.expand(this, miniGalleryOptions3)" title="GALERIA3">
					<img src="portfolio/velkoplosna/tmb/01_th.jpg" alt="obrázok" title="Kliknite pre zväčšenie" /></a>
				<div class="highslide-caption">
					Popis obrázku.
				</div>
			</div>
		</div>
</body>
</html>
Teraz sa mi tie galérie miešajú do hromady:
ukaz.png
Viete mi prosím poradiť ako tie galérie urobiť samostatne? Ďakujem

//autoeditácia príspevku (16 Mar 2011, 13:00)
No, takže som to urobil nasledovne:

v JS časti

Kód: Vybrať všetko

var miniGalleryOptions2 = {
            thumbnailId: 'thumb2'
         }
stačí pridať atribút : slideshowGroup

Kód: Vybrať všetko

var miniGalleryOptions2 = {
				slideshowGroup: 2,thumbnailId: 'thumb2'
			}
A pre každý Anchor zadefinovať

Kód: Vybrať všetko

<a class='highslide' id="thumb2" href='portfolio/3d/01.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="">
Napísať odpoveď