Can I put a lightbox or image map within a lightbox?

Question

I've had a look around but haven't managed to find what I'm looking for.

Basically, I've got an image on a page that uses a jquery lightbox to make it larger and easier to view. In addition to this, with the original lightbox active, I now need 'hot spots' on that image that either generate a tooltip when hovered on, or a seperate relatively positioned lightbox when clicked on.

The type of look I'm after can be seen on the Create Bikes website if you click on a bike and go to a product page.

Been playing around but can't for the life of me work it out - does anyone know if this is even possible or able to point me in the direction of any sites that already have something like this implemented?

Edit:

Ok, as suggested, I've put some existing code in here which I hope helps.

This block of code is typical of where the lightbox is used with the class lightbox-image calling the script. The lightbox used is Colorbox.

<p>
<a href="images/search-wheel-big.png" title="This is where the title goes"class="lightboxElement lightbox-image" rel="lightbox-image">
    <img class="c-right" alt="alt tag here" src="testimonials_files/SearchWheel.png">
</a>
Some text here
</p>

When the lightbox is loaded, <div> tags that then appear include the below, with the <img> tag generated by the Colorbox script (it disappears again when the lightbox is closed):

<div id="lightboxContent" style="float: left; width: 500px; height: 554px;">
    <div id="lightboxLoadedContent" style="display: block; width: 500px; overflow: auto; height: 507px;">
        <img class="lightboxPhoto" src="images/search-wheel-big.png" style="float: none;">
    </div>
    <div id="lightboxLoadingOverlay" class="" style="height: 554px; display: none;"></div>
    <div id="lightboxLoadingGraphic" class="" style="height: 554px; display: none;"></div>
    <div id="lightboxTitle" class="" style="display: block;">This is where the title goes</div>
    <div id="lightboxCurrent" class="" style="display: none;"></div>
    <div id="lightboxNext" class="" style="display: none;"></div>
    <div id="lightboxPrevious" class="" style="display: none;"></div>
    <div id="lightboxSlideshow" class="" style="display: none;"></div>
    <div id="lightboxClose" class="" style="">close</div>
</div>

I then thought I'd be able to just put a jquery command saying something like:

    $(".lightboxPhoto").each(function(){
        $(this).append("<div class='hotspot'></div>");
    });

I was hoping this I could do this multiple times (for the different 'hotspots' on the image that can in turn be clicked / hovered on for additional info) and insert a relatively positioned background image in each <div> tag.

However, nothing happens in the code, could this be something to do with the fact the the <div> tags themselves are generated by the .js file and not in my original html? Would I need to edit the .js file myself??

Edit 2 - the solution!

Hi All!

So I just thought I'd add in here what I did in the end in case someone else is looking to create the same effect.

As suggested by Chris, I used the inline command that works with the colorbox lightbox. Instead of using a tooltip though, I took an idea from the create bikes website (see one of their product pages) and entered the following html code:

<div style="display:none">
    <div class="example1">
        <div class="example2">This is where the title goes</div>
        <div class="example3">
            <span class="example4"></span>
            <div class="example5">
                <h5 class="example6">Header text here</h5>
                <p class="example7">Some more text here</p>
            </div>
        </div>
    </div>
</div>

The <span> tag and <div> tag with class of example5 both had a background image. With this <div> tag having a default state of display:none I wanted it to change to display:block when the <span> tag image was hovered on. I did this using the follow line of css:

span.example4:hover + div.example5 { display: block; }

Works like a dream! Just bear in mind this css won't work in IE6 or less

Answer 1

Absolutely possible. Here's how I would do it:

1. Use a lightbox plugin like this one here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto. This is clever as it allows you to have not just an image loaded into a lightbox, but a div or other content. This isn't the only one it's just one I've used in the past.

2. Inside the div which is loaded into the lightbox (when you click a bike) I would have two parts: an image and a collection of tags which make up the buttons. Position the image absolutely in the background, and the buttons also absolutely positioned but in the place you want (ie. top: 200px; left: 183px).

3. Then, on the buttons use this plugin http://www.vertigo-project.com/files/vTip/example.html which will give you a hover tooltip, all contained within the lightbox.

I'm afraid I do not have any code as it's quite a bit of work but the theory is all sound (listen to me getting all big headed) so you should be able to make something work. Maybe try similar plugins in case those two in particular clash but I see no reason why they should.

Good luck!

Edit:

Not quite.

The method I've described does not use the basic image load. Instead, it loads up a div on your page into your lightbox. Inside this div you can have the image (in the background) and then your buttons positioned on top.

See the Inline HTML link (second from bottom) on this page: http://colorpowered.com/colorbox/core/example1/index.html. A div is placed elsewhere on the page and hidden. The plugin then loads the contents of the div into the lightbox when the link is pressed.

As it is a traditional div, you can have whatever content inside that you want: more divs, images, links etc. So inside this div load in an image (position: absolute; top: 0; left: 0; z-index: 10) and then some buttons on top (position: absolute; top: 50px; left: 50px; z-index: 20). The table on this page http://colorpowered.com/colorbox/ has a row with inline that explains how to do it.