How do I use lightbox jquery example code multiple time on one site?

Q: How do I use lightbox galleries multiple time on one site?
I want to create about 10 different VLB galleries,
each would be on a separate page but on one website.

A: You can do it in 2 ways:

I. If you want to use separate galleries of the same style on the different pages
of your website you should for each next gallery:

1) Open Gallery->Properties->Publish;
2) Enable 'Multi Galleries Mode';
3) Specify unique Id for the gallery and set comma-separated list of IDs
you already used for other galleries on your site.

See the attached screenshot.

II. If you want use different styles (templates and settings) for your galleries
you should save each gallery in its own directory, for example:

gal1/
gal2/
gal3/
index.html
...

But notice that you should manually add 'gal1/' prefix before each path on your html page
(in html code for lightbox gallery):

<!-- Start VisualLightBox.com HEAD section -->
        <link rel="stylesheet" href=" gal1/engine/css/vlightbox1.css" type="text/css" />
        <link rel="stylesheet" href=" gal1/engine/css/visuallightbox.css" type="text/css" media="screen" />
        <script src=" gal1/engine/js/jquery.min.js" type="text/javascript"></script>
        <script src=" gal1/engine/js/visuallightbox.js" type="text/javascript"></script>
        <script src=" gal1/engine/js/vlbdata.js" type="text/javascript"></script>
        <!-- End VisualLightBox.com HEAD section -->
...
        <!-- Start VisualLightBox.com BODY section id=1 -->
        <div id="vlightbox1">
        <a class="vlightbox1" href=" gal1/data/images1/2.jpg" title="2"><img src=" gal1/data/thumbnails1/2.jpg" alt="2"/></a>
        <a class="vlightbox1" href=" gal1/data/images1/3.jpg" title="3"><img src=" gal1/data/thumbnails1/3.jpg" alt="3"/>
        </a><a class="vlb" style="display:none" href="http://visuallightbox.com">Photo Gallery Creator by VisualLightBox.com v4.3.2</a>
        </div>
        <!-- End VisualLightBox.com BODY section -->

Recent Questions »

Related