jQuery simple show/hide large image from thumbnail click

Question

I've got the latest version of jquery library installed and just want a simple lightbox effect (preferably without having to install any additional libraries).

When a thumbnail image from my carousel widget (jcarousel lite) is clicked, I want to show a full size image of that same image in a closable window and grey out the background.

I'd also like to apply this same behavior to a simple thumbnail that's not part of the carousel widget.

Any ideas?

Answer 1

I would go with the jqueryui dialogs:

http://jqueryui.com/demos/dialog/

Answer 2

I Like jQuery Tools. Granted, it's another library, but well worth it! I include this library in MOST of my web projects.

Just pop this line into your HEAD tag, and it also includes the jQuery Lib.

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"&gt;&lt;/script&gt;

Once that's done, just use the Overlay library. I use this to pop-up images, forms, or anything else.

Essentially, you just create a div:

<div id="image1" class="modalBox">
    <h2>Title</h2>
    content
</div>

Style it:

.modalBox {
    background-color:#fff;
    display:none;
    width:350px;
    padding:15px;
    text-align:left;
    border:2px solid #600;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
    position:fixed;
    _position:absolute;
}
.modalBox h2 {
    background:url(images/logoac.png) no-repeat;
    margin:0px;
    padding:10px 0 10px 110px;
    border-bottom:1px solid #333;
    font-size:20px;
    color:#600;
    font-family:calibri, hevetica, tahoma, arial;
    text-align:right;
}

Create a JS function to popup divs

var api;
function showDiv(v){
    if (api)  //close any pop-ups that might already be open
        if (api.isOpened)
            api.close();

    if (!document.getElementById(v)) return;

    api=$('#'+v).overlay({
        mask: {color: '#000000'},   
        top:'0px',
        api: true           
    }).load();
}

Then When you click a "link" just call:

showDiv('image1'); //change image1 to the name of the div with your content

There are even a handful of nice animations and effect to go along with the library (like the Apple Effect and the Drop Effect

Highly customizable and highly useful!