Manipulating css layers with javascript
I'm wondering if it's possible to have a thumbnail image gallery where clicking on a thumbnail will show the full image in a layer. I was wondering if it is possible to load all layers and corresponding images and use javascript to change the z index or something similar to avoid having to reload or log out of the page. I would rather not use server-side technology, but don't know if this is possible.
edit:
I don't get a "lightbox" solution or anything that overlays on the page, I rather want the image to appear as part of the page and change without reloading the page, basically like the PIctureSlide linked below. But more importanlt, I am wondering if it is easy to write without using a framework and if it will work as I thought above?
source to share
Yes, you can do it without a frame:
<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="document.getElementById('big').style.backgroundImage='url(Big.gif)'"><img border="0" src="images/Thumb.gif" /></a>
Here's a simple example using the Prototype library :
<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="$('big').style.backgroundImage='url(Big1.gif)'"><img border="0" src="thumb1.gif" /></a>
This script assumes large images are 500 x 500 pixels.
Here's an alternative way to do it:
<div id='big'></div>
<a href="javascript://load big image" onclick="loadBig('Big1.gif')"><img border="0" src="thumb1.gif" /></a>
<script type="text/javascript">
function loadBig() {
$('big').innerHTML = "<img src='Big1.gif'>"
}
</script>
source to share
I would recommend GreyBox for this, it's pretty small and works just as well as any other lightbox solution.
However, if you are already using JS framework (Mootools / jQuery / Prototype) on the same page, you can also go for a solution based on it, there are many possibilities to search. If you require a slideshow feature (GreyBox has no AFAIK), I have used Lightbox slideshow (prototype based) with success in the past.
source to share
JQuery should be able to do what you want.
You have several sketches designed with it, for example:
- Picture-slide
- JQuery Popeye (which might be close to what you are looking for)
source to share
Another, perhaps much more complete than lightboxes (even if that's okay), I recommend in general if you're not using jquery or any other library: http://www.mjijackson.com/shadowbox/
source to share
It is possible. You can put all the images in your own div, create a CSS class that hides things, and another that displays images with whatever other settings you want. When someone clicks on the thumbnail, change the class to the appropriate div to show the correct image and hide all the others.
However, there are already a few flash tools out there that will do just that, if you don't mind the requirements of flash.
If you do this with JavaScript, make sure you are using a library like jQuery or Scriptaculas to solve cross-browser problems. I've done something like this once using straight JavaScript and it was a nightmare.
source to share