I want click one image to start the simple lightbox

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;
}

Recent Questions »

Related