Lightbox Evolution

[aoeui]

hi,

I am using custom made lightbox bought on CODECANYON

help says
initialize the plugin, put the following code before the closing tag of your body

I am loading it from separate file, at the bottom
there is all custom .js for the site functions

in it I have folowing (LB is at the bottom)

jQuery(document).ready(function($) {



/*

= SLIDER =

*/

// INDEX

$("#index .slider").slideshow({

width      : 960,

height     : 260,

navigation : false,  // navigation buttons (« »)

selector   : false,  // selector buttons (1 2 3 4 5)

timer      : false,  // timer

control    : false,  // control button (play/pause)

transition : "fade", // set desired type

duration   : 500,    // speed of the animation

delay      : 2000,   // time between slides

});



// REFERENCE

$("#reference .slider").slideshow({

width      : 900,

height     : 365,

navigation : false,

selector   : true,

timer      : false,

control    : false,

transition : "fade",

duration   : 500,

delay      : 2000,

});



/*

= LIGHTBOX =

*/

// REFERENCE

$(".lightbox").lightbox();



});

$(".lightbox").lightbox();

works fine in all borwsers, screwed in IE7
I opened FireBug console and found following

http://krsiak.cz/temp/css-tricks/js-error.png

*

do not know how to fix it

[Tcooper]

Is the page up anywhere? First check the plugin supports IE7, I imagine it would say on CodeCanyon, secondly make sure you are including the plugin js file before your site-code.js.

[Dreamdealer]

Looks like the .lightbox() function is executed before it was loaded by the browser. Have you got a link to the page where the problem occurs?

[Tcooper]

IE7 used to have some problems with trailing commas in js. I’m not sure if that is what’s causing it but trying removing the final commas in site-code.js where it has:

$("#index .slider").slideshow({

width      : 960,

height     : 260,

navigation : false,  // navigation buttons (« »)

selector   : false,  // selector buttons (1 2 3 4 5)

timer      : false,  // timer

control    : false,  // control button (play/pause)

transition : "fade", // set desired type

duration   : 500,    // speed of the animation

delay      : 2000,   // time between slides

});

Take the comma out from delay: 2000, and any other trailing comma and try that.

[Dreamdealer]

That’s a good one! Didn’t notice the trailing comma.

Anyway: why do you load the JS’s at the bottom of the page and not in the head?

[Tcooper]

@Dreamdealer: Loading JS in the head will block the rest of the page loading while it does so, should only load scripts in head that are absolutely necessary before the rest of the markup/any js after it (eg. modernizr/html5 shivs)

[Dreamdealer]

Ah oke, should have known that. I use head.js for that (wich actually does exactly the same..)

[Tcooper]

That error will happen if you try to ‘open’ the file directly in IE – it tries to run it outside the scope of the page. The fix is, don’t do that :p Is there any reason you need to?

There is no real difference in the end functionality between putting it inline with the HTML vs a separate file. Obviously a separate file is one extra HTTP request (unless it’s being loaded for something else anyway), but it’s also more maintainable and doesn’t clutter your HTML.

[Author]

Posts