How we could cause modal lightbox images to be shown when the user selects a hotspot on website image?

Q: Could you provide a kind of example to show us how we could cause a couple of images to be shown in a lightbox when the user selects a hotspot on our website image?

A: You should:

1. Create and install one page galleries with unique IDs.
To specify id for the gallery go to
Gallery->Properties->Publish: Gallery ID

2. Add the following function to the <head></head> section of your web page:

<script type="text/javascript">
var started;
var galid;

function showLightBox(galid) 
  { 
    if (started) return;
    started = setTimeout(function(){
        Lightbox.start(document.getElementById(galid));
        started;
    },500);
  }
function stopShowLightBox(){
    if (started) {
        clearTimeout(started)
        started = 0;
    }
  }  
</script>



3. Set the ID for any image in each your gallery (for example id="first" for the first
gallery, id="second" for the second gallery),
you can add it to the first image of each gallery:

<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/england.jpg" title="England" id="first">
...
<!-- End VisualLightBox.com BODY section -->

<!-- Start VisualLightBox.com BODY section id=2 -->
<div id="vlightbox2">
<a class="vlightbox2" href="data/images2/brotherslounging.jpg" title="Brothers Lounging" id="second">
...
<!-- End VisualLightBox.com BODY section -->



4. Specify links for the hot spots:

<map name="planetmap">
  <area shape="rect" coords="0,0,109,107" href = "javascript:showLightBox('first')" onMouseOut="javascript:stopShowLightBox()" style="cursor: pointer"/>
  <area shape="rect" coords="180,131,541,264" href = "javascript:showLightBox('second')" onMouseOut="javascript:stopShowLightBox()" style="cursor: pointer"/>
 </map>



5. Use 'display: none;' property for your gallery in engine/css/vlightbox1.css and
vlightbox2.css to hide thumbnails. Just change the following code:

#vlightbox1 .vlightbox1 {
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
        *display:inline;
        position:relative;
        vertical-align:top;
        margin:3px;
        width:160px;
        font-family:Trebuchet,Tahoma,Arial,sans-serif;
        font-size:11px;
        font-weight:normal;
        text-decoration:none;
        text-align:center;
        opacity:0.87;
}



to:

#vlightbox1 .vlightbox1 {
        display:-moz-inline-stack;
        display:none;
        zoom:1;
        *display:none;
        position:relative;
        vertical-align:top;
        margin:3px;
        width:160px;
        font-family:Trebuchet,Tahoma,Arial,sans-serif;
        font-size:11px;
        font-weight:normal;
        text-decoration:none;
        text-align:center;
        opacity:0.87;
}



That's seems to be all.

Recent Questions »

Related