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.
Yes, it occurs because you are using the same id 2 times. (document.getElementById() returns exactly one element). (When the first element is comment out the second element will be shown. http://jsfiddle.net/7gvNY/4/)
The W3C Guideline say that you have to use one id one times!
So I think you should read the different between ids and classes to avoid your mistake next time.
When you understood the different between ids and classes here is a valid implementation.
To get all elements by a class name, simply use getElementsByClassName() method.
What I think you need to do is create a Javascript function like setDescriptionText(elt_id). Then, in your mouse over event, call this function with the ID of the element that is being hovered over. This function should set the text of the visiblediv (or the div that should have the dynamic/description text, the ids should be unique) based on the ID it is passed in the innerHTML of the div. You will also want to make the div visible here, i.e.:
elt_id.innerHTML = "This is the picture's description, it's super cool!"
elt_id.setAttribute("visibility","visible");
elt_id.setAttribute("display","block");
You should have another function for your onmouseout, something like clearDescriptionText(elt_id). This could consist of the following calls
elt_id.innerHTML = "";
elt_id.setAttribute("visibility","invisible");
elt_id.setAttribute("display","none");
The first will clear out the text (and any other HTML) in the div. The last two will make the element invisible.