login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Afbeelding effecten > Afbeelding vergroten

Afbeelding vergroten

Auteur: Ontani - 27 juni 2006 - 13:58 - Gekeurd door: Maarten - Hits: 9342 - Aantal punten: 4.83 (9 stemmen)




Een leuk scriptje om wat fijne effectjes met afbeeldingen te doen.
Altijd leuk voor een fotoalbum.

Uitleg staat als commentaar in het script.

Veel plezier ermee.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8. 	padding: 0px;
  9. 	margin: 0px;
  10. 	font-family: Arial;
  11. 	font-size: 10px;
  12. 	background-color: #666666;
  13. }
  14.  
  15. table, td {
  16. 	font-size: 10px;
  17. }
  18.  
  19. #inhoud {
  20. 	position: relative;
  21. 	background-color: #FAFAFA;
  22. 	width: 0px;
  23. 	height: 0px;
  24. }
  25.  
  26. #size {
  27. 	font-size: 18px;
  28. 	color: #FAFAFA;
  29. }
  30.  
  31. -->
  32. </style>
  33. <script type="text/javascript">
  34. <!-- 
  35.  
  36.  /*
  37.                                  .......
  38.                           ..&MMMMMMMMMMMMMMNa..
  39.   .MMMMMMMa&..        .JMMMMMMMMM""""""WMMMMMMMMN&.        ..&MMMMMMMN.
  40.  JMMD!` .!?""MMa.  .JMMMMMMMY^`           ."WMMMMMMMa. ..MM#""!!  !"MMF
  41.  .MF           ."MMMMMMMMY'                   ?WMMMMMMM"^           JMF
  42.   JM.             .TMMMD                        .YMM"^              J#
  43.    Th         .N&..  .YN.                      ..#^  ..JNMp        .#
  44.     ?h      .MMMMMMM    7N.                  .JD`   JMMMMMMh      .@
  45.      .N.   .MMMMMM@       .Wx              .M"       .MMMMMMN    .D
  46.       .W.  dMMMMMF          .Yx          .#=           WMMMMMh  J^
  47.           JMMMMMF             .Yx      .#^              WMMMMMF
  48.          .MMMMMF                 T`   "!                 MMMMMM
  49.          JMMMMM                                          .MMMMMF
  50.          dMMMMF   JMMa.                           .&MMr   4MMMMF
  51.          MMMMM    MMMMMMa.                     ..MMMMMM   .MMMMF
  52.          MMMMF    MMMMMMMMNJ.               ..MMMMMMMMM    MMMMF
  53.          JMMMF    JMMMMMMMMMMN&.         ..MMMMMMMMMMMF    JMMMF
  54.          JMMM      TMMMMMMMMMM""""     """"MMMMMMMMMM"     JMMM^
  55.           WMMF                                             JMMF
  56.           .MMh                                             MMM!
  57.            JMM,                                           JMM5
  58.             JMM,                                         JMMt
  59.              .MMN.                                    ..MMM^
  60.                4MMMN&..                           ..+MMMMD
  61.                 .WMMMMMMMMMNN&&&&&&&&&&&&&&&NNMMMMMMMMM#'
  62.                   .UMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMY!
  63.                      ?WMMMMMMMMMMMMMMMMMMMMMMMMMMM#^
  64.                         J"WMMMMMMMMMMMMMMMMMMM#"!
  65.                              .7"""""""""""^!
  66.  */
  67.  
  68.  var sizeSpeed = 30;   // Snelheid van verkleinen of vergroten tussen 0 en 50 met 0 traag en 50 snel
  69.  // sizeSpeed standaard op 30
  70.  var fadeSpeed = 30;   // Snelheid van in- en uitfaden van de afbeelding tussen 0 en 50 met 0 traag en 50 snel
  71.  // fadeSpeed standaard op 30
  72.  
  73.  var fotos = new Array();
  74.  fotos[0] = new Image();
  75.  fotos[1] = new Image();
  76.  fotos[2] = new Image();
  77.  fotos[3] = new Image();
  78.  fotos[4] = new Image();
  79.  
  80.  var loading = new Image();
  81.  loading.src = "loading.gif";
  82.  
  83.  var fotosSource = new Array();
  84.  fotosSource[0] = "fotos/foto1.jpg";
  85.  fotosSource[1] = "fotos/foto2.jpg";
  86.  fotosSource[2] = "fotos/foto3.jpg";
  87.  fotosSource[3] = "fotos/foto4.jpg";
  88.  fotosSource[4] = "fotos/foto5.jpg";
  89.  
  90.  var fotosWidth = new Array();
  91.  fotosWidth[0] = 640;
  92.  fotosWidth[1] = 350;
  93.  fotosWidth[2] = 500;
  94.  fotosWidth[3] = 500;
  95.  fotosWidth[4] = 640;
  96.  
  97.  var fotosHeight = new Array();
  98.  fotosHeight[0] = 480;
  99.  fotosHeight[1] = 233;
  100.  fotosHeight[2] = 279;
  101.  fotosHeight[3] = 375;
  102.  fotosHeight[4] = 480;
  103.  
  104.  var fotosComment = new Array();
  105.  fotosComment[0] = "Wat een prachtig uitzicht vanuit m'n kamer";
  106.  fotosComment[1] = "Wat een prachtig uitzicht langs de andere kant";
  107.  fotosComment[2] = "Hoezo kortbij?";
  108.  fotosComment[3] = "Ooooooooh hoe schattig";
  109.  fotosComment[4] = "WTF! 1,34Mb voor een foto! :/";
  110.  
  111.  var width = 0;
  112.  var height = 0;
  113.  var opacity = 100;
  114.  
  115.  var sizeTimer;
  116.  var fadeTimer;
  117.  
  118.  function showPhoto(fotoId) {
  119.   document.getElementById("LoadingHolder").innerHTML = "";
  120.   document.getElementById('fotoHolder').innerHTML = "&nbsp;";
  121.   document.getElementById('commentaar').innerHTML = "";
  122.   width = fotosWidth[fotoId]+20;
  123.   height = fotosHeight[fotoId]+80;
  124.   clearTimeout(sizeTimer);
  125.   clearTimeout(fadeTimer);
  126.   curOpacity = 0;
  127.   sizeTimer = setTimeout("photosizing("+fotoId+")",1);
  128.  }
  129.  
  130.  curWidth = 0;
  131.  curHeight = 0;
  132.  curOpacity = 0;
  133.  
  134.  function photosizing(imageId) {
  135.   var telHeight;
  136.   var telWidth;
  137.   var speedCounter = 50 - sizeSpeed;
  138.   if (speedCounter < 0) {
  139.    speedCounter = speedCounter * -1;
  140.   }
  141.   if (speedCounter == 0) {
  142.    speedCounter = 2;
  143.   }
  144.   telHeight = (height - curHeight) / speedCounter;
  145.   telWidth = (width - curWidth) / speedCounter;  
  146.   curHeight += telHeight;
  147.   curWidth += telWidth;
  148.   if (Math.round(curHeight) == height && Math.round(curWidth) == width) {
  149.    // Fix Width
  150.    document.getElementById('inhoud').style.height = height;
  151.    document.getElementById('inhoud').style.width = width;
  152.    // Start loading
  153.    fotos[imageId].src = fotosSource[imageId];
  154.    document.getElementById("fotoHolder").innerHTML = "<img src=\"" + fotosSource[imageId] + "\" alt=\"\" border=\"0\" id=\"foto\" onload=\"placeImage(this);\" name=\"" + imageId + "\"/>";
  155.    document.getElementById('foto').style.width = fotosWidth[imageId];
  156.    document.getElementById('foto').style.height = fotosHeight[imageId];
  157.    // Place Loading Image
  158.    document.getElementById("LoadingHolder").innerHTML = "<img src=\"" + loading.src + "\" alt=\"\" />";
  159.    var object = document.getElementById('foto').style;
  160.    object.opacity = 0;
  161.    object.MozOpacity = 0;
  162.    object.KhtmlOpacity = 0;
  163.    object.filter = "alpha(opacity=0)";
  164.    return ; 
  165.   }
  166.   document.getElementById('inhoud').style.height = curHeight;
  167.   document.getElementById('inhoud').style.width = curWidth;
  168.   sizeTimer = setTimeout("photosizing("+imageId+")",1);
  169.  }
  170.  
  171.  function placeImage(imageObject) {
  172.   // Start Fade
  173.   document.getElementById("LoadingHolder").innerHTML = "";
  174.   // Set Photocomment
  175.   document.getElementById('commentaar').innerHTML = fotosComment[imageObject.name];
  176.   fadeTimer = setTimeout("changeOpac('foto')",1);
  177.  }
  178.  
  179.  function changeOpac(objectId) {
  180.   var fadeCounter = 50 - fadeSpeed;
  181.   if (fadeCounter < 0) {
  182.    fadeCounter = fadeCounter * -1;
  183.   }
  184.   if (fadeCounter == 0) {
  185.    fadeCounter = 2;
  186.   }
  187.   telOpacity = (opacity - curOpacity) / fadeCounter;
  188.   curOpacity += telOpacity;
  189.   var object = document.getElementById(objectId).style;
  190.   object.opacity = curOpacity / 100;
  191.   object.MozOpacity = curOpacity / 100;
  192.   object.KhtmlOpacity = curOpacity / 100;
  193.   object.filter = "alpha(opacity="+ curOpacity +")";
  194.   if (Math.round(curOpacity) == 100) {
  195.    curOpacity = 0;
  196.    return;
  197.   }
  198.   fadeTimer = setTimeout("changeOpac('foto')",1);
  199.  }
  200.  
  201. -->
  202. </script>
  203. </head>
  204. <body>
  205. <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;">
  206.  <tr>
  207.   <td style="height: 120px;">
  208.   <div style="padding: 5px;">
  209.    <a href="javascript:showPhoto('0');"><img src="fotos/foto1_2.jpg" alt="" border="0" /></a>&nbsp;<a href="javascript:showPhoto('1');"><img src="fotos/foto2_2.jpg" alt="" border="0" /></a>&nbsp;<a href="javascript:showPhoto('2');"><img src="fotos/foto3_2.jpg" alt="" border="0" /></a>&nbsp;<a href="javascript:showPhoto('3');"><img src="fotos/foto4_2.jpg" alt="" border="0" /></a>&nbsp;<a href="javascript:showPhoto('4');"><img src="fotos/foto1_2.jpg" alt="" border="0" /></a>
  210.  
  211.   </div>
  212.   </td>
  213.  </tr>
  214.  <tr>
  215.   <td valign="middle">
  216. <div align="center">
  217.  <div id="inhoud">
  218.   <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;">
  219.    <tr>
  220.  
  221.     <td style="width: 10px; height: 10px; background-image: url(tl.gif); font-size: 1px;"></td>
  222.     <td style="height: 10px; font-size: 1px"></td>
  223.      <td style="width: 10px; height: 10px; background-image: url(tr.gif); font-size: 1px;"></td>
  224.    </tr>
  225.     <tr>
  226.     <td style="width: 10px;"></td>
  227.     <td>
  228. 	  <span id="LoadingHolder"></span><span id="fotoHolder">&nbsp;</span>
  229.  
  230. 	</td>
  231.     <td style="width: 10px;"></td>
  232.    </tr>
  233.  
  234.    <tr style="height: 60px;">
  235.     <td style="width: 10px;"></td>
  236.     <td style="vertical-align: top;"><span id="commentaar"></span></td>
  237.     <td style="width: 10px;"></td>
  238.    </tr>
  239.  
  240.     <tr>
  241.     <td style="width: 10px; height: 10px; background-image: url(bl.gif); font-size: 1px;"></td>
  242.     <td style="height: 10px; font-size: 1px"></td>
  243.     <td style="width: 10px; height: 10px; background-image: url(br.gif); font-size: 1px;"></td>
  244.  
  245.    </tr>
  246.   </table>
  247.  </div>
  248. </div>
  249.   </td>
  250.  
  251.  </tr>
  252. </table>
  253. </body>
  254. </html>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

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