Visual LightBox
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.