Search code examples
jquerylightboxonloadslidepageload

Jquery Lightbox - How to pop up a specific slide on page load?

I have a page with 8 thumbnails, which when clicked pop up a jquery lightbox holder, which then allows the user to next and prev through 2-3 images. Each thumbnail has its own 2-3 slide gallery.

What I need is when a text link is clicked on the page from the navigation panel, it takes the user to the page with the lightbox and pops up the right slide for that link automatically on page load.

You can see a work in progress here > http://www.logoflair.com/concept1/print.html

Here is the code I am using for the lightbox and 2 thumbnails in the body: 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>

 <script type='text/javascript'>  
 var $jq132 = jQuery.noConflict();  
 </script>

   <script type="text/javascript">
$jq132(function() {
    $jq132('#belgo1 a').lightBox(); 
    $jq132('#versace1 a').lightBox();
    $jq132('#etv1 a').lightBox();
    $jq132('#versace2 a').lightBox();
    $jq132('#belgo2 a').lightBox();
    $jq132('#belgo3 a').lightBox();
    $jq132('#versace3 a').lightBox();
    $jq132('#fatpets a').lightBox();
    $jq132('#moschino a').lightBox();
    $jq132('#bay a').lightBox();
    $jq132('#sayhoo a').lightBox();
});
</script>

<body>

   <div id="belgo1" class="galleries">
        <a href="belgo1.jpg"><img src="belgothumb.jpg" alt="" width="232" height="189"         border="0"/></a>
        <a class="hidden" href="belgo2.jpg"><img src="belgothumb.jpg" alt="" width="232" height="189" border="0"/></a>
        <a class="hidden" href="belgo3.jpg"><img src="belgothumb.jpg" alt="" width="232" height="189" border="0"/></a>
       </div>



   <div id="versace1" class="galleries">
        <a href="versace1.jpg"><img src="versacethumb.jpg" alt="" width="232" height="189" border="0"/></a>
        <a class="hidden" href="versace2.jpg"><img src="versacethumb.jpg" alt="" width="232" height="189" border="0"/></a>
       </div>

 </body>

Please let me know what the code is to auto load a specific slide when the page loads. Many Thanks

Solution

  • You can try to simulate click on specified thumbnail image:

    $('#thumbnailId').click();

    For example according to your code paste this line at end of your main function:

    $jq132('#etv1 a').eq(0).click();