Jonny
Jonny

Reputation: 2917

lightbox2 is conflicting with scripts

I am using LightBox2 for a simple image gallery. I managed to make it work, however now it's conflicting with another javascript script file which I'm referencing from my page.

My script is using $(document).ready(function () {

I'm not sure if it's relevant or not however I know that at one point the browser's debugger was complaining about it.

Any insights on this ?

============================================================ I included part of the code that is generating the error. although this was working fine.

var currs = {};

jQuery.noConflict();

jQuery(document).ready(function () {
    var marketTypeSel = document.getElementById("selMarketType");
    var propertyTypeSel = document.getElementById("selPropertyType");
    var propertyStatusSel = document.getElementById("selPropertyStatus");
    var zoneSel = document.getElementById("selZone");
    var locSel = document.getElementById("selLocalities");
    var currSel = document.getElementById("selCurrency");
    var priceFromSel = document.getElementById("selPriceFrom");
    var priceToSel = document.getElementById("selPriceTo");

    //var data = {};

    marketTypeSel.length = 0;
    propertyTypeSel.length = 0;
    propertyStatusSel.length = 0;
    zoneSel.length = 0;
    locSel.length = 0;
    currSel.length = 0;

    jQuery.ajax({
        type: "POST",
        url: "/Search/LoadInitSearchParameters",
        //data: data,
        dataType: "json",
        success: function (result) {

Upvotes: 0

Views: 715

Answers (4)

Jim Richards
Jim Richards

Reputation: 718

This is for Lightbox2 2.8.1.

As you're using jQuery(document).ready(function () {}); this will stop lightbox from initialising.

I found I had to add lightbox.init() as my code was stopping lightbox2 from loading.

$(function() {
    lightbox.init();
    // other code
}

Upvotes: 0

Amit Soni
Amit Soni

Reputation: 3316

If still its not working, do one thing add all script ref before closing the body tag i.e instead of head tag. I was facing the same problem and this trick work for me.

like below

   <body>
        <div>Dummy Data</div>
      <div>Dummy Data</div>
        <script src="/App_Themes/lib/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="/App_Themes/lib/jquery.jcarousel.js" type="text/javascript"></script>
        <script src="/App_Themes/lib/jquery.easing.1.2.js" type="text/javascript"></script>
        //Also lightbox ref
</body>

Upvotes: 0

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17566

you can use

 jQuery.noConflict();

var Jq = jQuery.noConflict();
Jq(document).ready(function (){


});

or

JQuery(document).ready(function (){


});

simply use jQuery instead of $ when using jquery

Upvotes: 0

devtut
devtut

Reputation: 697

You can use a jquery no conflict like this below

var Jk = jQuery.noConflict();
Jk(document).ready(function (){


});

Upvotes: 4

Related Questions