Update image gallery dynamically

Rygar48 · 4th December 09, 05:30 PM

Hey everyone,

I am currently in the process of creating an image gallery for a site. I would like to set up some kind of loop that looks in the right folder, sees how many files (images) are in there, and creates the correct image tag for each in the html code.

Instead of just manually writing in the image tag myself, is there a way to do this outside of the html in a loop? That way, if I wanted to update the gallery it would be as simple as deleting a file, or uploading a new image, and the loop would know to include the extra file.

So, what would be the easiest way to accomplish this?/what tutorials should I be searching for? I wasn't really sure where to start. I'm familiar with html and css, and a little javascript. I understand php syntax, but I don't really have a grasp on what I can/can't do with it yet.

Thanks for the help!

rkrause · 4th December 09, 06:45 PM

You could do this with flash and / or xml code. Can you post an example of the type of gallery? I may have a script or two that will fit your need.

Ryan.

Rygar48 · 4th December 09, 07:14 PM

Thank you for the quick reply!

Here is a test site: http://www.tenbuckstheatre.com/test/past_shows.html

Let me know if you have any trouble with it. I've only worked with it in Safari thus far, though I looked briefly in Firefox and IE.

Also, currently (as I'm just testing things out) there is only content under "2007" and "As You Like It". That's where you'll find the two images. Each year usually has about 3 shows, and each show would have a brief description at the top, followed by 20-30 images. Currently, my html looks like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ten Bucks Theatre Company</title>
<link rel="stylesheet" type="text/css" href="sub_page.css" />
<script language="JavaScript" src="scripts/motionpack.js"></script>
<script src="scripts/PopBox.js" type="text/javascript"></script>
<script type="text/javascript">
popBoxWaitImage.src = "images/popbox/spinner40.gif";
popBoxRevertImage = "images/popbox/magminus.gif";
popBoxPopImage = "images/popbox/magplus.gif";
</script>

<!--[if lt IE 7]>
<style type="text/css">
div#insert {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/insert.png' ,sizingMethod='crop');
}
div#logo_alt {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/TB2.png' ,sizingMethod='crop');
float:none;
}
</style>
<![endif]-->



  </head>

<body>

<div id="wrapper">

    <div id="header">
    <div id="logo_alt"></div>
        <div class="nav">
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="ensemble.html">Ensemble</a></li>   
                <li><a href="now_playing.html">Now Playing</a></li>
                <li><a href="auditions.html">Auditions</a></li>
                <li><a href="find.html">Find Us</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="past_shows.html">Past Shows</a></li>
            </ul>
            </div><!-- end nav -->
    </div><!-- end header -->

    <div id="insert"></div>

    <div id="content_about"><br /><br />
<div class="season_container">
<div id="2009" style="display:none; overflow:hidden; height:95px;"><h3>
    <div id="pinter" style="display:none; overflow:hidden; height:75px;"><h3>This is where the Pinter info goes</h3></div>
    <a href="javascript:;" class="show" onmousedown="toggleSlide('pinter');">Pinter</a></h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2009');">2009</a>

<div id="2008" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2008 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2008');">2008</a>

<div id="2007" style="display:none; overflow:hidden; height:215px;"><h4>
    <div id="as you" style="display:none; overflow:hidden; height:195px;"><h3>Below you will find some stills from the show!<br />
        <img id="imgAsYou3" alt=""
        src="images/archive/as you like it 1a.jpg"
        pbsrc="images/archive/as you like it 1b.jpg"
        class="PopBoxImageSmall"
        title="Click to magnify/shrink"
        onclick="Pop(this,15,'PopBoxImageLarge');" />

        <img id="imgAsYouallen" alt=""
        src="images/archive/allen_towelb.jpg"
        pbsrc="images/archive/allen_towel.jpg"
        class="PopBoxImageSmall"
        title="Click to magnify/shrink"
        onclick="Pop(this,15,'PopBoxImageLarge');" />
</h3></div>
    <a href="javascript:;" class="show" onmousedown="toggleSlide('as you');">As You Like It</a></h4></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2007');">2007</a>

<div id="2006" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2006 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2006');">2006</a>

<div id="2005" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2005 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2005');">2005</a>

<div id="2004" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2004 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2004');">2004</a>

<div id="2003" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2003 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2003');">2003</a>

<div id="2002" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2002 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2002');">2002</a>

