One image on a page that is a link to launch jquery lightbox inline

Q: How your light box, and most others works is, you click on a photo and it pops up the light box. That photo you clicked on is always also a part of the gallery. What I want to do is have a button that says "view gallery" and when that button is clicked the light box pops open.

A: You can do it in 2 ways:

1. Use the following parameter to hide thumbnails you don't want to display on the page:

style="display: none;"


for example:

<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox">
<a class="vlightbox" href="data/images/9.jpg" title="9">
<img src="data/thumbnails/9.jpg" alt="9"/></a>
<a class="vlightbox" href="data/images/7.jpg" title="7" style="display: none;">
<img src="data/thumbnails/7.jpg" alt="7"/></a>
<a class="vlightbox" href="data/images/10.jpg" title="10" style="display: none;">
<img src="data/thumbnails/10.jpg" alt="10"/></a>
</div>
<!-- End VisualLightBox.com BODY section -->



2. Start VisualLightBox gallery onclick from link or image

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