Jump to content

Photo gallery help


muckerz

Recommended Posts

Hey guys!

 

Hope i'm posting this in the right place!

 

I'm making a simple site with an image gallery.

 

using some simple code i found after a quick google, i've got a gallery all set up and working.

I'm trying to tweak it to what i need, but getting nowhere fast  :(

 

have a look at the gallery here

 

What i'm trying to do is have each image display on its own line, instead of having 3 images per line.

Once I've accomplished that, I want to move the title and description to the right hand side of the image and add a line break inbetween the two.

 

Here's the code i've got so far for displaying the images...

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname) or die ("Error selecting the database");

function cleanString($caption="")
{
	$removeunderscore = str_replace("_"," ",$caption);
	$removedash = str_replace("-"," ",$removeunderscore);
	$removedimensions = str_replace("1366x768","",$removedash);
	$cleanstring = str_replace(".jpg","",$removedimensions);	
	return $cleanstring;
}
$sql = "SELECT  * FROM photos ORDER BY id ASC";
$query = mysql_query($sql);
while($row = mysql_fetch_array($query))
{
	$file = $row['photo_name'];
	$title = $row['title'];
	$description = $row['description'];
	
	echo '<div id="container">
  			<div id="thumbnail"><a href="uploads/'. $file .'"  title="'.cleanString($title).'" class="thickbox"><img src="thumbnails/thumb_'.$row['id'].'.jpeg" width="282" height="158" alt="image" /></a></div>
  		    <div id="info"><strong>' .cleanString($title).cleanString($description).'</div><br>
		  </div>';
}
?>
<div class="clear"></div>
</div>

This page calls CSS from two CSS files...

 

style.css

and

thickbox.css

 

So can anyone point me in the right direction?

I'm not too hot with CSS, which is a shame as i'm sure its the key here.

 

Thanks in advance guys!!!!

 

 

 

Link to comment
Share on other sites

 

What i'm trying to do is have each image display on its own line, instead of having 3 images per line.

Remove the    float: left; from #container css definition.

 

 

Once I've accomplished that, I want to move the title and description to the right hand side of the image

First increase the width or remove it (    width: 282px;)  for #container css definition

 

And then remove the float from #thumbnail and #info. Set them to display as inline.

#thumbnail, #info {
  display: inline;
}

 

and add a line break inbetween the two.

Change

 

cleanString($title).cleanString($description)

 

to

 

cleanString($title) . '<br />' . cleanString($description)

 

NOTE: When using CSS ids should be only be used once. You should be using classes instead.

Edited by Ch0cu3r
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.