I am creating a gallery which loads all images within the images folder. The gallery uses PHP. I have this working exactly how I want. It creates each div and assigns each an individual id. However to the right of this I wish to have a area where if you hover over any image, a description will appear in this area.
I've come up empty on my search so far, so this was the next port of call.
I was able to get a single div element to show/hide but when it comes to multiple I just can't work it out.
That is just me testing it out.
<html>
<body>
<script>
function mover(){
document.getElementById("visiblediv").style.display="block";
}
function mout() {
document.getElementById("visiblediv").style.display="none";
}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
This div is visible
</div>
<div id = "div2" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
Doesn't work because using same id?
</div>
</body>
</html>
Here is the PHP and HTML I have so far that generates the gallery and assigns individual ids. I'm using the gallery code from http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/ which uses Lightbox 2 http://lokeshdhakar.com/projects/lightbox2/
<?php
# SETTINGS
$max_width = 150;
$max_height = 150;
$counter = 1;
function getPictureType($ext) {
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function getPictures() {
global $max_width, $max_height;
if ( $handle = opendir('images/gallery/') ) {
$lightbox = rand();
echo '<ul id="pictures">';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir('images/'.$file) ) {
$split = explode('.', 'images/gallery/'.$file);
$ext = $split[count($split) - 1];
if ( ($type = getPictureType($ext)) == '' ) {
continue;
}
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
if ( ! file_exists('thumbs/'.$file) ) {
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg('images/gallery/'.$file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng('images/gallery/'.$file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif('images/gallery/'.$file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = $oldW * ($max_width / $oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, 'thumbs/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, 'thumbs/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
global $counter;
echo '<li id="image'.$counter.'"><a href="'.'images/gallery/'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<img src="thumbs/'.$file.'" alt="" />';
echo '</a></li>';
$counter++;
}
}
echo '</ul>';
}
}
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--LINKS-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/mueseomain.css">
<!--PORTFOLIO ONLY LINKS-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
#pictures li {
float:left;
height:<?php echo ($max_height + 15); ?>px;
list-style:none outside;
width:<?php echo ($max_width + 15); ?>px;
text-align:center;
}
#image_area img {
border:5px solid white;
outline:1px solid #ccc;
}
</style>
<!--SCRIPTS-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!--PORTFOLIO ONLY SCRIPTS-->
<script type="text/javascript" src="js/gallery/prototype.js"></script>
<script type="text/javascript" src="js/gallery/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/gallery/lightbox.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="content_wrapper1">
<?php include 'includes/header.php'; ?>
</div>
<div id="content_wrapper2">
<div id="image_wall">
<div id="image_area">
<?php getPictures(); ?>
</div>
<div id="description_area">
<p id="text" class="image1">kasdjfbksdjfhsdfhsdjldfbgsdkfsdklfsdf
ashdfgaskfhgsdjkfhsdlfjkhasdlfkhsdlfkhsdlfj
aksfbhaskdjfhsdjlfhsdlkfhsdlfkhsdlfhsdlfk<?php echo $counter ?></p>
</div>
</div>
</div>
<div id="footer_wrapper">
<?php include 'includes/footer.php'; ?>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
So simply, I would like to make it so on mouseover of each image a div with text which is specific to that image appears in the description area and upon mouseout disappears.
If I haven't made anything clear enough, please let me know.
