| Author | Message |
John Richardson
15 posts
Location: United Kingdom Occupation: Age: |
#13 02-02-2010 09:52 GMT |
|
The problem to provide an easy to use and maintain photo gallery. Gallery images can be placed in the gallery folder the contents of which are processed by php to automatically update and build the base links on the fly. The rest of the gallery is powered by the JQuery Library and Lightbox extension, lets look at the main page which includes all the code you need.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Innovative Technology Gallery</title>
<!-- Load the jQuery library and Jquery Lightbox extension -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!-- Lightbox specific styling css -->
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- Javascript to initialize the gallery -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<!-- main page static styling -->
<style type="text/css">
/* Gallery style */
#main {
background-color: #993333;
padding: 100px;
width: 600px;
}
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
#title {
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
color: #fff;
font-size:24px;
font-style:normal;
font-stretch:expanded;
font-weight:normal;
}
#subtext {
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
color: #fff;
font-size:14px;
font-style:normal;
font-stretch:expanded;
font-weight:normal;
}
</style>
</head>
<body >
<center>
<div id="main"><p id="title" >Innovative Technology Gallery</font></p>
<div id="gallery">
<ul>
<?php //php script to build gallery links on the fly
$dir="images"; //the folder containing your images
if ($dir_list = opendir($dir)){
while(($filename = readdir($dir_list)) !== false){
$pos = strpos($filename,"lightbox-"); //exclude images starting with this string
if($pos === false) {
if(strlen($filename) > 2){?> //exclude the . and .. from the dir listing
<li>
<a href="<?php echo $dir."/".$filename; ?>" title="<?php echo $filename; ?>">
<img src="<?php echo $dir."/".$filename; ?>" width="72" height="72" alt="" />
</a>
</li>
<?php } } } closedir($dir_list); } ?>
</ul>
</div>
<p id="subtext">Innovative Technology inspired by the environment</p>
</div>
</center>
</body>
</html>
Copy and paste the code above into your page, see an example and get the JQuery librarys and CSS from Download Lightbox JQuery and CSS filesCreate an easily maintainable professional style gallery for your web. |
|
Welcome!
Copyright © 2010 Innovative Technology
( The business 4 Innovative Technology )
( The business 4 Innovative Technology )
Page created in 0.127 seconds