How to enlarge the image with a close button in my site?

Hi all,
I want to enlarge images in my site with a close button, by clicking on zoom link/button.
How to do this?
Can any one help me regarding this with an example code.

Thanking you…

What you’re looking for is lightbox, and it’s implemented in JavaScript. :slight_smile:

or if you want more of a plain vanilla solution then this demo displays image thumbnails and when you click a thumbnail, its enlargement will zoom in next to it.

If you want to play with it, just insert your own test pics in the imgPaths array at the top.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<style type="text/css">
.thumb_containers {
 position: relative;
.enlargements {
 position: absolute;
    top: 0px;
    left: 200px;
    display: none;
<script  type="text/javascript">
var imgPaths = ['pic1.jpg','pic3.jpg'];  //paths to thumbnail images
var thumbWidth = 100;     //width of thimbnail to display
var enlgeMaxWidth = 300;    //width of enlargement to display
var timer;  //setInterval variable
var currImgWidth = 0;  //leave this alone
var widthIncr = 1;  //pixels
var zoomStep = 5;  //milliseconds
//preload the images
var imgO = new Array();
for(var i=0; i < imgPaths.length; i++) {
     imgO[i] = new Image();
    imgO[i].src = imgPaths[i];
window.onload=function() {
 //get the thumb and enlargement objetcs
 var thumbsO = getElementsByClassName(document, 'img', 'thumbs');
    enlargementsO = getElementsByClassName(document, 'img', 'enlargements');
    //assign properties to the thumbs and enlargements objects
 for(var i=0; i < thumbsO.length; i++) {
        thumbsO[i].src = imgO[i].src;
        thumbsO[i].width = thumbWidth;
        thumbsO[i].id = 'p'+i;
        enlargementsO[i].src = imgO[i].src;
        enlargementsO[i].id = 'e'+i;
        //assign an onclick to each thumb
        thumbsO[i].onclick=function() {
            currImgWidth = 0;
         //hide all the enlargements
         for(var i=0; i < enlargementsO.length; i++) {
             enlargementsO[i].style.display = 'none';
            //show and zoom in this enlargement
            var enlgeO = document.getElementById('e''p')[1]);
            enlgeO.width = '0';
   = 'inline';
            timer = setInterval(function(){zoomIn(enlgeO)},zoomStep);
} //end of onload fn
//function to zoom in the enlargement
function zoomIn(imgO) {
 currImgWidth += widthIncr
    if(currImgWidth > enlgeMaxWidth) {
          currImgWidth = 0;
    } else {
     imgO.width = currImgWidth;
function getElementsByClassName(oElm, strTagName, strClassName) {
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\\-/g, "\\\\-");
    var oRegExp = new RegExp("(^|\\\\s)" + strClassName + "([\\\\s|$](file:///s:$))");
    var oElement;
    for(var i=0; i<arrElements.length; i++)
        oElement = arrElements[i];
    return (arrReturnElements)
<div class="thumb_containers">
    <img class="thumbs" src="" alt=""  /> 
    <div><img class="enlargements" src="" alt="" /></div>
<div class="thumb_containers">
    <img class="thumbs" src="" alt="" />
    <div><img class="enlargements" src="" alt="" /></div>