SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:


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

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to the site. Your zip is pending approval

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    ^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 )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can view the image here, http://yfrog.com/2cimageproblemj

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sorry but we plain can't work with the PHP. Essentially we have no HTML and that's what we need
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •