princeofpersia Posted January 23, 2011 Share Posted January 23, 2011 Hi guys, I am geeting images from a query but can not figure out how to show these images in a css gallery, I have found links of css gallery but dont know how to embed it or tell css to work with php, i am a newbie and cant figure it out this is my php code where i get the images listed 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'>"; echo "<img src= '$thumb' width='60' height='40' alt='$title'>"; } but if i want to have a css gallery like http://www.cssplay.co.uk/menu/vertical-slide.html which the css and html code 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> thanks in advance guys Quote Link to comment Share on other sites More sharing options...
jcbones Posted January 23, 2011 Share Posted January 23, 2011 Let us know if you have more problems. <?php include('config.php'); //You must have a database connection. $images=mysql_query("SELECT * FROM img WHERE refimage='$ref'"); ?> <!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;} <?php $a = 'a'; while($r = mysql_fetch_assoc($images)) { echo '#scrollbox a.slide' . $a++ . ' {background:url(vertical-slide/' . $r['thumb'] . ') no-repeat center center;}' . "\n"; } mysql_data_seek($images,0); ?> #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> <body> <div id="holder"> <ul id="scrollbox"> <?php $a = 'a'; while($r = mysql_fetch_assoc($images)) { echo '<li><a class="slide' . $a++ . '" href="#nogo"><span><img src="vertical-slide/' . $r['image'] . '" alt="" /><br />' . $r['title'] . '</span></a></li>' . "\n"; } ?> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
princeofpersia Posted January 23, 2011 Author Share Posted January 23, 2011 I have the CSS galery in my page but it doesnt load the images, any ideas? Quote Link to comment Share on other sites More sharing options...
princeofpersia Posted January 23, 2011 Author Share Posted January 23, 2011 btw in my code, i have the connection running fine, I am also able to load the images listed in page but when it comes to embed them with CSS im in troule Quote Link to comment Share on other sites More sharing options...
jcbones Posted January 24, 2011 Share Posted January 24, 2011 Post the code you have now. All I did was took the code's provided, and worked them into the css layout, un-tested. Pretty sure it is close, but a look at your code would resolve the issue. Quote Link to comment Share on other sites More sharing options...
princeofpersia Posted January 25, 2011 Author Share Posted January 25, 2011 i have sent you the code Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.