Trouble creating my thumb nail images, desc

**nvidia123** · Sep 21, 2010 05:16

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:

Code PHP:

<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:

Code:

...

.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.

**donboe** · Sep 21, 2010 06:05

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

**RyanReese** · Sep 21, 2010 06:09

^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

)

**nvidia123** · Sep 21, 2010 10:12

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

**nvidia123** · Sep 21, 2010 12:58

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

**nvidia123** · Sep 22, 2010 03:39

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?

**RyanReese** · Sep 22, 2010 07:47

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

**nvidia123** · Sep 22, 2010 12:25

The full HTML code for the whole page is here:

Code:

<!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?

**RyanReese** · Sep 22, 2010 16:12

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.

**nvidia123** · Sep 23, 2010 04:46

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.

Code HTML4Strict:

<!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.

**Stomme poes** · Sep 23, 2010 06:51

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:

Code:

 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">';
// Error here on this line somewhere???
        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.

**nvidia123** · Sep 23, 2010 08:28

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:

PHP Code:


 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:

Code HTML4Strict:

..... 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.

**nvidia123** · Sep 23, 2010 08:31

UPDATE:

I looked at my code,

Code PHP:

 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!!!

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

User Tag List

Thread: Trouble creating my thumb nail images, desc

Thread Tools

Display

Trouble creating my thumb nail images, desc

Bookmarks

Bookmarks

Posting Permissions