How can I begin a pure css image gallery from a single text link?

Q: I have bought your application.
How can I begin a lightbox slideshow from a single text link?

A: You can start VisualLightBox onClick from the text link/image:

1) Add the following function into the <head> tag:

<script type="text/javascript">
function showLightBox() 
{ Lightbox.start(document.getElementById('firstImage'));}
</script>



2) Specify the onClick event for the link:

<a href="javascript:showLightBox()">LINK</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\vlightbox.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: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;
}



Try this.

Recent Questions »

Related