stackoom
  简体   繁体   中英

Resize image when pop up

 原文  2015-08-27 13:31:09  1   1    javascript/ html/ css

Question

I want to resize the image to bigger than the original size when the I click on the images. link http://plnkr.co/edit/JBTE1RAEZburUTRkVrLE?p=preview . This sample when click on image, it is pop up but the same the original size. How can I set it bigger.

Below the Code: 

 // Code goes here function view(src) { var viewer = document.getElementById("viewer"); viewer.innerHTML ='<img src="' + src + '" id="img"/>'; var img = document.getElementById("img"); var iw=0, ih=0; var dw=0, dh=0; img.onload=function(){ document.getElementById("ov").style.display="block"; viewer.style.display="block"; document.getElementById("nav").style.display="block"; iw = viewer.offsetWidth; ih = viewer.offsetHeight; dw = window.innerWidth; dh = window.innerHeight; viewer.style.top = parseInt(dh/2-ih/2) + "px"; viewer.style.left = parseInt(dw/2-iw/2) + "px"; }; } function hide2() { document.getElementById("viewer").style.display="none"; document.getElementById("ov").style.display="none"; document.getElementById("nav").style.display="none"; } 
 /* Styles go here */ ul.image-list{ padding:0; margin: 0; list-style: none; } ul.image-list li{ display: inline-block; } ul.image-list li img{ width: 190px; min-width: 70px; transition: all ease 0.4s; } ul.image-list li img:hover{ cursor: pointer; opacity: 0.5; border: 1px solid #000; } .pup { width: 100%; height: 100%; background: #666; opacity: 0.7; position: fixed; top: 0px; left: 0px; z-index: 111; display: none; } .viewer{ background: #666; padding: 12px; position: fixed; z-index: 222; text-align: center; display: none; } #nav{ display: none; z-index: 333; color: #FFF; position: relative; cursor: pointer; text-align: center; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="script.js"></script> </head> <body> <div class="container-fluid gallery"> <div class="row-fluid"> <div class="col-sm-12"> <h3 class="text-info">Photo Gallery</h3> </div> </div> <div class="row-fluid"> <div class="col-sm-12"> <ul class="image-list"> <li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> <li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> <li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> <li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> </ul> <div class="slider-controls" id="nav"> <span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span> <span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span> </div> </div> </div> </div> <div class="pup" id="ov" onclick="hide2()"> </div> <div class="viewer"id="viewer"> </div> </body> </html>

1 answers

solution1
 1 ACCPTED  2015-08-27 13:42:33

By assigning the desired size of images to the div .viewer like below .viewer img{width:600px} you are forcing images to resize to the to fit the size wanted. below the working snippet. 

 // Code goes here function view(src) { var viewer = document.getElementById("viewer"); viewer.innerHTML ='<img src="' + src + '" id="img"/>'; var img = document.getElementById("img"); var iw=0, ih=0; var dw=0, dh=0; img.onload=function(){ document.getElementById("ov").style.display="block"; viewer.style.display="block"; document.getElementById("nav").style.display="block"; iw = viewer.offsetWidth; ih = viewer.offsetHeight; dw = window.innerWidth; dh = window.innerHeight; viewer.style.top = parseInt(dh/2-ih/2) + "px"; viewer.style.left = parseInt(dw/2-iw/2) + "px"; }; } function hide2() { document.getElementById("viewer").style.display="none"; document.getElementById("ov").style.display="none"; document.getElementById("nav").style.display="none"; } 
 /* Styles go here */ ul.image-list{ padding:0; margin: 0; list-style: none; } ul.image-list li{ display: inline-block; } ul.image-list li img{ width: 190px; min-width: 70px; transition: all ease 0.4s; } ul.image-list li img:hover{ cursor: pointer; opacity: 0.5; border: 1px solid #000; } .pup { width: 100%; height: 100%; background: #666; opacity: 0.7; position: fixed; top: 0px; left: 0px; z-index: 111; display: none; } .viewer{ background: #666; padding: 12px; position: fixed; z-index: 222; text-align: center; display: none; } #nav{ display: none; z-index: 333; color: #FFF; position: relative; cursor: pointer; text-align: center; } .viewer img{ width:600px; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="script.js"></script> </head> <body> <div class="container-fluid gallery"> <div class="row-fluid"> <div class="col-sm-12"> <h3 class="text-info">Photo Gallery</h3> </div> </div> <div class="row-fluid"> <div class="col-sm-12"> <ul class="image-list"> <li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> <li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> <li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> <li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> </ul> <div class="slider-controls" id="nav"> <span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span> <span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span> </div> </div> </div> </div> <div class="pup" id="ov" onclick="hide2()"> </div> <div class="viewer"id="viewer"> </div> </body> </html>

I also suggest adding the following code so you can have it responsive on mobile for better surfing: 

@media screen and (max-width: 600px) {
  .viewer{
    width:100%;
  }
  .viewer img{
    width:100%;
  }
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to resize the Invisible RECAPTCHA Image Select Pop Up Frame pop up window with info when image is clicked pop up screen when click on image Image not able to pop up when using Modal Image overlaying pop-up when animated Pop Up HTML Image when clicked resize <a role> pop up window Pop up div shinks on browser resize Create pop-up message on javascript when mouseover on image? Pop-up window when clicking on an image in my HTML page
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM