Trouble creating my thumb nail images, desc

Hi,
i am trying to follow this tutorial, http://www.domedia.org/oveklykken/css-photo-gallery.php, and i am trying to create thumbnails of my own images. The problem i am having is with my description. For every 2 images, the description for the last 2 images are bellow the second, as opposed to 1 image and 1 descritpion. Here is my current code:


<div class="imageswrapper">
			    <?php 
			     if( isset($images) )
			    {
 				   $step = 2; // Columns
				   // Big for loop represents 1 whole image
				   for($i = 0; $i < count($images); $i+=$step)
				   {
					  // For loop for picture
					  
					  for($j = 0; $j < $step; $j++)
					  {
 						 if(isset($images[$i+$j]) )
						 {
							echo '<div class="thumb">'; 
							echo '<img src="./images/'.$images[$i+$j]['Filename'].'" width="150" height="100" >';	
							
						 }
					  }
				   
					  // For loop for description
					   
					  for($j=0; $j < $step; $j++)
					  {
						 
						if(isset($images[$i+$j]) )
						 {
							echo '<div class="thumbdesc">';
 							
							// Error here on this line somewhere???
							echo '<b>Description:</b>'.$images[$i+$j]['Description'] ."<br>";
							echo '</div>';
							echo '</div>';
						 }
 					  }	
					  
				   }   
					    
			    }
			    
			    ?>   
				   
			    </div>

 

css:



...

.imageswrapper
{
    margin: 3px;
    border: 1px solid #330066;
    height: 669px;
    overflow: hidden;
    text-align: center;
    float: left;
}


.thumb
{
    margin: 3px;
    border: 1px solid #ff8000;
    padding: 0px;
    height: auto; 
    text-align: center;
}

.thumb img
{
   display: inline;
    margin: 5px;
    border: 1px solid red;
    padding: 0px;
 
}

.thumbdesc
{
    text-align: center;
border: 1px solid black;
     
}
... rest of code skiped



Ideally what i would like to have is the ‘thumb’ div encapsulating 1 whole image including the text description, where the .thumb img encompassing the image(which seems to work fine) and the .thumbdesc taking the descriptino. I’ve uploaded a word file to show you the problem.

OK good, cos i did post it there, i thought maybe i was posting my issue in the wrong area.

When you said generated source code i did not know what you meant, sorry, but now i do.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	      <title> Shanghai Trip 2010</title>
	      <link rel="stylesheet" type="text/css" href="style_V1.css" />
		
	      <meta http-equiv="content-type"
				content="text/html; charset=utf-8"/>
	</head>
	<body>
	      <div id="wrapper">
		     <div id="header">
			    <h1> SHANGHAI TRIP 2010 </h1>
		     </div> 
        
		     <div id="navigation">
			    <ul>
				   <li><a href="default.php">Home</a></li>
				   <li><a href="shanghaizoo.php">Shangai Zoo</a></li>
				   <li><a href="chenghuangtmpl.php">Cheng Huang Temple</a></li>
			    </ul>
			    
        
		     </div>
		     
		     <div id="content">
			    <p>
				Hi, welcome to my site, here you will be able to see a wide variety of holiday pictures taken while
				I was in Shanghai 2010 during the Summer holidays. You will also be able to see what it was like in
			    The Shanghai World Expo to places such as Shanghai Financial center. 
				   
			    </p>
			    
			    <div class="imageswrapper">
			    <div class="thumb"><img src="./images/IMG_0075.JPG" width="150" height="100" ><div class="thumb"><img src="./images/IMG_0109.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Temple Area Market</div></div><div class="thumbdesc"><b>Description:</b>side view</div></div><div class="thumb"><img src="./images/IMG_0111.JPG" width="150" height="100" ><div class="thumb"><img src="./images/IMG_0196.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Dragon Head</div></div><div class="thumbdesc"><b>Description:</b>snake</div></div><div class="thumb"><img src="./images/IMG_0214.JPG" width="150" height="100" ><div class="thumb"><div class="thumbdesc"><b>Description:</b>Monkey</div></div></div>   
				   
			    </div>
 
			     
		     </div> 
        
		     <div id="footer">
			    FOOTER
        
		     </div> 
	      
  
	      </div>
		 
			 
			  
		    
		 
	</body>
