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>//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'
}Kód: Vybrať všetko
var miniGalleryOptions2 = {
slideshowGroup: 2,thumbnailId: 'thumb2'
}Kód: Vybrať všetko
<a class='highslide' id="thumb2" href='portfolio/3d/01.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="">