Lightbox Evolution - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 23, 2011 at 9:27 am #34041
aoeui
Participant
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
August 23, 2011 at 9:38 am #85474

Tcooper
Member

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.

August 23, 2011 at 9:39 am #85475

Dreamdealer
Member

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?

August 23, 2011 at 9:51 am #85480
Tcooper
Member
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.
August 23, 2011 at 9:55 am #85482

Dreamdealer
Member

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?

August 23, 2011 at 9:57 am #85485

Tcooper
Member

@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)

August 23, 2011 at 10:02 am #85488

Dreamdealer
Member

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

August 23, 2011 at 10:43 am #85495

Tcooper
Member

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

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘JavaScript’ is closed to new topics and replies.