jQuery ImageHandler2in1 Plugin Demo

Two images are presented here that are both children of a <div> container that serves as the selector to which the function is tied. Since the original width of both images exceed the preset limit of 300 pixel they were automatically scaled down to a width of 300 pixel.

In order to display the images in their original size you just have to click on them. Then the entire page will be covered with a transparent background and a box will appear in the center of the browser window containing the image in its original size.

There are many possibilities to change the appearance of the background as well as the box. For this example I changed the default color of the transparent background from a bluish to a saturated green one.

You can also change the color of the center box and the font style of the caption by adding the respective values to the object literal representing the argument for the function.

And in case you only want to use the image scaling function of the plugin without offering the possibility to display the image in its original size you can indicate that with setting the 'enlarge' option to 'false'.

If you don't want to apply the functionality to all images within a certain parent element but merely to single selected images, you should wrap the images with <span> tags and add the same class name to these tags which than can be used as the selector for calling this function via jQuery.

© 2012 G. Wendt

Color & Font
Color tool

You have difficulties finding a balanced color combination and appropriate font formats for your website?

Use the tool Color & Font on this website in order to interactively create the color and font properties of your own site. The results of your settings can be easily included as CSS listing in your web project.