Lightbox ignoring image styles?

Question

Level 1

121 points

Lightbox ignoring image styles?

I'm in the process of replacing all of my iWeb photo pages with image galleries that use Lightbox 2 to display large versions of my images within a navigatable overlay. This works really great and it is a big improvement over iWeb's built in pphoto viewer. I am running into one problem, however. Though my thumbnail images have a drop shadow applied to them in iWeb, the drop shadow does not appear when the gallery page loads (i.e. the images are "flat" with no shadow effect). Likewise, if I apply a borider to an image, the border doesn't appear. This is the case for images that are to be included in the lightbox, and any additional image appearing on the page — even those not included in the lightbox. It's as if the lightbox is overriding the JavaScript iWeb generates to render shadows and borders.

Am I missing something right under my nose? Seems like these things should be mutually exclusive, but as of yet a solution is eluding me...

iMac and MacBook, Mac OS X (10.6.6), 20th Anniversary Mac, 128K Mac, original Apple II

Posted on Jan 20, 2015 5:07 PM

Reply

Answer 1

Old Toad

Level 10

216,686 points

Jan 21, 2015 8:51 AM in response to John Purlia

Here's how to convert the iWeb drop shadow images on the webpage into a jpeg image of that image complete with drop shadow.

iW02 - Converting Photos w/Frames, Drop Shadows and/or Reflections into a Single Image File

You will need to replace the original image with drop shadow with the new image, turn off the drop shadow in iWeb and republish.

Reply

Answer 2

John Purlia Author

Level 1

121 points

Jan 21, 2015 8:57 AM in response to Old Toad

Hi Old Toad,

Yes, I know about the drop shadow trick, which comes in most handy for irregularly shaped objects with transparent backgrounds. These, however, are simple rectangles and (for other reasons) don't want to convert them to static shadowed images.

That said... I just figured out what was causing the problem!

It turns out that the jquery script included in Lightbox contains scripts that conflict with those provided by iWeb. By simply declaring query.js as the first script file listed in the <head> of the HTML, everything works fine. So, instead of this:

<head>

:

:

<script src="lightbox/js/jquery-1.11.0.min.js"></script>

</head>

I changed things to this:

<head>

:

<script src="lightbox/js/jquery-1.11.0.min.js"></script>

:

</head>

Bingo! It works!

Reply