<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>
 

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

Share on Facebook

busy.js: The library allows you to add/remove loading indicators to block-level elements on your webpages.

shiftzoom.js: Allows you to add/remove zoom and pan functionality to oversized images on your webpages.

sphere.js: Simulates a spherical image effect.

corner.js: The script allows you to add individual corners, shadings and shadows to images on your webpages.

glossy.js: Simulates a glossy shaded and beveled button look.

instant.js: Simulates an instant picture look including tilt.

bevel.js: This script allows you to add bevels with individual glowing, shading and shining to images on your webpages.

slided.js: This script allows you to add individual colors, shadings and shadows to images on your webpages.

filmed.js: Simulates a film strip look including reflection.

mapper.js: Emulates native area highlighting.

curl.js: Simulates a page curl image effect.

edge.js: This script allows you to add individual masks (inc. inbuilt mask) to images on your webpages.

reflex.js: Allows you to add individual borders, tiltings and reflections to images on your webpages.

loupe.js: This script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage.

Share on Facebook

First, the javascript function:

function limit(n,id){
        // n is the number of max characters
        // id is the id of the textarea element
	text = document.getElementById(id);
	if(text.value.length >= n){
		//alert("sorry, the text is too long");
		text.value = text.value.substring(0, n-1);
	}
}

Then, the html implementation:

<textarea id="textoalimitar"
onkeypress="limit(10,'textoalimitar');" cols="45" rows="5"
 name="textoalimitar"></textarea>

Share on Facebook

To see more information about this API and learn how to use it, please click here Google AJAX Search API Blog: Introducing the AJAX Language API - Tools for Translation and Language Detection

Share on Facebook