Simple Modal Div for Images, using prototype and scriptaculous

Posted by david on January 19, 2009 Leave a comment (1) Go to comments

I know that everyone knows Lightbox JS and Lightbox JS 2 and frankly those 2 libraries works very nice. But let's do something simplier using (also) prototype and scriptaculous.

Aligning vertically and horizontallya div.

This is very important and we can use it in many ways. First the css code:

 
<style type="text/css">
body, html {height: 100%; width:100%; margin: 0; z-index: -1;}
#outer {height: 90%; width: 90%; overflow: hidden; position: fixed; top: 0%; left: 0%; right: 0%; bottom: 0%; width: 100%; z-index: 999;}
#outer[id] {display: table; }
#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: left;} /* for explorer only */
#inner {margin-left: auto; margin-right: auto;} /* for all browsers*/
/* optional: #inner[id] {position: static;} */
/* just format */
div.grayBorder {border: 1px solid #ccc; background-color: ivory;}
</style>

Now, we need the html code:

 
<div id="outer" style="display: none;">
<div id="middle">
<div id="inner" class="grayBorder">
					any text<br/>
					<b>any height, set width,</b><br/>
					any content, for example generated from DB everything is both vertically and horizontally centered
				</div>
</div>
</div>

We use "display" as "none" because we won't display this div.

Now, "the magic", the javacript code:

<script type="text/javascript">
			var imagenes = $$('img.SimpleImageModal');
			imagenes.each(function(item){
				item.setAttribute('onclick','mostrarImagen(\''+item.src+'\')');
			});
</script>

We need to put this code at the end.

The final step is use a common class name for the tag, someting like this:

 
<div id="imagenes">
				<img class="SimpleImageModal" src="images/25331-night4.jpg" width="160" height="120" alt="Imagen Uno" title="Imagen Uno"/>
				<img class="SimpleImageModal" src="images/37590-greenz2.jpg" width="160" height="120" alt="Imagen Dos" title="Imagen Dos"/>
				<img class="SimpleImageModal" src="images/treesmistblank.jpg" width="256" height="192" alt="Imagen Tres" title="Imagen Tres"/>
</div>