Member Avatar for pandax

Hello,
I'm not sure about my situation.
As common, I created two pages for my project: gallery.html (thumbnails) -> view.html (photo)

Is it possible for me to view the large photo while i am in gallery page? I mean when I click (a link) on gallery, it will show the photo in new area (center) in the same page?. And the gallery page go grey and disable until I close the photo?
Could anybody help me with it, can I make it with Javascript?
Ths

  • 2 Contributors
  • 4 Replies
  • 80 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by pandax
Member Avatar for langsor

Hi,

I just did this the other day for another post, so I will refer you to that post if you don't mind.
Look at the attached zip file of post #8 of this thread: http://www.daniweb.com/forums/thread138533.html

The core concept is to use a combination of CSS and javascript to get the real dimensions of the browser window and size a div element to those dimensions ... my div has partial opacity, or alpha transparency set so you can see through it a little ... and when you click a thumbnail you show the "mask". You do the same show/hide process with the full-sized image, or if you don't give your mask any transparency, you can set the full-sized image as its background image.

I doubt this is making any sense.

Here's the core code from that other project

<html>
<head>
<style type="text/css">
#mask {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  background: #FFF url(loading.gif) no-repeat 50% 50%;
}

#zoom {
  display: none;
  position: absolute;
  height: 400px; /* adjust to fit */
}
</style>
<!--[if gte IE 5.5]>
<style type="text/css">
#mask {
  filter: Alpha(Opacity=80);
}
</style>
<![endif]-->
<script type="text/javascript">

function toggle_zoom ( image ) {
  var zoom = document.getElementById('zoom');
  var mask = document.getElementById('mask');
  if ( typeof image == 'string' ) {
    var winW = window_width_height()[0];
    var winH = window_width_height()[1];

    mask.style.width = winW + 'px';
    mask.style.height = winH + 'px';
    mask.style.display = 'block';
    mask.onclick = toggle_zoom;

    zoom.src = 'content/' + image;
    zoom.onclick = toggle_zoom;
    
    var images = document.images;
    var loaded = false;
    for ( var i = 0; i < images.length; i ++ ) {
      if ( images[i] == zoom ) {
        var loaded = true;
        zoom_image( zoom, winH, winW );
      }
    }
    if ( !loaded ) {
      zoom.onload = function () {
        zoom_image( zoom, winH, winW );
      };
    }
  } else {
    zoom.style.display = 'none';
    mask.style.display = 'none';
  }
}

function zoom_image ( target, winH, winW ) {
  target.style.visibility = 'hidden';
  target.style.display = 'block';
  
  var height = target.offsetHeight;
  height = ( height > winH ) ? winH -20 : height; // be nice
  target.style.height = height + 'px'; // auto-scales width
  target.style.top = ( winH - target.offsetHeight ) / 2 + 'px';
  target.style.left = ( winW - target.offsetWidth ) / 2 + 'px';

  window.setTimeout( function () {
    target.style.visibility = 'visible';
  }, 200 ); // IE delayed read time ...

function window_width_height () {
  var width = 0, height = 0;
  if ( typeof window.innerWidth == 'number' ) {
    // Moz et.al compatible
    width = window.innerWidth;
    height = window.innerHeight;
  } else if ( document.documentElement && document.documentElement.clientHeight ) {
    // IE 6+ Strict, or returns 0 (thus false)
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  } else if ( document.body && document.body.clientHeight ) {
    // IE 5-7 Quirks, and pray ...
    width = document.body.clientWidth;
    height = document.body.clientHeight;
  }
  return [ width, height ];
}
</script>
</head>
<body>
<div id="mask"></div>
<img id="zoom" src="" />
</body>
</html>

Look this over and then post back with any questions ... :-)

Member Avatar for langsor

Sure, use a link or thumbnail or whatever you want to trigger the function, but look in the toggle_zoom function block for this line and make sure you replace 'content/' with the path to your own images directory.
zoom.src = 'content/' + image;

<a href="javascript:" onclick="toggle_image('my_image.jpg')">My Image</a>

Enjoy

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.