A function to display images in a folder for a gallery

  • Vedette
  • Newbie
  • Newbie
  • Vedette
  • Posts: 7

Post 3+ Months Ago

I've developed a photo gallery for my site, but the only thing I've found is that its a pain to have to write code for each picture that I'm going to have. I'd much rather be able to have a function that will just take in all the images that I have in a certain folder and display them.

Here's my code so far:

Code: [ Select ]

<?php include("../nav/nav.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<title>thePosse</title>

<link rel="StyleSheet" type="text/css" href="../style.css">

<script type="text/javascript">

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["/images/photos/may404/DSCF0072.jpg"]
dynimages[1]=["/images/photos/may404/DSCF0073.jpg"]
dynimages[2]=["/images/photos/may404/DSCF0074.jpg"]
dynimages[3]=["/images/photos/may404/DSCF0075.jpg"]
dynimages[4]=["/images/photos/may404/DSCF0076.jpg"]
dynimages[5]=["/images/photos/may404/DSCF0077.jpg"]
dynimages[6]=["/images/photos/may404/DSCF0078.jpg"]
dynimages[7]=["/images/photos/may404/DSCF0079.jpg"]
dynimages[8]=["/images/photos/may404/DSCF0080.jpg"]
dynimages[9]=["/images/photos/may404/DSCF0081.jpg"]
dynimages[10]=["/images/photos/may404/DSCF0083.jpg"]
dynimages[11]=["/images/photos/may404/DSCF0085.jpg"]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>
</head>


<body>
<table>
<tr>
 <td>
<div id="dynloadarea" style="width:485px;height:370px"></div>
 </td>
 
 <td>
<div id="pics" style="overflow-x: hidden; overflow-y: auto; width: 100px; height: 370px; frameborder:0">
<a href="#" onClick="modifyimage('dynloadarea', 0)"><img src="/images/photos/may404/DSCF0072.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 1)"><img src="/images/photos/may404/DSCF0073.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 2)"><img src="/images/photos/may404/DSCF0074.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 3)"><img src="/images/photos/may404/DSCF0075.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 4)"><img src="/images/photos/may404/DSCF0076.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 5)"><img src="/images/photos/may404/DSCF0077.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 6)"><img src="/images/photos/may404/DSCF0078.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 7)"><img src="/images/photos/may404/DSCF0079.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 8)"><img src="/images/photos/may404/DSCF0080.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 9)"><img src="/images/photos/may404/DSCF0081.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 10)"><img src="/images/photos/may404/DSCF0083.jpg" class="photo"></a>
<a href="#" onClick="modifyimage('dynloadarea', 11)"><img src="/images/photos/may404/DSCF0085.jpg" class="photo"></a>
</div>
 </td>
</tr>
</table>


</table>

</body>
</html>
  1. <?php include("../nav/nav.php"); ?>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dth">
  4. <html>
  5. <head>
  6. <title>thePosse</title>
  7. <link rel="StyleSheet" type="text/css" href="../style.css">
  8. <script type="text/javascript">
  9. //Specify image paths and optional link (set link to "" for no link):
  10. var dynimages=new Array()
  11. dynimages[0]=["/images/photos/may404/DSCF0072.jpg"]
  12. dynimages[1]=["/images/photos/may404/DSCF0073.jpg"]
  13. dynimages[2]=["/images/photos/may404/DSCF0074.jpg"]
  14. dynimages[3]=["/images/photos/may404/DSCF0075.jpg"]
  15. dynimages[4]=["/images/photos/may404/DSCF0076.jpg"]
  16. dynimages[5]=["/images/photos/may404/DSCF0077.jpg"]
  17. dynimages[6]=["/images/photos/may404/DSCF0078.jpg"]
  18. dynimages[7]=["/images/photos/may404/DSCF0079.jpg"]
  19. dynimages[8]=["/images/photos/may404/DSCF0080.jpg"]
  20. dynimages[9]=["/images/photos/may404/DSCF0081.jpg"]
  21. dynimages[10]=["/images/photos/may404/DSCF0083.jpg"]
  22. dynimages[11]=["/images/photos/may404/DSCF0085.jpg"]
  23. //Preload images ("yes" or "no"):
  24. var preloadimg="yes"
  25. //Set optional link target to be added to all images with a link:
  26. var optlinktarget=""
  27. //Set image border width
  28. var imgborderwidth=0
  29. //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
  30. var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
  31. ///////No need to edit beyond here/////
  32. if (preloadimg=="yes"){
  33. for (x=0; x<dynimages.length; x++){
  34. var myimage=new Image()
  35. myimage.src=dynimages[x][0]
  36. }
  37. }
  38. function returnimgcode(theimg){
  39. var imghtml=""
  40. if (theimg[1]!="")
  41. imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
  42. imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
  43. if (theimg[1]!="")
  44. imghtml+='</a>'
  45. return imghtml
  46. }
  47. function modifyimage(loadarea, imgindex){
  48. if (document.getElementById){
  49. var imgobj=document.getElementById(loadarea)
  50. if (imgobj.filters && window.createPopup){
  51. imgobj.style.filter=filterstring
  52. imgobj.filters[0].Apply()
  53. }
  54. imgobj.innerHTML=returnimgcode(dynimages[imgindex])
  55. if (imgobj.filters && window.createPopup)
  56. imgobj.filters[0].Play()
  57. return false
  58. }
  59. }
  60. </script>
  61. </head>
  62. <body>
  63. <table>
  64. <tr>
  65.  <td>
  66. <div id="dynloadarea" style="width:485px;height:370px"></div>
  67.  </td>
  68.  
  69.  <td>
  70. <div id="pics" style="overflow-x: hidden; overflow-y: auto; width: 100px; height: 370px; frameborder:0">
  71. <a href="#" onClick="modifyimage('dynloadarea', 0)"><img src="/images/photos/may404/DSCF0072.jpg" class="photo"></a>
  72. <a href="#" onClick="modifyimage('dynloadarea', 1)"><img src="/images/photos/may404/DSCF0073.jpg" class="photo"></a>
  73. <a href="#" onClick="modifyimage('dynloadarea', 2)"><img src="/images/photos/may404/DSCF0074.jpg" class="photo"></a>
  74. <a href="#" onClick="modifyimage('dynloadarea', 3)"><img src="/images/photos/may404/DSCF0075.jpg" class="photo"></a>
  75. <a href="#" onClick="modifyimage('dynloadarea', 4)"><img src="/images/photos/may404/DSCF0076.jpg" class="photo"></a>
  76. <a href="#" onClick="modifyimage('dynloadarea', 5)"><img src="/images/photos/may404/DSCF0077.jpg" class="photo"></a>
  77. <a href="#" onClick="modifyimage('dynloadarea', 6)"><img src="/images/photos/may404/DSCF0078.jpg" class="photo"></a>
  78. <a href="#" onClick="modifyimage('dynloadarea', 7)"><img src="/images/photos/may404/DSCF0079.jpg" class="photo"></a>
  79. <a href="#" onClick="modifyimage('dynloadarea', 8)"><img src="/images/photos/may404/DSCF0080.jpg" class="photo"></a>
  80. <a href="#" onClick="modifyimage('dynloadarea', 9)"><img src="/images/photos/may404/DSCF0081.jpg" class="photo"></a>
  81. <a href="#" onClick="modifyimage('dynloadarea', 10)"><img src="/images/photos/may404/DSCF0083.jpg" class="photo"></a>
  82. <a href="#" onClick="modifyimage('dynloadarea', 11)"><img src="/images/photos/may404/DSCF0085.jpg" class="photo"></a>
  83. </div>
  84.  </td>
  85. </tr>
  86. </table>
  87. </table>
  88. </body>
  89. </html>


So I was thinking of some sort of JavaScript function that could be written to just go through all the images in a folder and display them, especially if they all start with the same characters and just the end numbers are different. Something like a For/While statement, or even a If/Else.

Do you guys have any ideas of what would work?

thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

Ok. . . not a problem at all,.


Use php to scan a directory and create an array of all files. Make sure you use a exclude variable to make sure that the file in you array is not ,

Code: [ Select ]
".."
"."
""
  1. ".."
  2. "."
  3. ""


You don't want to list folders either. So you want to include the isFile() check.

once you have the array of all image locations, then use a simple for statement and loop through the array.

For each variable you will want to echo out a javascript array.

write your own functions to dynamically change the images in the array.

I did this exactl thing with
[url]
http://www.room3art.com
[/url]

Click on Projects. . . . . Then select class, year, subject. .
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

stinger, how did you do that flash gallery spinning thing in your portfolio?
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

Well, I did a lot of research about the flash api, and 3d development in flash. Then I spent a good week writing my own functions and troubleshooting. I found some other flash files very similar to what I have, and I tried to copy their usability.

My biggest break was finding a site that had a demo of a rotating point that grew and shrunk as it went left to right., with explanation of how it works.
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

Would you be able to share the websites you researched?
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

Well, my research was about a year ago. I mainly used google to search out everything I could think of. You can do the same. As you write scripts you will start to develop you own ideas. LOL. Then, you'll find a tutorial of your idea that someone has already done. (If you look long enough)
Quote:
I HIGHLY RECOMMEND YOU LOOKING IN THE FLASH FORUM FOR TUTORIAL SITES.


But heres a few to get you started:

http://flashkit.com/tutorials/
http://www.kirupa.com/
http://www.actionscript.org
http://webmonkey.wired.com/webmonkey/multimedia/shockwave_flash
http://www.macromedia.com/software/flash/productinfo/tutorials
http://www.w3schools.com/flash/default.asp
http://www.tutorialoutpost.com/
http://www.gotoandplay.it/_articles/2004/07/el_cubePerspective.php
THIS HAS GREAT 3D EFFECTS

http://www.cbtcafe.com/flash/index.html


OK, I found all those sites in 1 minutes with a search on google. You can do the same!!!! If you want help/direction,

Quote:
PLEASE POST IN A FLASH FORUM


Good luck

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 67 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.