login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Ajax slideshow

Offline Tuinman - 01/06/2009 14:09
Avatar van TuinmanNieuw lid Hoi allemaal,

Ik ben een slideshow aan het maken.
Nu heb ik de basis al wel maar nu wil ik ook de alt tekst van de images in een balk laten zien.

Hier vinden jullie een voorbeeld van wat is nu heb.
voorbeeld
Als je over de afbeelding gaat, dan zie je de balk verschijnen.

Deze plugin heb ik gebruikt voor de slideshow:
plugin

Dit is mijn code:

slideshow:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="slideshow">
  2.    	  	<img src="userfiles/albums/zomervakantie.jpg" width="780" height="405" alt="zomervakantie 2009" />
  3.         <img src="userfiles/albums/zomervakantie1.jpg" width="780" height="405" alt="wintervakantie 2008" />
  4.         <img src="userfiles/albums/zomervakantie2.jpg" width="780" height="405" alt="herfstvakantie 2007" />
  5.         <img src="userfiles/albums/zomervakantie3.jpg" width="780" height="405" alt="lentevakantie 2006" />
  6.         <img src="userfiles/albums/zomervakantie4.jpg" width="780" height="405" alt="weekendje weg" />
  7.       </div>
  8.       <div id="slideshowbalk"><p id="slideshow-title">zomervakantie 2009</p></div>


Ajax:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function()
  2. 	{
  3. 		$('#slideshow').cycle({
  4. 				fx:    'fade',
  5. 				speed:  1000,
  6. 				timeout : 4000,
  7. 				pause 	: 1,
  8. 				before  : changeTitle  
  9. 		});
  10.  
  11. 	});
  12.  
  13. function changeTitle()  
  14. {           
  15. 	$('#slideshow').mouseover(function(){
  16. 		$("#slideshowbalk").css({'height' : '30px',	'padding' : '5px 10px 0px 0px'});
  17. 		var title = $(this).find('img').attr('alt');          
  18.         $('#slideshow-title').text(title);
  19. 	});
  20. 	$('#slideshow').mouseout(function(){
  21. 		$("#slideshowbalk").css({'height' : '0px',	'padding' : '0px 10px 0px 0px'});
  22. 		$('#slideshow-title').text('').attr('href', href);
  23. 	});
  24. }


Hopelijk kunnen jullie mij helpen.

Greetz

4 antwoorden

Gesponsorde links
Offline dododedodo - 01/06/2009 17:14
Avatar van dododedodo Lid Welk framework gerbruik je?
Offline Tuinman - 01/06/2009 20:12
Avatar van Tuinman Nieuw lid Ik gebruik jquery als framework.
sorry was ik vergeten te vermelden.

Greetz
Offline finduilas - 02/06/2009 10:04
Avatar van finduilas PHP gevorderde Stond duidelijk in de link .

Je zal moeten proberen te weten te komen hoeveel x hij er al doorgelopen is of aan welke image hij zit. Dan kan je volgens mij met een functie eq() die bepaalde img opvragen en daar dan de attr('alt') van terugkrijgen.
Offline Flex1986 - 02/06/2009 10:48
Avatar van Flex1986 Gouden medaille

Senior Member		 Als je de handleiding leest van de plugin dan zie je dat er een aantal callback functies inzitten. Zoals before en after deze geeft een aantal elementen mee zoals het currentElement and nextElement hieruit kan je de afbeelding plukken.

Alle Opties
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s