login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Afbeelding effecten > Mini slideshow voor thumbnails

Mini slideshow voor thumbnails

Auteur: Sweepee - 04 januari 2007 - 06:37 - Gekeurd door: Wijnand - Hits: 7417 - Aantal punten: 5.00 (5 stemmen)





Dit is een zeer simpele slideshow, bedoeld voor thumbnails, die volgens mij leuk kan zijn voor verschillende dingen.

Als je bijvoorbeeld de 20 nieuwste foto's op je website wilt laten zien, dan kun je deze slideshow gebruiken om ze op een compacte manier te tonen. Het voorbeeld is te vinden op http://www.kris.../index.php.

Hoe werkt dit script nu? Wel het bestaat uit 2 onderdelen. Een div-tag met daarin een table-tag. De div-tag doet dienst als frame en het is de table-tag die doorheen dit frame geschoven wordt als een filmstrip met dia's.

De div-tag is als een frame, want hier staat de CSS-eigenschap overflow ingesteld op hidden. Al de inhoud die niet bijkan in de div-tag blijft hierdoor onzichtbaar. Bovendien staat bij de div-tag position ingesteld op relative en bij de table-tag ingesteld op absolute. Ook dit is zeer belangrijk, want in het JavaScript wordt de table-tag absoluut verschoven t.o.v. de div-tag.

Als het script bezig is, wordt er constant de CSS-eigenschap left aangepast van de table-tag, zodanig dat de hele tabel zich verschuift in de div-tag volgens een interval. Als de laatste foto tevoorschijn komt, worden de eerste foto's opnieuw toegevoegd aan de tabel.

Je kunt de snelheid instellen door speed aan te passen (lager is sneller, ik raad 50-100 aan). En let op: slechts 1 rij en minstens 1 cel in diezelfde rij toevoegen!

Ik hoop dat iemand dit kan gebruiken.

Groeten, Sweepee.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<title>Mini Slideshow</title>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. 		<style type="text/css">
  7. 		<!--
  8. 			body {
  9. 				margin: 0px;
  10. 				padding: 0px;
  11. 				text-align: center;
  12. 			}
  13. 			#slideshow {
  14. 				overflow: hidden;
  15. 				position: relative;
  16. 				width: 300px;
  17. 				height: 70px;
  18. 				background-color: #EEEEEE;
  19. 				margin: 10px auto 0px auto;
  20. 				border: 1px solid #000;
  21. 			}
  22. 			#slideshow table {
  23. 				position: absolute;
  24. 				left: 0px;
  25. 				top: 0px;
  26. 				margin: 0px;
  27. 				padding: 0px;
  28. 				border: none;
  29. 				border-collapse: collapse;
  30. 			}
  31. 			#slideshow table tr td {
  32. 				padding: 10px 0px 10px 10px;
  33. 				vertical-align: middle;
  34. 			}
  35. 			#slideshow table tr td a img {
  36. 				border: none;
  37. 				padding: 0px;
  38. 				margin: 0px;
  39. 			}
  40. 		-->
  41. 		</style>
  42. 		<script type="text/javascript">
  43. 		<!--
  44. 			var shift	= 1;
  45. 			var offset	= 0;
  46. 			var speed	= 50;
  47. 			var timeout	= 0;
  48. 			var offset = 0;
  49. 			var div, table;
  50. 			var count = 0;
  51. 			var clone = 0;
  52.  
  53. 			function start() {
  54. 				timeout = window.setInterval('run()', speed);
  55. 			}
  56.  
  57. 			function stop() {
  58. 				window.clearInterval(timeout);
  59. 			}
  60.  
  61. 			function run() {
  62. 				while(table.offsetWidth + table.offsetLeft - div.offsetWidth < 0) {
  63. 					table.getElementsByTagName('tr')[0].appendChild(table.getElementsByTagName('td')[clone].cloneNode(true));
  64. 					clone++;
  65. 				}
  66. 				table.style.left = offset + 'px';
  67. 				offset = offset - shift;
  68. 				tmp = table.offsetLeft + table.getElementsByTagName('td')[0].offsetWidth;
  69. 				if(tmp < 0 && table.getElementsByTagName('td').length > count) {
  70. 					table.getElementsByTagName('td')[0].parentNode.removeChild(table.getElementsByTagName('td')[0]);
  71. 					clone--;
  72. 					table.style.left = tmp + 'px';
  73. 					offset = tmp;
  74. 				}
  75. 			}
  76.  
  77. 			function init() {
  78. 				div		= document.getElementById('slideshow');
  79. 				table		= div.getElementsByTagName('table')[0];
  80. 				count		= table.getElementsByTagName('td').length;
  81. 				start();
  82. 			}
  83. 		// -->
  84. 		</script>
  85. 	</head>
  86. 	<body onload="init();">
  87. 		<div id="slideshow" onmouseover="stop();" onmouseout="start();">
  88. 			<table>
  89. 				<tr>
  90. 					<td><a href="#"><img src="image1.jpg" alt="" /></a></td>
  91. 					<td><a href="#"><img src="image2.jpg" alt="" /></a></td>
  92. 					<td><a href="#"><img src="image3.jpg" alt="" /></a></td>
  93. 					<td><a href="#"><img src="image4.jpg" alt="" /></a></td>
  94. 					<td><a href="#"><img src="image5.jpg" alt="" /></a></td>
  95. 					<td><a href="#"><img src="image6.jpg" alt="" /></a></td>
  96. 				</tr>
  97. 			</table>
  98. 		</div>
  99. 	</body>
  100. </html>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (7)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.025s