PHP CSS Gallery

princeofpersia · January 20, 2011

Hi guys, I was wondering how to do this, I have the code below where it gets my images from database and it lists them however I need to have a gallery like this http://www.cssplay.co.uk/menu/vertical-slide.html

                                <?php
echo '<table width="40">';

$images=mysql_query("SELECT * FROM img WHERE refimage='$ref'");

while($row = mysql_fetch_array($images))
{
$image=$row['image'];
$thumb=$row['thumb'];

            echo "<a href='$image' rel='lightbox[roadtrip]'><img src= '$thumb' width='60' height='40' alt='$title'>";
                
                }

the code for CSS and html is as below:


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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A Vertical Scrolling Photograph Gallery</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, gallery, galleries, photo, albums, slide, show, scrolling, vertical " />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<link rel="stylesheet" media="all" type="text/css" href="../css/default.css" />

<style type="text/css">
/* defaults required for IE */
a, a:visited, a:hover, a:active, a:focus {color:#000;}

#holder {position:relative; background:transparent url(vertical-slide/photographer.jpg) 90px 0 no-repeat; margin-bottom:10px; width:750px; height:400px;}
#scrollbox {padding:0; margin:0; width:110px; list-style:none; height:360px; overflow:auto; float:right;}
#scrollbox li {float:left;}


#scrollbox a {display:block; color:#999; text-decoration:none; border:1px solid #fff; width:75px; height:56px; float:left; padding:5px; font-family:"trebuchet ms", sans-serif; font-size:24px; text-align:center;}

#scrollbox a.slidea {background:url(vertical-slide/pic1t.jpg) no-repeat center center;}
#scrollbox a.slideb {background:url(vertical-slide/pic2t.jpg) no-repeat center center;}
#scrollbox a.slidec {background:url(vertical-slide/pic3t.jpg) no-repeat center center;}
#scrollbox a.slided {background:url(vertical-slide/pic4t.jpg) no-repeat center center;}
#scrollbox a.slidee {background:url(vertical-slide/pic5t.jpg) no-repeat center center;}
#scrollbox a.slidef {background:url(vertical-slide/pic6t.jpg) no-repeat center center;}
#scrollbox a.slideg {background:url(vertical-slide/pic7t.jpg) no-repeat center center;}
#scrollbox a.slideh {background:url(vertical-slide/pic8t.jpg) no-repeat center center;}
#scrollbox a.slidei {background:url(vertical-slide/pic9t.jpg) no-repeat center center;}
#scrollbox a.slidej {background:url(vertical-slide/pic10t.jpg) no-repeat center center;}
#scrollbox a.slidek {background:url(vertical-slide/pic11t.jpg) no-repeat center center;}
#scrollbox a.slidel {background:url(vertical-slide/pic12t.jpg) no-repeat center center;}


#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:0;}

#scrollbox a:hover {border:1px solid #888;}
#scrollbox a:hover span {width:480px; height:400px; left:90px; background:#fff; z-index:100;}

#scrollbox a:active {border:1px solid #000;}
#scrollbox a:focus {border:1px solid #000; outline:0;}

* html #scrollbox a:active span {width:480px; height:400px; top:0; left:90px; color:#000; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:480px; height:400px; top:0; left:90px; color:#000; background:#fff; z-index:10; outline:0;}

</style>
</head>



/////////////////////////////// AND THIS IS THE HTML


<div id="holder">
<ul id="scrollbox">
<li><a class="slidea" href="#nogo"><span><img src="vertical-slide/pic1.jpg" alt="" /><br />Butterflies</span></a></li>
<li><a class="slideb" href="#nogo"><span><img src="vertical-slide/pic2.jpg" alt="" /><br />Shy</span></a></li>
<li><a class="slidec" href="#nogo"><span><img src="vertical-slide/pic3.jpg" alt="" /><br />Otter</span></a></li>
<li><a class="slided" href="#nogo"><span><img src="vertical-slide/pic4.jpg" alt="" /><br />Looking up</span></a></li>
<li><a class="slidee" href="#nogo"><span><img src="vertical-slide/pic5.jpg" alt="" /><br />Monkey</span></a></li>
<li><a class="slidef" href="#nogo"><span><img src="vertical-slide/pic6.jpg" alt="" /><br />Nuts</span></a></li>
<li><a class="slideg" href="#nogo"><span><img src="vertical-slide/pic7.jpg" alt="" /><br />Pelicans</span></a></li>

<li><a class="slideh" href="#nogo"><span><img src="vertical-slide/pic8.jpg" alt="" /><br />Kiwi</span></a></li>
<li><a class="slidei" href="#nogo"><span><img src="vertical-slide/pic9.jpg" alt="" /><br />Lizard</span></a></li>
<li><a class="slidej" href="#nogo"><span><img src="vertical-slide/pic10.jpg" alt="" /><br />Paddling</span></a></li>
<li><a class="slidek" href="#nogo"><span><img src="vertical-slide/pic11.jpg" alt="" /><br />Trees</span></a></li>
<li><a class="slidel" href="#nogo"><span><img src="vertical-slide/pic12.jpg" alt="" /><br />Butterfly</span></a></li>
</ul>
</div>

What i tried to do was to add div for each image listed from my database, but it wont work. Do you know whats the best way to embed this css to the php query i have?

thanks in advance guys.

princeofpersia · January 20, 2011

anyone?

Sign In

PHP CSS Gallery

Recommended Posts

princeofpersia

Link to comment

Share on other sites

princeofpersia

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information