Results 1 to 8 of 8

Thread: Problem with Lightbox - next, prev, close images not showing on one site

  1. #1
    Join Date
    Dec 2009
    Location
    Ontario, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Problem with Lightbox - next, prev, close images not showing on one site

    1) Script Title: Lightbox2

    2) Script URL (on DD): http://www.lokeshdhakar.com/projects/lightbox2/

    3) Describe problem:

    i have used the lightbox script on one website http://lindastitt.com/windmill_oct18.html and have had no problems with the "next" "prev" "close" or any of the associated images showing up

    however... using the same js and css scripts on this site http://davidfleishmandesigns.com/hangingdisplay.html i can get the slideshow to work but all the associated images are missing - showing up only with image markers

    everything worked fine in web preview from Dreamweaver before i uploaded all the files to the web host... that's when things went wrong... i am just getting image markers for the files that should be showing.

    images are placed in the correct folder on line - the www/images as they are for the first web site...

    just can't figure out what the difference is and why - needless to say it's driving me just a wee bit nuts

    thanks in advance for your help...
    Last edited by monkeyshinz; 12-24-2009 at 10:22 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,944
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    Well the images are not on the server, at least not where the code expects them to be. For instance, it's looking for the close image here:

    Code:
    http://davidfleishmandesigns.com/images/closelabel.gif
    That's set here (in lightbox.js):

    Code:
    // -----------------------------------------------------------------------------------
    
    //
    //  Configurationl
    //
    LightboxOptions = Object.extend({
        fileLoadingImage:        'images/loading.gif',     
        fileBottomNavCloseImage: 'images/closelabel.gif',
    
        overlayOpacity: 0.8,   // controls transparency of shadow overlay
    
        animate: true,         // toggles resizing animations
        resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
        borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable
    
    	// When grouping images this is used to write: Image # of #.
    	// Change it for non-english localization
    	labelImage: "Image",
    	labelOf: "of"
    }, window.LightboxOptions || {});
    
    // -----------------------------------------------------------------------------------
    It's location is relative to the page using the script. To avoid confusion, or for use with pages in different folders, an absolute path may be used. Notice that the loading image is set here as well, make sure that is present and in the correct location.

    As for the prev/next images. These are set in the lightbox.css file:

    Code:
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    These are relative to the location of that css file. Absolute paths may be used here as well if desired. Currently they are looking here (the prev image for example):

    Code:
    http://davidfleishmandesigns.com/images/prevlabel.gif
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Location
    Ontario, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks... i've tried that and it's still not working... hmmmmmmmm

    Configurationl
    //
    LightboxOptions = Object.extend({
    fileLoadingImage: 'http://davidfleishmandesigns.com/images/loading.gif',
    fileBottomNavCloseImage: 'http://davidfleishmandesigns.com/images/closelabel.gif',

    overlayOpacity: 0.8, // controls transparency of shadow overlay

    animate: true, // toggles resizing animations
    resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    have also changed the lightbox.css

    borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable

    // When grouping images this is used to write: Image # of #.
    // Change it for non-english localization
    labelImage: "Image",
    labelOf: "of"
    }, window.LightboxOptions || {});

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(http://davidfleishmandesigns.com/images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://davidfleishmandesigns.com//images/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

    ~~~~~~~~~~~~~~~~~~~~~~~

    i'm using the same lightbox.css and js on this site as on the other one i've done and images are in the same place relatively for both...

    the lightbox works perfectly in Dreamweaver preview with all appropriate buttons showing up...

    this is driving me nuts.... as it is now not working properly on this page either
    http://davidfleishmandesigns.com/press.html

    again... thanks for the help and Merry Christmas
    Last edited by monkeyshinz; 12-25-2009 at 03:56 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,944
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    The image files are not there. Click on this link:

    http://davidfleishmandesigns.com/images/loading.gif

    In fact, I don't even think this folder is there:

    http://davidfleishmandesigns.com/images/
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2009
    Location
    Ontario, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks = that's very strange because all the other images are showing up... i'll have to do some more fiddling....

  6. #6
    Join Date
    Dec 2009
    Location
    Ontario, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you soooooooooooo much John!! I now have it working....

    Who knew the folders and code were case sensitive? Both the lightbox.css and the lightbox.js were referring to images and i had used Images in naming my folder?

    When i renamed the folder with a small i - all my other images disappeard, so it was just easier to go in and alter the codes replacing small i with the captial I and voila!!

    Incredible how such a small detail can affect the big picture.

    Very grateful for your input and suggestions...

    Happy Holidays...
    monkeyshinz!
    Last edited by monkeyshinz; 12-26-2009 at 11:58 AM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,944
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    I see you have it sorted:

    Images

    not:

    images
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2009
    Location
    Ontario, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Yes, thank you very much John!! You Rock!!

    All seems to be working as it should now....

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •