Whether I can create my own thumbnails in jquery lightbox

Q: I just wanted to make the proposal to add a new option to Visual Lightbox.
Could it be possible to get the option to install just one thumbnail with a
gallery of photos behind that one thumb or/and even just behind a
text-link?

A: Actually it is possible in the current version of Visual LightBox. You can do it in 2 ways:

I. You can 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 id=1 -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/589097_d64e4094eb_z.jpg" title="589097_d64e4094eb_z"><img src="data/thumbnails1/589097_d64e4094eb_z.jpg" alt="589097_d64e4094eb_z"/></a>
<a class="vlightbox1" href="data/images1/789024_ca9db7318c_z.jpg" title="789024_ca9db7318c_z" style="display: none;"><img src="data/thumbnails1/789024_ca9db7318c_z.jpg" alt="789024_ca9db7318c_z"/></a>
<a class="vlightbox1" href="data/images1/92782951_510374b896_z.jpg" title="92782951_510374b896_z" style="display: none;"><img src="data/thumbnails1/92782951_510374b896_z.jpg" alt="92782951_510374b896_z"/></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">jQuery Modal Popup by VisualLightBox.com v4.9</a>
</div>
<!-- End VisualLightBox.com BODY section -->


II. You can start VisualLightBox gallery onClick from link/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;
}



Try that.

Recent Questions »

Related