Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Lghtbox2 Why on earth isn't this working for me?

  1. #1
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Angry Lghtbox2 Why on earth isn't this working for me?

    1) Script Title: Lightbox image viewer 2.0

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

    3) Describe problem:

    Why is this not working for me? I can't figure out what's missing.

    Here's a link to my site:
    www.makeovermagic.org/index2.htm

    --or--

    <html>
    <head>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    </head>
    <body>
    <a href="1aspecialeffects3-NEWcomb.jpg" rel="lightbox[effects]">1</a>
    <a href="1a1childaf.jpg" rel="lightbox[effects]">2</a>
    </body>
    </html>


    ...thanks, Marsha

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    It works for me on your site with image 1, but not image 2 (because image 2 is not on the server). Are you letting the page load all the way, because I have found that if you do not let it load all the way and click an image (or link), it opens the image in the window, not in the lightbox viewer.

    Hope this helps you.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    question: are you just seeing the words "image 1" and "image 2" -- or are you seeing thumbnails first? because i don't have the thumbnails and that is what i want to appear. yes, the second image is on the server but not loading...why?

    how do i get the thumbnails to appear?
    Last edited by momonline; 12-03-2006 at 05:41 AM.

  4. #4
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    okay, i was able to get image2 loaded -- but my question remains -- how do i get thumbnails instead of "1" and "2" appearing?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by momonline View Post
    okay, i was able to get image2 loaded -- but my question remains -- how do i get thumbnails instead of "1" and "2" appearing?
    First you need (and may already have) thumbnail images. Once you have those - say they are called:

    Code:
    image1_tbn.jpg
    image2_tbn.jpg
    and are located in the same directory as the larger images. Then you can do this:

    HTML Code:
    <a href="image1.jpg" rel="lightbox[effects]" title="effect 1"><img src="image1_tbn.jpg" border="0"></a>
    <a href="image2.jpg" rel="lightbox[effects]" title="effect 2"><img src="image2_tbn.jpg" border="0"></a>
    - John
    ________________________

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

  6. #6
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    Thanks John, that worked. Do I need to setup a table for the best alignment of the thumbnails?

    ...and in order to position the the lightbox image that appears a little further down on the page, what would the code be and where would I enter it?

    Marsha

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You don't need a table for 'best alignment'. Tables are often easiest though for folks not familiar with the more recent and more economical (code and load time wise) elements like <div>, <span>, <br>, etc. styled using css that can be employed. What you have on your demo page right now, with one </p> that has no opening <p> tag and a <p> tag later, after everything else in the body, that has no closing </p> would confuse most browsers though:

    Code:
    <body>
    <a href="image1.jpg" rel="lightbox[effects]">
    <img src="image1_small.jpg" border="0" width="100" height="80"></a>
     </p>
    <a href="image2.jpg" rel="lightbox[effects]">
    <img src="image2_small.jpg" border="0" width="100" height="80"></a>
    
    <p>
    
    </body>
    I would suggest that you use a title attribute for the links as shown in my previous post (they can be whatever you like) or use an empty title with one space character included:

    Code:
    <a href="image1.jpg" rel="lightbox[effects]" title=" ">
    <img alt="" src="image1_small.jpg" border="0" width="100" height="80"></a>
    as, otherwise some browsers will show 'null' where the title would go. If you use the one space title for the link, you need an empty alt for the image. Alt attributes (even if empty) are required for valid HTML anyway.

    OK, now on to positioning the lightbox effect lower, find this in lightbox.css:

    Code:
    #outerImageContainer{
    	position: relative;
    	background-color: #fff;
    	width: 250px;
    	height: 250px;
    	margin: 0 auto;
    	}
    Change it to:

    Code:
    #outerImageContainer{
    	position: relative;
    	background-color: #fff;
    	width: 250px;
    	height: 250px;
    	margin: 50px auto 0 auto;
    	}
    You can use any value you like (within reason) for the 50px I've inserted.
    - John
    ________________________

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

  8. #8
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    John, thanks again. so far, so good.

    www.makeovermagic.org/index2.htm

    did i fix the <p> issue properly -- i opened and closed it, although i am not certain if i placed them properly.

    Marsha

    p.s. is the lightbox centered by default -- it's hard to tell by my images because they are big and look centered -- if it is not centered by default, where would i change that?

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The p tags are now valid but, do little or nothing in your current layout. They will create line breaks with other content before and after them though, if you were to add it.

    Yes, lightbox by default is centered.
    - John
    ________________________

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

  10. #10
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    ok - so far so good!

    ...when viewed in IE brower, though, there is a rectangle that appears just under the mouse on mouseover -- it doesn't happen in firefox -- can i get rid of this?

    http://www.makeovermagic.org/index2.htm

    Marsha

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
  •