Meerdere fotoviewers in 1 pagina

[larsbos]

Hallo allemaal,

Hopelijk kan ik mijn vraag zo duidelijk mogelijk neer zetten. Ik ben bezig met het maken van een site voor mijn vriendin, ik heb overal een klein beetje verstand van dus ik loop nogal eens tegen problemen aan. Meestal krijg ik dat zelf wel opgelost maar deze niet.

Er moet een pagina komen van haar portfolio, deze moet verdeeld zijn in 3 categorieën, bruiloften, portret en mode. Nu heb ik gebruik gemaakt van de viewer van highslide, deze vonden wij mooi. Als je op de foto klikt komt deze naar voren en kan je door de galerij heen bladeren. Dit ging helemaal perfect totdat ik de 2e erin moest zetten. Op een of andere manier botst dit, hij laat niet alleen de foto's zien van degene die je aanklikt maar ook van de andere. Beide maken gebruik van dezelfde jscript bestanden, ik heb ook al geprobeerd om er 2 van te maken maar dit werkte ook niet.
Nu heb ik alles geprobeerd maar krijg het nog steeds niet voor elkaar. Hopelijk kan 1 van jullie mij helpen.

De pagina is te vinden op http://www.blauwgeler.nl/passion/portfolio.html

 

[Poppoll]

Lars,
Voor de albums in het html document dient u de code voor album 2 en 3 als volgt aan te passen:

 <table width="645" height="78" border="0">
        <tr>
          <td>&nbsp;</td>
          <td><div class="bruidsfotografie-gallery">
	<a id="thumb1"href="bruid/thumbstrip01.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="bruid/thumbstrip01.thumb.jpg"  alt=""/>
	</a>
	<div class="hidden-container">
	<a href="bruid/thumbstrip01.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="bruid/thumbstrip01.thumb.jpg"  alt=""/>
	</a>
	
	</div>
</div></td>
          <td>
		  <div class="mode-gallery">
	<a id="thumb2" href="mode/thumbstrip01.jpg" class="highslide" 
			onclick="return hs.expand(this, config2 )">
		<img src="mode/thumbstrip01.thumb.jpg"  alt=""/>
	</a>
	<div class="hidden-container">
	<a href="mode/thumbstrip01.jpg" class="highslide" 
			onclick="return hs.expand(this, config2 )">
		<img src="mode/thumbstrip01.thumb.jpg"  alt=""/>
	</a>
	
	</div>
</div></td>
           <td>
		  <div class="highslide-gallery">
	<a id="thumb3" href="portret/thumbstrip01.jpg" class="highslide" 
			onclick="return hs.expand(this, config3 )">
		<img src="portret/thumbstrip01.thumb.jpg"  alt=""/>
	</a>
	<div class="hidden-container">
	<a href="portret/thumbstrip01.jpg" class="highslide" 
			onclick="return hs.expand(this, config3 )">
		<img src="portret/thumbstrip01.thumb.jpg"  alt=""/>
	</a>
	
	</div>
</div></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>

higslide.config.js moet er zo uit zien:

/**
*	Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = null;
hs.dimmingOpacity = 0.65;
hs.fadeInOut = true;
hs.align = 'center';


// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 3000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-15',
		hideOnMouseOut: true
	},
	
	thumbstrip: {
		mode: 'vertical',
		position: 'left',
		relativeTo: 'viewport'
	}
	
});
hs.addSlideshow({
	slideshowGroup: 'group2',
	interval: 3000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-15',
		hideOnMouseOut: true
	},
	
	thumbstrip: {
		mode: 'horizontal',
		position: 'left',
		relativeTo: 'viewport'
	}
	
});
hs.addSlideshow({
	slideshowGroup: 'group3',
	interval: 3000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-15',
		hideOnMouseOut: true
	},
	
	thumbstrip: {
		mode: 'vertical',
		position: 'left',
		relativeTo: 'viewport'
	}
	
});
// Dutch language strings
hs.lang = {
	cssDirection: 'ltr',
	loadingText: 'Laden...',
	loadingTitle: 'Klik om te annuleren',
	focusTitle: 'Klik om naar voren te brengen',
	fullExpandTitle: 'Vergroot naar origineel (f)',
	creditsText: 'Powered door <i>Highslide JS</i>',
	creditsTitle: 'Ga naar de Highslide JS homepage',
	previousText: 'Vorige',
	nextText: 'Volgende',
	moveText: 'Verplaats',
	closeText: 'Sluiten',
	closeTitle: 'Sluiten (esc)',
	resizeTitle: 'Afmeting wijzigen',
	playText: 'Afspelen',
	playTitle: 'Start diashow (spatiebalk)',
	pauseText: 'Pauze',
	pauseTitle: 'Diashow pauzeren (spatiebalk)',
	previousTitle: 'Vorige (pijl naar links)',
	nextTitle: 'Volgende (pijl naar rechts)',
	moveTitle: 'Verplaats',
	fullExpandText: 'Volledige grootte',
	number: 'Beeld %1 van %2',
	restoreTitle: 'Klik om te sluiten, klik en sleep om te verplaatsen. Gebruik pijltjes toetsen voor volgende en vorige.'
};

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	thumbnailId: 'thumb1',
	transitions: ['expand', 'crossfade']
};
var config2 = {
	slideshowGroup: 'group2',
	thumbnailId: 'thumb2',
	transitions: ['expand', 'crossfade']
};
var config3 = {
	slideshowGroup: 'group3',
	thumbnailId: 'thumb3',
	transitions: ['expand', 'crossfade']
};

 

[larsbos]

Thanx

He poppoll, super bedankt voor je reactie, had al niet meer verwacht dat ik een oplossing zou door krijgen. Ik ga ermee aan de slag..

Thanx