-3

Is it possible to prevent the larger image from being out of focus, after clicking the thumbnail image? 

 'use strict';
  var my_image,
    my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
    y = document.getElementById('LargeImage');
  function PreloadImage(theElement) {
    my_image = new Image();
    my_image.onload = ShowLargeImage(my_imageSrc);
    my_image.src = my_imageSrc;
  }
  function ShowLargeImage(strImgSource) {
   if (my_image.complete) {
    y.src = strImgSource;
    y.style.display = 'block';
   }
  }
  function ShowThumbnail() {
   y.style.display = 'none';
  }
div.gallery img{
 height: 70px;
 width: 140px;
} 
#LargeImage{ 
 display: none;
 height:100vh;
 left:0px;
 position:absolute;
 top:0px;
 width:100vw;
} 
 <div class="gallery"><img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg"onclick="PreloadImage(this)"></div>
 <img src="" id="LargeImage" onclick="ShowThumbnail()">
Filler! Filler! Filler!
Zuffa
  • 3
  • 1
  • 5
  • you have to keep aspect ratio – tech2017 Jul 21 '17 at 12:46
  • 3
    Instead of adding "Filler! Filler! Filler!" at the end of your post, could you please add a little more info regarding your question? – Luca Kiebel Jul 21 '17 at 12:46
  • What is 'aspect ratio'? What more info is needed? – Zuffa Jul 21 '17 at 12:49
  • giving 100vw width and 100vh height, you are stretching the image. remove either width or height css and see difference. see this also https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio – tech2017 Jul 21 '17 at 12:55
  • The purpose is to fill the screen, and the image at the url is much bigger than the screen. – Zuffa Jul 21 '17 at 13:03

1 Answers1

0

Here you are:

'use strict';
var my_image,
 my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
 y = document.getElementById('LargeImage');
function showImage(){
 var stats = document.getElementById('stats'),
  y = document.getElementById('LargeImage');
 stats.innerHTML = 'Ready, rendering...';
 while(!y.complete){
  setTimeout(function() {showImage()}, 10);
 }
 y.style.display = 'block';
 setTimeout(function() {stats.innerHTML = '';}, 3000);
 
}
function PreloadImage(theElement) {
 var my_image,
  my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',
  stats = document.getElementById('stats'),
  y = document.getElementById('LargeImage');
 stats.innerHTML = 'Loading...';
 y.style.display = 'none';
 my_image = new Image();
 my_image.src = my_imageSrc;
 y.src = my_imageSrc+"?"+Date.now();
}
function ShowThumbnail() {
 var y = document.getElementById('LargeImage');
 y.style.display = 'none';
}
div.gallery img{
 /*height: 70px;*/ /* EDIT - commented to keep aspect ratio */
 width: 140px;
} 
#LargeImage{ 
 display: none;
 /*height:100vh;*/ /* EDIT - commented to keep aspect ratio */
 left:0px;
 position:absolute;
 top:0px;
 width:100vw;
}
 <div class="gallery">
  <img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" onclick="PreloadImage(this)">
 </div>
 <span id="stats"></span>
 <img src="" id="LargeImage" onclick="ShowThumbnail()" onload="showImage()">

Once your image have a width higher than height you need to set only the new width and let the browser do the trick with the new height

EDIT

and if you don't want scroll bars when the large image comes up, add to your css(consider the snippet scope):

/* this will avoid the scroll bar */
body{overflow:hidden}

EDIT 2

if the width of the image needs to fit the screen/page:

'use strict';
var my_image,
 my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
 y = document.getElementById('LargeImage');
function showImage(){
 var stats = document.getElementById('stats'),
  y = document.getElementById('LargeImage');
 stats.innerHTML = 'Ready, rendering...';
 while(!y.complete){
  setTimeout(function() {showImage()}, 10);
 }
 y.style.display = 'block';
 setTimeout(function() {stats.innerHTML = '';}, 3000);
 
}
function PreloadImage(theElement) {
 var my_image,
  my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',
  stats = document.getElementById('stats'),
  y = document.getElementById('LargeImage');
 stats.innerHTML = 'Loading...';
 y.style.display = 'none';
 my_image = new Image();
 my_image.src = my_imageSrc;
 y.src = my_imageSrc+"?"+Date.now();
}
function ShowThumbnail() {
 var y = document.getElementById('LargeImage');
 y.style.display = 'none';
}
div.gallery img{
 /*height: 70px;*/ /* EDIT - commented to keep aspect ratio */
 width: 140px;
} 
#LargeImage{ 
 display: none;
 /*height:100vh;*/ /* EDIT - commented to keep aspect ratio */
 left:0px;
 position:absolute;
 top:0px;
 width:100%;
}
 <div class="gallery">
  <img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" onclick="PreloadImage(this)">
 </div>
 <span id="stats"></span>
 <img src="" id="LargeImage" onclick="ShowThumbnail()" onload="showImage()">
yanntinoco
  • 152
  • 7