943,603 Members | Top Members by Rank

Ad:
Jan 2nd, 2009
0

javaScript Picture Slide Show

Expand Post »
i need a java script that should take pictures from a Folder and automatically play the slide show of these pictures when HTML page load......i need it urgently....plzzzzz help me
Similar Threads
Reputation Points: 10
Solved Threads: 2
Newbie Poster
mr.khurrams is offline Offline
13 posts
since Oct 2008
Jan 2nd, 2009
0

Re: javaScript Picture Slide Show

Try this link.

It's a copy-paste tutorial.
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Jan 2nd, 2009
0

Re: javaScript Picture Slide Show

Do a search for lightbox or shadowbox or greybox.

Many of these have been made and are available for free downloads.
Reputation Points: 10
Solved Threads: 4
Light Poster
DiGSGRL is offline Offline
45 posts
since May 2008
Jan 9th, 2009
0

Re: javaScript Picture Slide Show

here is a code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. </head>
  7. <script language="JavaScript1.2">
  8.  
  9. //Presentational Slideshow Script- By Dynamic Drive
  10. //For full source code and more DHTML scripts, visit <a rel="nofollow" href="http://www.dynamicdrive.com" target="_blank">http://www.dynamicdrive.com</a>
  11. //This credit MUST stay intact for legal use
  12.  
  13. var slideshow_width='500px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
  14. var slideshow_height='500px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
  15. var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
  16. var slidebgcolor="white"
  17.  
  18. var dropimages=new Array()
  19. //SET IMAGE PATHS. Extend or contract array as needed
  20. dropimages[0]="pic/1.jpg"
  21. dropimages[1]="pic/2.jpg"
  22. dropimages[2]="pic/3.jpg"
  23.  
  24. var droplinks=new Array()
  25. //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
  26. /*droplinks[0]="http://www.yahoo.com"
  27. droplinks[1]=""
  28. droplinks[2]="http://www.google.com"*/
  29.  
  30. ////NO need to edit beyond here/////////////
  31.  
  32. var preloadedimages=new Array()
  33. for (p=0;p<dropimages.length;p++){
  34. preloadedimages[p]=new Image()
  35. preloadedimages[p].src=dropimages[p]
  36. }
  37.  
  38. var ie4=document.all
  39. var dom=document.getElementById
  40.  
  41. if (ie4||dom)
  42. document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';right:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';right:-'+slideshow_width+'"></div></div>')
  43. else
  44. document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')
  45.  
  46. var curpos=parseInt(slideshow_width)*(-1)
  47. var degree=10
  48. var curcanvas="canvas0"
  49. var curimageindex=linkindex=0
  50. var nextimageindex=1
  51.  
  52.  
  53. function movepic(){
  54. if (curpos<0){
  55. curpos=Math.min(curpos+degree,0)
  56. tempobj.style.right=curpos+"px"
  57. }
  58. else{
  59.  
  60. clearInterval(dropslide)
  61. nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
  62. tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
  63. var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
  64. tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
  65. nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
  66. setTimeout("rotateimage()",pause)
  67. }
  68. }
  69.  
  70. function rotateimage(){
  71. if (ie4||dom){
  72. resetit(curcanvas)
  73. var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  74. crossobj.style.zIndex++
  75. var temp='setInterval("movepic()",50)'
  76. dropslide=eval(temp)
  77. curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
  78. }
  79. else
  80. document.images.defaultslide.src=dropimages[curimageindex]
  81. linkindex=curimageindex
  82. curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
  83. }
  84.  
  85. function rotatelink(){
  86. if (droplinks[linkindex]!="")
  87. window.location=droplinks[linkindex]
  88. }
  89.  
  90. function resetit(what){
  91. curpos=parseInt(slideshow_width)*(-1)
  92. var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
  93. crossobj.style.right=curpos+"px"
  94. }
  95.  
  96. function startit(){
  97. var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  98. crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
  99. rotateimage()
  100. }
  101.  
  102. if (ie4||dom)
  103. window.onload=startit
  104. else
  105. setInterval("rotateimage()",pause)
  106.  
  107. </script>
  108.  
  109. <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
  110. <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
  111. <body>
  112. </body>
  113. </html>
Last edited by ~s.o.s~; Jan 9th, 2009 at 1:19 pm. Reason: Added code tags, learn to use them.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
bappaditya is offline Offline
2 posts
since Jan 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Slider in Ajax?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: tinyMCE editor





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC