Back To Programming / Scripting / Coding Forum

A function to display images in a folder for a gallery

  • Vedette
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jul 01, 2004
  • Posts: 7
  • Status: Offline

Post July 24th, 2004, 4:00 pm

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

Post July 24th, 2004, 4:00 pm

  • stinger
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jan 22, 2004
  • Posts: 157
  • Loc: San Jose, CA
  • Status: Offline

Post July 25th, 2004, 11:30 am

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
  • No Avatar
  • Joined: Feb 13, 2004
  • Posts: 1243
  • Loc: UK
  • Status: Offline

Post July 26th, 2004, 7:59 am

stinger, how did you do that flash gallery spinning thing in your portfolio?
GSDomains.com -Click here - Packages starting from £3.69 a month. 1.5GB Space & 10GB Bandwidth.
  • stinger
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jan 22, 2004
  • Posts: 157
  • Loc: San Jose, CA
  • Status: Offline

Post July 26th, 2004, 9:21 am

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
  • No Avatar
  • Joined: Feb 13, 2004
  • Posts: 1243
  • Loc: UK
  • Status: Offline

Post July 28th, 2004, 7:24 am

Would you be able to share the websites you researched?
GSDomains.com -Click here - Packages starting from £3.69 a month. 1.5GB Space & 10GB Bandwidth.
  • stinger
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jan 22, 2004
  • Posts: 157
  • Loc: San Jose, CA
  • Status: Offline

Post July 28th, 2004, 8:15 am

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 130 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.