Jquery fancy box not working on div

Question

I have html source as

<div class="widget-container">
    <ul class="lazyest_random_list">
        <li class="lazyest_random" id="random_0" style="">
            <div class="lg_thumb">
                <div class="lg_thumb_image">
                    <a id="lg_thumb_onclick_pooja-gupta-hot-2-jpg_4763" href="http://test.com/20%282%29.jpg" class="thickbox" rel="pooja-gupta-hot" ">
                        <img class="thumb" src="http://test.com/thumb/20%282%29.jpg" ">
                    </a>
                </div>
            </div>
        </li>
        <li class="lazyest_random" id="random_1" style="">
            <div class="lg_thumb">
                <div class="lg_thumb_image">
                    <a id="lg_thumb_onclick_andria-dsouza6-jpg_4763" href="http://test.com%286%29.jpg" class="thickbox" rel="andria-dsouza" ">
                        <img class="thumb" src="http://test.com/thumb/%286%29.jpg" ">
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>

And I am trying to apply jquery fancybox and that is not working.

$(document).ready(function() {
    /* Apply fancybox to multiple items */
    $("#widget-container .a").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });
});

Any inputs to work this one

Answer 1

widget-container is the class of your container, not the id. Also, as far as I can see, there are no elements within there with the class name a, I think you mean to target the tagname a:

$(document).ready(function() {
    /* Apply fancybox to multiple items */
    $(".widget-container a").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });
});