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