<div id="2001" style="display:none; overflow:hidden; height:95px;"><h3>This is where the 2001 info goes</h3></div>
<a href="javascript:;" class="season" onmousedown="toggleSlide('2001');">2001</a>

</div><!-- end container -->

    </div><!-- end content -->


</div><!-- end wrapper -->
    
</body>
</html>

As you can see, I had to do an image tag per image...but if I have 20 shots per show, 3 shows per year...you can see why I don't want to write everything manually in html. Let me know what you think

rkrause · 4th December 09, 07:38 PM

See PM... Also, i would look at doing that as tabbed gallery down the side versus across the top... It all doesn't fit and looks out-of-place.

Ryan.

Rygar48 · 5th December 09, 05:16 PM

Thanks for the help Ryan, it's much appreciated!

One more question though, on the php side of things, is there a way to change the name of an array based on a variable? In other words:

I have a variable being passed to my php file, and depending on which show is "active" on the webpage, the $id will change (current values are "macbeth", "pinter", "twelfth", etc)

I then have an array, but it isn't working at the moment because every show is using the same array name (current $files). Is there a way, perhaps using a switch statement, that the array name could change based on what the $id is?

In case you need the code, here it is:

Code:

	<?php
                              function detect ($id)
                           {
                                    switch ($id) {
    	                           case 'pinter':
		        $pinter = array ();
        		        return $pinter;
        			break;
    	                           case 'twelfth':
		        $twelfth = array ();
        		        return $twelfth;
        			break;
    	                           case 'original':
		        $original = array ();
        		        return $original;
        			break;
    	                           case 'ayli':
		        $ayli = array ();
        		        return $ayli;
        			break;
    	                           case 'dinner':
		        $dinner = array ();
        		        return $dinner;
        			break;
    	                           case 'macbeth':
		        $macbeth = array ();
        		        return $macbeth;
        			break;
			}
		
		/* settings */
		$image_dir = 'images/archive/';
                                    $image_dir .= $id;
                                    $image_dir .= "/";
		$per_column = 4;
		
		
		/* step one:  read directory, make array of files */
		if ($handle = opendir($image_dir)) {
			while (false !== ($file = readdir($handle))) 
			{
				if ($file != '.' && $file != '..') 
				{
					if(strstr($file,'-thumb'))
					{
					detect ($id) = $file;
					}
				}
			}
			closedir($handle);
		}
		
		/* step two: loop through, format gallery */
		if(count(detect ($id)))
		{
			foreach(detect ($id) as $file)
			{
				$count++;
				echo '<a class="photo-link" rel="one-big-group" href="',$image_dir,str_replace('-thumb','',$file),'"><img src="',$image_dir,$file,'" width="100" height="100" /></a>';
				if($count % $per_column == 0) { echo '<div class="clear"></div>'; }
			}
		}
		else
		{
			echo '<p>There are no images in this gallery.</p>';
		}
		
	?>

I've highlighted the problematic areas in red. The original file (which I found online) had no switch statement, and used $files[] instead of the red highlighted areas, but like I said, if each show is using the same array name, they get confused (one show thought it should have the pictures of the previous show when I tested it out)

4th December 09, 05:30 PM	#1
Rygar48 WLC Member Join Date: Aug 2009 Posts: 28	Update image gallery dynamically Hey everyone, I am currently in the process of creating an image gallery for a site. I would like to set up some kind of loop that looks in the right folder, sees how many files (images) are in there, and creates the correct image tag for each in the html code. Instead of just manually writing in the image tag myself, is there a way to do this outside of the html in a loop? That way, if I wanted to update the gallery it would be as simple as deleting a file, or uploading a new image, and the loop would know to include the extra file. So, what would be the easiest way to accomplish this?/what tutorials should I be searching for? I wasn't really sure where to start. I'm familiar with html and css, and a little javascript. I understand php syntax, but I don't really have a grasp on what I can/can't do with it yet. Thanks for the help!

4th December 09, 06:45 PM	#2
rkrause WLC Mod Join Date: Sep 2009 Posts: 883	Re: Update image gallery dynamically You could do this with flash and / or xml code. Can you post an example of the type of gallery? I may have a script or two that will fit your need. Ryan.

4th December 09, 07:38 PM	#4
rkrause WLC Mod Join Date: Sep 2009 Posts: 883	Re: Update image gallery dynamically See PM... Also, i would look at doing that as tabbed gallery down the side versus across the top... It all doesn't fit and looks out-of-place. Ryan.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode