Библиотека Javascript. SE@RCHER

<html> <head> <TITLE>Фото автоматически заменяется с эффектом lamellar effect</TITLE> <meta NAME="keywords" CONTENT="DHTML, slideshow, pictures, images, JavaScript, Dynamic HTML, download, free, samples, animation"> <meta NAME="description" CONTENT="Slideshow with impressive lamellar transition effect between the pictures. You may add as many pictures and lamellas as you like. Each picture can be linked to a separate URL. Easy 1-minute-configuration of speed, pictures, links and number of lamellas. CROSSBROWSER."> <style> .s { position:absolute; left:-5000px; topt:-5000px; } </style> </head> <body bgcolor="#FFFFFF" text="000000"> <script>  </script> <script > var imgpreload=new Array() for (i=0;i<=picture.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=picture[i] } var picturewidth var pictureheight var i_loop=0 var i_picture=0 var width_slice var cliptop=0 var clipbottom var i_clipright=1 var content="" pause=pause*1000 function initiate() { getcontent() if (document.all) { for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content var thiss=eval("document.all.s"+i+".style") thiss.posLeft=horizontal_pos thiss.posTop=vertical_pos } var thisspan = eval("document.all.s"+0) picturewidth=thisspan.offsetWidth pictureheight=thisspan.offsetHeight width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.all.whole.style.posLeft=horizontal_pos document.all.whole.style.posTop=vertical_pos i_picture++ openlamellar() } if (document.layers) { for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() var thiss=eval("document.s"+i) thiss.left=horizontal_pos thiss.top=vertical_pos } var thisspan=eval("document.s"+0+".document") picturewidth=thisspan.width pictureheight=thisspan.height width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.whole.document.write(" ") document.whole.document.close() document.whole.left=horizontal_pos document.whole.top=vertical_pos i_picture++ openlamellarNN() } } function openlamellar() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellar()",20) } else { clearTimeout(timer) whole.innerHTML=content var timer=setTimeout("changepicture()",pause) } } function openlamellarNN() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellarNN()",20) } else { clearTimeout(timer) document.whole.document.write(content) document.whole.document.close() var timer=setTimeout("changepictureNN()",2000) } } function getcontent() { content="<a href="+pictureurl[i_picture]+" target="+target_url+">" content+="<img src="+picture[i_picture]+" border=0 width=150>" content+="</a>" } function changepicture() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content } i_picture++ openlamellar() } function changepictureNN() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() } i_picture++ openlamellarNN() } document.write("<span id='whole' class='s'></span>") for (i=0;i<=x_slices;i++) { document.write("<span id='s"+i+"' class='s'></span>") } document.close() window.onload=initiate </script> <DIV ID="instructions" style="position:absolute;top:180px;left:10px;"> <font size=2 color=black face=Verdana><b>Slideshow with with lamellar effect</b><br><br>Slideshow with impressive lamellar transition effect between the pictures. You may add as many pictures and lamellas as you like. Each picture can be linked to a separate URL. Easy 1-minute-configuration of speed, pictures, links and number of lamellas. CROSSBROWSER. <br><br><br> <form> <b>Configuration:</b><br><br> <b>Step 1:</b> <a href="imglamellar3.zip">Download this ZIP-File</a> and unzip the 3 testimages (sampleX.jpg) and the script-file 'imglamellar3.js'. Put the testimages and the script-file into the same folder as your webpage.<br><br> <b>Step 2:</b> Open your webpage and paste the following code between <b><body></b> and <b></body>:</b><br> <input type=button onClick="this.form.code1.focus();this.form.code1.select()" value="select all" style="font-size:8pt"><br> <textarea name="code1" cols="60" rows="6" style="font-size:8pt"> <script>  </script> <script > var imgpreload=new Array() for (i=0;i<=picture.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=picture[i] } var picturewidth var pictureheight var i_loop=0 var i_picture=0 var width_slice var cliptop=0 var clipbottom var i_clipright=1 var content="" pause=pause*1000 function initiate() { getcontent() if (document.all) { for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content var thiss=eval("document.all.s"+i+".style") thiss.posLeft=horizontal_pos thiss.posTop=vertical_pos } var thisspan = eval("document.all.s"+0) picturewidth=thisspan.offsetWidth pictureheight=thisspan.offsetHeight width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.all.whole.style.posLeft=horizontal_pos document.all.whole.style.posTop=vertical_pos i_picture++ openlamellar() } if (document.layers) { for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() var thiss=eval("document.s"+i) thiss.left=horizontal_pos thiss.top=vertical_pos } var thisspan=eval("document.s"+0+".document") picturewidth=thisspan.width pictureheight=thisspan.height width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.whole.document.write(" ") document.whole.document.close() document.whole.left=horizontal_pos document.whole.top=vertical_pos i_picture++ openlamellarNN() } } function openlamellar() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellar()",20) } else { clearTimeout(timer) whole.innerHTML=content var timer=setTimeout("changepicture()",pause) } } function openlamellarNN() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellarNN()",20) } else { clearTimeout(timer) document.whole.document.write(content) document.whole.document.close() var timer=setTimeout("changepictureNN()",2000) } } function getcontent() { content="<a href="+pictureurl[i_picture]+" target="+target_url+">" content+="<img src="+picture[i_picture]+" border=0>" content+="</a>" } function changepicture() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content } i_picture++ openlamellar() } function changepictureNN() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() } i_picture++ openlamellarNN() } document.write("<span id='whole' class='s'></span>") for (i=0;i<=x_slices;i++) { document.write("<span id='s"+i+"' class='s'></span>") } document.close() window.onload=initiate </script>
IMPORTANT: Do not paste this code into tables or <DIV> and </DIV> or between any other container!

Step 3: Configure number of lamellas, pictures, speed, links and position of the slideshow inside the script.

Step 4: Paste the following code between <head> and </head>:

<style> .s { position:absolute; left:-5000px; topt:-5000px; } </style>