Reputation: 4203

manipulating css layers with javascript

I am wondering if it is possible to have a sort of thumbnail image gallery, in which clicking on a thumbnail would show the full image in a layer. I was wondering if it was possible to load all layers and respective images and use javascript to change the z index or something similar to avoid having to reload or leave the page. I would prefer to avoid using a server side technology but don't know if this is possible.

edit:

I am not after a "lightbox" solution or anything that overlays the page, I rather want an image to appear as part of the page, and change without reloading the page, basically like PIctureSlide linked below. But more importanlt, I am wondering if this would be easy to write without using a framework, and if it would work as I thought above?

Upvotes: 1

Answers (7)

annakata

Reputation: 75862

Certainly possible though most frameworks will offer you the lightbox you don't want

I always recommend getting the JS to change the object class and letting CSS handle how that is represented, but JS is required for animation if that's what you need

Upvotes: 0

Diodeus - James MacFarlane

Reputation: 114417

Yes, you can do it without a framework:

<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 is 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 that the big images are all 500 x 500 pixels.

Here's an alternate 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>

Upvotes: 2

mike nvck

Reputation: 454

I would recommend GreyBox for this, it is quite small and works as good as any other lightbox solution.

However, if you are already using a JS framework (Mootools/jQuery/Prototype) on the same page, you might as well go for a solution based on it, there is plenty that can be googled. If you specifically require a slideshow function (GreyBox does not have it AFAIK), I have used Slideshow Lightbox (Prototype based) with success in the past.

Upvotes: 1

acrosman

Reputation: 12900

It's possible. You could put all the images in their own div, create a CSS class that hides things, and another that displays the pictures with whatever other settings you want. When someone clicks on athumbnail, change the class on the corresponding div to show the correct image, and hide all the others.

That said, there are already several flash tools that will do just this if you don't mind the flash requirements.

If you do this with JavaScript, make sure you use a library like jQuery or Scriptaculas to help deal with cross-browser issues. I once did something similar using straight JavaScript, and it was a nightmare.

Upvotes: 0

netadictos

Reputation: 7722

Another perhaps far more complete than lightbox (even if it ok), i recommend overall if your not using jquery or any other library: http://www.mjijackson.com/shadowbox/

Upvotes: 0