</html>





Hope that helps now.

Sorry but we plain can’t work with the PHP. Essentially we have no HTML and that’s what we need

Again…there is PHP there. Please just give us the generated source of the file. Hit view source in your browser when the page is laoded to get taht source.

PHP does us no good

And no you shouldn’t have posted the issue in the PHP forum.

^That.

Also we can’t really work with the PHP your zip file is probably to have. We need the generated source.

A live link would be much easier given we can get all the code we need and have the ease of online testing.

I don’t know if it’s also just me but your explanation is alright, but my brain isn’t comprehending it (it’s one of those things where I’d need to see to help :p)

Hi i appreciate your help so far. I think i’m getting closer to my desired output. After reading what you had said, i started to play around with my inner loops, and what i have done is removed the second inner j loop to become this:

i know you don’t read PHP code, but i just though i would show you what i’m doing so far:


 if( isset($images) )
			    {
 				   $step = 2; // Columns
				   // Big for loop represents 1 whole image
				   for($i = 0; $i < count($images); $i+=$step)
				   {
					  // For loop for picture
					  
					  for($j = 0; $j < $step; $j++)
					  {
							
 						 if(isset($images[$i+$j]) )
						 {	echo '<div class="thumb">'; 
							echo '<img src="./images/'.$images[$i+$j]['Filename'].'" width="150" height="100" >';	
							echo '</div>';
							
							echo '<div class="thumbdesc">';
							echo '<b>Description:</b>'.$images[$i+$j]['Description'];
							echo '</div>';
							
						 }
					  }
				    
					  
				   }   
					    
			    }


Here is my updated generated source:


..... other html code skipped


			    <div class="imageswrapper">
			    <div class="thumb"><img src="./images/IMG_0075.JPG" width="150" height="100" ></div><div class="thumbdesc"><b>Description:</b>Temple Area Market</div><div class="thumb"><img src="./images/IMG_0109.JPG" width="150" height="100" ></div><div class="thumbdesc"><b>Description:</b>side view</div><div class="thumb"><img src="./images/IMG_0111.JPG" width="150" height="100" ></div><div class="thumbdesc"><b>Description:</b>Dragon Head</div><div class="thumb"><img src="./images/IMG_0196.JPG" width="150" height="100" ></div><div class="thumbdesc"><b>Description:</b>snake</div><div class="thumb"><img src="./images/IMG_0214.JPG" width="150" height="100" ></div><div class="thumbdesc"><b>Description:</b>Monkey</div>   
				   
			    </div>
 
			     
		     </div> 

.... other html code skiped

 

Right now, the description for my images are now actuallly underneath each of their respective images 1 by 1, but now the image description is not wrapped around my .div class=thumb, there are on a div on their own.

Thanks, nvidia, that is indeed generated HTML. A View Source in a browser will show you the HTML the browser sees.

