John Purlia
Level 1 (98 points)
Mac OS X

Q: 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

Close
John Purlia

Q: Lightbox ignoring image styles?

  • All replies
  • Helpful answers

  • by Old Toad,

    Old Toad Old Toad Jan 21, 2015 8:51 AM in response to John Purlia
    Level 10 (141,773 points)
    Photos for Mac
    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.

    OTsig.png

  • by John Purlia,

    John Purlia John Purlia Jan 21, 2015 8:57 AM in response to Old Toad
    Level 1 (98 points)
    Mac OS X
    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>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              :

        <script type="text/javascript" src="Scripts/iWebSite.js"></script>

        <script type="text/javascript" src="Scripts/iWebImage.js"></script>

             :

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

        <script src="lightbox/js/lightbox.min.js"></script>

      </head>

     

    I changed things to this:

     

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              :

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

        <script type="text/javascript" src="Scripts/iWebSite.js"></script>

        <script type="text/javascript" src="Scripts/iWebImage.js"></script>

             :

        <script src="lightbox/js/lightbox.min.js"></script>

      </head>

     

    Bingo! It works!