David Tavarez's Home at davidtavarez.com » CSS http://www.davidtavarez.com Just another weblog... Sat, 31 Jul 2010 16:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.0 Simple Modal Div for Images, using prototype and scriptaculous http://www.davidtavarez.com/archives/simple-modal-div-for-images-using-prototype-and-scriptaculous/ http://www.davidtavarez.com/archives/simple-modal-div-for-images-using-prototype-and-scriptaculous/#comments Mon, 19 Jan 2009 18:14:35 +0000 david http://www.davidtavarez.com/?p=350 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:
  1.  
  2. <style type="text/css">
  3. body, html {height: 100%; width:100%; margin: 0; z-index: -1;}
  4. #outer {height: 90%; width: 90%; overflow: hidden; position: fixed; top: 0%; left: 0%; right: 0%; bottom: 0%; width: 100%; z-index: 999;}
  5. #outer[id] {display: table; }
  6. #middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
  7. #middle[id] {display: table-cell; vertical-align: middle; position: static;}
  8. #inner {position: relative; top: -50%; text-align: left;} /* for explorer only */
  9. #inner {margin-left: auto; margin-right: auto;} /* for all browsers*/
  10. /* optional: #inner[id] {position: static;} */
  11. /* just format */
  12. div.grayBorder {border: 1px solid #ccc; background-color: ivory;}
  13. </style>
  14.  

Now, we need the html code:

  1.  
  2. <div id="outer" style="display: none;">
  3. <div id="middle">
  4. <div id="inner" class="grayBorder">
  5. 					any text<br/>
  6. 					<b>any height, set width,</b><br/>
  7. 					any content, for example generated from DB everything is both vertically and horizontally centered
  8. 				</div>
  9. </div>
  10. </div>
  11.  

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

Now, "the magic", the javacript code:

  1. <script type="text/javascript">
  2. 			var imagenes = $$('img.SimpleImageModal');
  3. 			imagenes.each(function(item){
  4. 				item.setAttribute('onclick','mostrarImagen(\''+item.src+'\')');
  5. 			});
  6. </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:

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

And that's it!! Take a look to the complete example working here: SimpleImageModal Demo.

]]> http://www.davidtavarez.com/archives/simple-modal-div-for-images-using-prototype-and-scriptaculous/feed/ 1