Lightbox is messing up my slideshow on my webpage?

**kyle246** · 01-21-2012, 06:01 PM

Hello. I am working on one of my websites. I have a slideshow on there that looks decent.

Today I added "Lightbox" to the top of my right sidebar for YouTube videos. It looks really nice. When I added in the script to the header of all my pages, the slideshow on my home page stopped working.
www.pokemonsocial.com

Any ideas?

thanks,
Kyle

**HTMLBasicTutor** · 01-21-2012, 06:13 PM

You have some script errors:

Webpage error details

Timestamp: Sat, 21 Jan 2012 23:12:27 UTC

Message: Invalid character
Line: 98
Char: 4
Code: 0
URI: http://www.pokemonsocial.com/

Message: 'jQuery.timeago.settings' is null or not an object
Line: 113
Char: 1
Code: 0
URI: http://www.pokemonsocial.com/

Message: Object doesn't support this property or method
Line: 166
Char: 4
Code: 0
URI: http://www.pokemonsocial.com/

**morestar** · 03-14-2012, 11:30 AM

I can't find the slide show but I did click on the "Battle of the Week" image and the video did pop up but without a faded background AND I couldn't click to close anywhere on the screen to close the lightbox (I think it's the lightbox we're all used to).

I checked your code, and found rel="#voverlay"

That's fine but I would scrap your entire lightbox code and try using shadowbox. It's great. All you need to do is:

download the package after choosing all the options (just in case you need them one day)
upload the unzipped folder to your public folder on your server
add rel="shadowbox" to your links
add the following code below, above the </head> tag
and add widths and heights to the opened window as you wish thus: rel="shadowbox;height=140;width=120">

Code:

<link rel="stylesheet" type="text/css" href="/shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Note in the paths to the scripts in the above code that I added "shadowbox-3.0.3" because that's the name of the folder the files come in and so that would be the path to them after uploading them.

Here are a few more shadowbox options you can experiment with.

Hope this helps!

**weegillis** · 03-14-2012, 06:55 PM

While I don't go along with tossing the baby with the bath water, which is basically what the above suggests, I do go along with the suggested alternative, if for only one reason: Where the OP's lightbox may be encountering some clashes, this one likely won't, as, in their own words, "Free from Frameworks."

The script tags don't need to be in the <head>. They can be just before the </body> endtag, and be just as effective. This would almost be the recommendation if images are acquired dynamically with AJAX. One will want everything in place in the DOM before firing this script, else some things could get missed. If leaving the script in the head AND dynamically acquiring images with AJAX, then add a ' defer="defer" ' attribute to the script tag so it is forced to fire last.

When creating a slideshow sequence, or 'gallery', you will need to configure the rel attributes with a gallery identifier, as in,

HTML Code:

rel="shadowbox[mygallery]"

Catching up...
If one places at least the INIT method at the bottom of the body element, then in principle this script will be the last to fire, so a defer attribute would not be needed on the SRC script tag.

OT: Many would argue that all script tags ought be at the end of the body element, so the HTML, CSS and page elements get first crack at filing in. Personally, I go along with this. Some scripts have to be at the start, no two ways about it. Most, however, are content to be fired after the document is ready, which is how it should be.

Thread: Lightbox is messing up my slideshow on my webpage?

Thread Tools

Display

Lightbox is messing up my slideshow on my webpage?

Tags for this Thread

Posting Permissions