views:

537

answers:

7

Hello,

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?

A: 

JQuery should be able to make what you want.

You have multiple thumbnails developped with it, like:

VonC
+1  A: 

There are plenty of thumbnail image gallerys around to bother writing one yourself unless you have a specific need. such as

http://www.huddletogether.com/projects/lightbox/

Static Tony
Popeye is actually an alternative to lightbox, with a better integration in the web page
VonC
A: 

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/

netadictos
+1  A: 

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.

mike nvck
+1  A: 

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.

acrosman
Thankyou, I was mainly interested in understanding how it would work. How would you make a link change the class of a separate div?
Joshxtothe4
Use the onClick() attribute of the link. "...href='#' onClick='ShowImage(4); return false;'..."
acrosman
I'm guessing ShowImage is a function...I mean what would the function actually do to change the class?
Joshxtothe4
That depends on what library you use, or if your doing it in straight JS. With jQuery you'd use something like:$("CSS_ID_Of_Place_Holder_Div").html('<img src="path/to/image/'+id+'.jpg">');It sounds like you need to spend some time learning JavaScript.
acrosman
I am trying to avoid using a framework, and wanted to do it straight in JS. It is one thing knowing the language, and another understanding the logic.
Joshxtothe4
+3  A: 

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>
Diodeus
Hey Thanks, I am starting to understand. Although the thirs example does not work for me. The first one does, but how would I change it so I can change it back to text. I made an attempt with the code here: http://www.nomorepasting.com/getpaste.php?pasteid=22222 and I am not sure why it doesnt work.
Joshxtothe4
You need to pass strings to your function. You're passing variables. Try: onclick="sbox('test1', 'test2'); return false;"
Diodeus
Also, you should be using "." for your class names, not "#". Using "#" assigns the style to a DIV name, and is not a class.Like this: .test1 {...} and your DIV should have:<div class='test1' id="test1">...</div>
Diodeus
A: 

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

annakata