Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15251

Re: Image enlargement script procedure?

Show all headers | View raw

Tuxedo wrote:

> Can anyone recommend an image enlarge script?

[...]

In evaluating various image enlargement scripts and methods, I found one 
particular script for displaying a large version of a photo or one of 
several photos on a page, which appears to work very well: 
http://answers.oreilly.com/topic/1823-adding-a-page-overlay-in-javascript/
(I've copied the exact code found on the above page below this post).

In short, the javascript appears to loop through the collection of images 
on a page, assign classes and id's to the 'imgs' variable function in an 
onload call and making all images clickable to display the image overlay. 
Various display properties are predefined in CSS style sets: 1) an overlay 
with a higher than the body's z-index, and 2) the image in a z-index above.

To provide a simple zoom-out procedure, the large display is removed when 
clicked. In all it works, and I can't think of anything else needed to 
simply show a large version of a small image on a page.

I just have some questions someone may be able to answer:

What purpose does focus() fulfill in the onload block? The script seems to 
work with or without:
imgs[0].focus();"

And why is there an onclick as well as onkeydown call assigned to each 
image object for the expandPhoto function?

imgs[i].onclick=expandPhoto;
imgs[i].onkeydown=expandPhoto;

By which key is 'onkeydown' supposed to work?

I can't tab between the images unless they're links anyway. So I tested to 
make them into links by <a href="javascript:void(0);">, which would allow 
me to tab-access each image/link. But if they're not links and if the 
script is not called via the <a href=.. onclick=..." bit, like the 
oreilly.com example, what exactly does the onkeydown event refer to?

As mentioned, in all the script appears very neat and minimal. However, is 
there a better and improved way to build this click to enlarge image 
procedure, without the unnecessary frills that are usually attached to the 
many free-for-all library methods? JQuery etc.

Many thanks for any comments and tips!

Tuxedo


<!DOCTYPE html>
<head>
<title>Overlay</title>
<style>
img
{
  padding: 5px;
}

#outer
{
  width: 100%; height: 100%;
}
.overlay
{
   background-color: #000;
   opacity: .7;
   filter: alpha(opacity=70);
   position: fixed; top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 10;
}
.overlayimg
{
  position: absolute;
  z-index: 11;
  left: 50px;
  top: 50px;
}
</style>
<script>

function expandPhoto() {

   // create overlay and append to page
   var overlay = document.createElement("div");
   overlay.setAttribute("id","overlay");
   overlay.setAttribute("class", "overlay");
   document.body.appendChild(overlay);

   // create image and append to page
   var img = document.createElement("img");
   img.setAttribute("id","img");
   img.src = this.getAttribute("data-larger");
   img.setAttribute("class","overlayimg");

   // click to restore page
   img.onclick=restore;

   document.body.appendChild(img);

}
// restore page to normal
function restore() {

 document.body.removeChild(document.getElementById("overlay"));
 document.body.removeChild(document.getElementById("img"));
}


window.onload=function() {
   var imgs = document.getElementsByTagName("img");
   imgs[0].focus();
   for (var i = 0; i < imgs.length; i++) {
     imgs[i].onclick=expandPhoto;
     imgs[i].onkeydown=expandPhoto;
   }
}

</script>

</head>
<body>
<div id="outer">
  <p>Mouse click on image to expand the photo. To close expanded
photo, mouse click on image.</p>
  <img src="dragonfly2.thumbnail.jpg" data-larger="dragonfly2.jpg"
alt="image of common dragonfly on bright green and pink flowers" />
  <img src="dragonfly4.thumbnail.jpg" data-larger="dragonfly4.jpg"
alt="Dark orange dragonfly on water lily" />
  <img src="dragonfly6.thumbnail.jpg" data-larger="dragonfly6.jpg"
alt="Dark orange dragonfly on purple water lily" />
  <img src="dragonfly8.thumbnail.jpg" data-larger="dragonfly8.jpg"
alt="Dragonfly on bright pink water lily" />
</div>
</body>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

Image enlargement script procedure? Tuxedo <tuxedo@mailinator.com> - 2012-07-31 14:45 +0200
  Re: Image enlargement script procedure? Tuxedo <tuxedo@mailinator.com> - 2012-08-01 19:13 +0200

csiph-web