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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
.thumb_containers {
 position: relative;
}
.enlargements {
 position: absolute;
    top: 0px;
    left: 200px;
    display: none;
}
</style>
<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() {
         clearTimeout(timer);
            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'+this.id.split('p')[1]);
            enlgeO.width = '0';
            enlgeO.style.display = '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) {
          clearTimeout(timer);
          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];
        if(oRegExp.test(oElement.className))
        {
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}
</script>
</head>
<body>
 
<div class="thumb_containers">
    <img class="thumbs" src="" alt=""  /> 
    <div><img class="enlargements" src="" alt="" /></div>
</div>
 
<div class="thumb_containers">
    <img class="thumbs" src="" alt="" />
    <div><img class="enlargements" src="" alt="" /></div>
</div>
 
</body>
</html>