Question

I am trying to use a lightbox plugin from within tabbed content. It works fine on tab one but doesn’t on the rest. can’t figure it out. any help appreciated.

Here is the html css and jquery:

<div class="tabbedPanels" id="tabbed1">

<ul class="tabs">

  <li><a href="#panel1" tabindex="1">Hand Tools</a></li>
  <li><a href="#panel2" tabindex="2">Power Tools</a></li>
  <li><a href="#panel3" tabindex="3">Accessories</a></li>
  <li><a href="#panel4" tabindex="4">Decorating</a></li>
  <li><a href="#panel5" tabindex="5">Safety</a></li>


</ul>

<div class="panelContainer">

<div id="panel1" class="panel">

<h2>Panel 1 content</h2>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>&nbsp;</p>

<div id="images" class="images">

  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>
  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>



</div><!--End of .images-->

</div><!--End of panel 1-->​

<div id="panel2" class="panel">

<h2>Panel 1 content</h2>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>&nbsp;</p>

<div id="images" class="images">

  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>
  <a href="#" title="Click for larger image"><img src="#" alt="some img"></a>



</div><!--End of .images-->

</div><!--End of panel 2-->​

</div><!--End of panel container-->

<style type="text/css">

/* Begin tabbed content styles */

.tabbedPanels {

    width: 98%;
    margin-right: auto;
    margin-left: auto;
    display: block;

}

.tabs {

    margin: 0!important;
    padding: 0; 
    zoom : 1;
}

.tabs li {

    float: left;
    list-style: none;
    padding: 0;
    margin: 0 !important;
    font-weight: bold;
}

.tabs a {
    display: block;
    text-decoration: none;
    padding: 3px 5px;
    background-color: #EEE;
    margin-right: 3px;
    border: 1px solid #ccc;
    margin-bottom: -1px;
    color: #999999 !important;
}

.tabs .active {
    border-bottom: 1px solid white;
    background-color: white;
    color: #06F !important;
    position: relative;
    text-decoration: none;
}

.tabs li a:hover, .tabs li a:active {

    text-decoration: none !important;
    background-color: white;
    color: #06F !important;

}

.panelContainer {

    clear: both;
    margin-bottom: 25px;    
    border: 1px solid #CCC; 
    background-color: white;
    padding: 10px;
}

.panel h2 {

    color
}

.panel p {

    color: black;   
}

</style>

<script type="text/javascript">

// Tabbed content script

$(document).ready(function() {
    $('.tabs a').bind('click focus',function() {
        var $this = $(this);

        // hide panels
        $this.parents('.tabbedPanels')
            .find('.panel').hide().end()
            .find('.active').removeClass('active');

        // add active state to new tab
        $this.addClass('active').blur();    

        // retrieve href from link (is id of panel to display)
        var panel = $this.attr('href');
        // show panel
        $(panel).show();
        // don't follow link
        return false;
    }); // end click

    $('.tabs').find('li:first a').click();
}); // end ready



// Lightbox Gallery Script

  $(function() {
        $('#images a').lightBox();

    });


</script>

I am using this lightbox plugin here: Jquery lightbox

Answer 1

You have 2 elements with the same ID (#Images). An ID should only appear once and be unique.

Quick fix

 $(function() {
        $('.images a').lightBox();

    });