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

Groups > comp.lang.javascript > #15241 > unrolled thread

Image enlargement script procedure?

Back to article view | Back to comp.lang.javascript

Contents

  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

#15241 — Image enlargement script procedure?

Can anyone recommend an image enlarge script?

I find many libraries and solutions including commercial offerings. Perhaps 
the most commonly used Javascript methods are JQuery procedures.

While I do not care for special effects, such as progressive pixel-by-pixel 
enlargements with intervals or semi-transparency etc., I'm simply looking 
for a procedure that will display a large version of an image on the 
current page, with an close [x] typle button or link appearing in the right 
corner, which obviously returns the former pageview when clicked on.

Can anyone recommend any particular scripts or library procedures?

Thanks,
Tuxedo

[toc] | [next] | [standalone]

#15251

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>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web