Visual LightBox
I want click one image to start the jquery gallery responsive
Q: I want to add a 3 image slide show to my home page. Your instructions tell me how to
insert into a pre existing html page but that is not what I am looking for.
I want the image to appear in its template, ready to click. When Visual Light Box publishes the slideshow to a place on the page, it puts all the images and you click one to start the slide show. I want only one image to display within it's frame template and I want it to
be full size, not a thumbnail. Can you please tell me the steps necessary to accomplish this??
A: You can start VisualLightBox gallery onClick.
You should:
1) Add the following function into the <head> tag:
<script type="text/javascript">
var started;
function showLightBox()
{
if (started) return;
started = setTimeout(function(){
Lightbox.start(document.getElementById('firstImage'));
started;
},500);
}
function stopShowLightBox(){
if (started) {
clearTimeout(started)
started = 0;
}
}
</script>
2) Specify the onClick event for the image or link:
<img src="data/thumbnails/purple1.jpg.png" onMouseOver="javascript:showLightBox()" onMouseOut="javascript:stopShowLightBox()" style="cursor: pointer;">
or
<a href = "javascript:showLightBox()" onMouseOut="javascript:stopShowLightBox()" style="cursor: pointer;">Click to start Lightbox gallery</a>
3) Set the ID for any image in your gallery (id="firstImage"), for example add it to the first image:
<a class="vlightbox" href="data/images/2.jpg" title="2" id="firstImage">
4) Use 'display: none;' property for your gallery in engine\css\vlightbox1.css. Just change the following code:
.vlightbox {
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:
.vlightbox {
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;
}