Unfortunately, it is indeed a PHP problem (your markup is bad, but because you’re not writing it by hand, it’s a PHP problem). You are on the right track. I can’t read PHP but the problem is indeed here:


 if(isset($images[$i+$j]) ) {
    echo '<div class="thumb">';
    echo '<img src="./images/'.$images[$i+$j]['Filename'].'" width="150" height="100" >';   
 }
}
 for($j=0; $j < $step; $j++) {
     if(isset($images[$i+$j]) ) {
        echo '<div class="thumbdesc">';
[b]// Error here on this line somewhere???[/b]
        echo '<b>Description:</b>'.$images[$i+$j]['Description'] ."<br>";
        echo '</div>';
        echo '</div>'; 

You are opening a div, and then instead of closing it if it has no description, you are opening yet another div. I think maybe your second for loop should be inside the first (but not sure). So you are getting nested divs and I’m sure the tut was intending you make it like so:

<div>
<img…>
</div>

<div>
<img…>
description because available
</div>

<div>
<img…>
Descript
</div>

You see? Your loops are doing this

<div>
<img…>
… <div>
<img…>
desc
desc
</div>
</div>

The div here is nothing more than something that holds each image together with its description, so you want just one per image/description pair.

Anybody?
UPDATE: When i removed my thumb and thumbdesc div, and leave the page with my .imageswrapper div, it looks like this:
http://yfrog.com/f/j6pagewithimageswrapperonj/, now i’m guessing do you think i would need to modify the imageswrapper div before adding the thumb and thumdesc div?

UPDATE:

I looked at my code,


 if(isset($images[$i+$j]) )
						 {	echo '<div class="thumb">'; 
							echo '<img src="./images/'.$images[$i+$j]['Filename'].'" width="150" height="100" >';	
							echo '</div>';
							
							echo '<div class="thumbdesc">';
							echo '<b>Description:</b>'.$images[$i+$j]['Description'];
							echo '</div>';
							
							
						

and noticed that i was closing the first <div> before my description part. I just added that div after the end of the description which NOW FINALLY encompasses the image AND my description. HAPPY DAYS!!! :):slight_smile:

Thanks guys, i think that by having the second j loop, it was creating the nested divs.

My apoligise, at present my application is on my local host machine, the zip file actaully contains a screen dumb of the problem and the code is on my first post. However, i did upload the file on the following link, hope that helps a little

http://www.megaupload.com/?d=FU8J1YH7

The full HTML code for the whole page is here:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	      <title> Shanghai Trip 2010</title>
	      <link rel="stylesheet" type="text/css" href="style_V1.css" />
		
	      <meta http-equiv="content-type"
				content="text/html; charset=utf-8"/>
	</head>
	<body>
	      <div id="wrapper">
		     <div id="header">
			    <h1> SHANGHAI TRIP 2010 </h1>
		     </div> 
        
		     <div id="navigation">
			    <ul>
				   <li><a href="default.php">Home</a></li>
				   <li><a href="shanghaizoo.php">Shangai Zoo</a></li>
				   <li><a href="chenghuangtmpl.php">Cheng Huang Temple</a></li>
			    </ul>
			    
        
		     </div>
		     
		     <div id="content">
			    <p>
				Hi, welcome to my site, here you will be able to see a wide variety of holiday pictures taken while
				I was in Shanghai 2010 during the Summer holidays. You will also be able to see what it was like in
			    The Shanghai World Expo to places such as Shanghai Financial center. 
				   
			    </p>
			    
			    <div class="imageswrapper">
			    <?php 
			     if( isset($images) )
			    {
 				   $step = 2; // Columns
				   // Big for loop represents 1 whole image
				   for($i = 0; $i < count($images); $i+=$step)
				   {
					  // For loop for picture
					  
					  for($j = 0; $j < $step; $j++)
					  {
 						 if(isset($images[$i+$j]) )
						 {
							echo '<div class="thumb">'; 
							echo '<img src="./images/'.$images[$i+$j]['Filename'].'" width="150" height="100" >';	
							echo '</div>';
						 }
					  }
				   
					  // For loop for description
					   
					  for($j=0; $j < $step; $j++)
					  {
						 
						if(isset($images[$i+$j]) )
						 {
							echo '<div class="thumbdesc">';
       	 
							echo '<b>Description:</b>'.$images[$i+$j]['Description'] ."<br>";
							echo '</div>';
							
						 }
 					  }	
					  
				   }   
					    
			    }
			    
			    ?>   
				   
			    </div>

			     
		     </div> 
        
		     <div id="footer">
			    FOOTER
        
		     </div> 
	      
  
	      </div>
		 
			 
			  
		    
		 
	</body>
</html>



Should I have posted this issue on the php side?

You can view the image here, http://yfrog.com/2cimageproblemj

Do you have a link to the site. Your zip is pending approval