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

Thread: Help please, with Lightbox image viewer!

  1. #1
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Help please, with Lightbox image viewer!

    1) Script Title: Lightbox image viewer 2.0

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

    3) Describe problem: I know this has been asked before, but I read some of the old threads and still wasn't able to fix my problem. It just doesn't work. The image opens up in a new browser window... I've tried everything, and nothing works. I'm no expert with this stuff, so, go easy on me!

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

    Default

    Please supply a link to your problem page so that we may assist you.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well, I haven't uploaded it to the web yet, but I'll copy and paste the code for you...


    I put this in the <head> section, as it said to:

    <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" />


    And then here is my HTML code on the photos page:


    <a href="images/swimmingpool1.jpg" rel="lightbox" title="Puerta del Mar Swimming Pool"><img src="images/swimmingpool1_thumb.jpg" border="0" /></a>

    I'm pretty sure I did everything the directions said to do, but it's not working. Btw, I tried the first version earlier, and that one did (sorta) work, but the window that popped up didn't look quite the way it was supposed to. There was no white border/background around the photo, just a purple line that looked bad, and the caption letters were in black which didn't show up on my dark colored page. I went to the css file to make changes, but none of the changes worked. So I just started a fresh page and tried version 2.0 instead, and as I said, that one doesn't work at all for me.

    Thanks!

  4. #4
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Never mind, I figured out the problem.

    I might have some other questions on this though, so.... if I do I'll be back! Thanks anyway!

  5. #5
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have another question.

    I want to change where the "next" and "previous" graphics are located... Right now, they are on the upper right and left of the photo, but I want to put them in the bottom border (on the white part) so it's easier to see them, and also if possible I just want it to stay there... right now it only appears when you put your mouse over it.

    I know that I have to change this in CSS, but I'm not an expert on this.

    Here's what the code says now:

    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #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; }


    Please let me know the correct way to change the code so the prev and next are at the bottom.

    Thank you!

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

    Default

    It's a little more complicated than that. Here's what I came up with (additions/changes red):

    Code:
    #lightbox{
    	position: absolute;
    	top: 40px;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	line-height: 0;
    	}
    
    #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;
    	bottom: -20px;
    	left: 0;
    	height: 30px;
    	width: 100%;
    	z-index: 10;
    	}
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{
    	width: 49%;
    	height: 30px!important;
    	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink { right: 0; float: right;background: url(../images/nextlabel.gif) right 15% no-repeat;}
    #prevLink:hover, #prevLink:visited:hover { }
    #nextLink:hover, #nextLink:visited:hover {  }
    
    
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto;
    	line-height: 1.4em;
    	}
    
    #imageData{
    	padding:20px 10px 0 10px;
    	}
    #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;	}	
    		
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	filter:alpha(opacity=60);
    	-moz-opacity: 0.6;
    	opacity: 0.6;
    	}
    	
    
    .clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    	}
    
    * html>body .clearfix {
    	display: inline-block; 
    	width: 100%;
    	}
    
    * html .clearfix {
    	/* Hides from IE-mac \*/
    	height: 1%;
    	/* End hide from IE-mac */
    	}
    Notes: I may have previously made other changes but, I think that the red ones are all that would be required for this.
    - John
    ________________________

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

  7. #7
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, I'll try that!

    Sorry for the late reply.

  8. #8
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, I hope you don't think I'm being too picky.... It looks pretty good, even though I actually wanted the prev and next graphics to be lower, and sort of in between the caption and the X close button....not in the very middle, but the prev a bit to the left, and the next a bit to the right.

    I guess it's ok where you put them, except for one minor problem. (Sorry, when it comes to aesthetics, i'm kind of a perfectionist!)

    On a few of the images, the top part of the prev and next graphics show up on the photo, instead of being flush with the border. I only noticed that on 3 or 4 pictures, but if possible, I don't really want it to do that....

    Here's what I mean, I did a screen shot:

    Image removed by ddadmin as requested. For future requests regarding editing/ deleting a post, please pm me directly.

    Can you see how the prev and next graphics come up a bit too high on the image? It's not a huge deal, but if there's a way to fix that, that would be great.

    Thanks again!
    (sorry for being a pain)
    Last edited by ddadmin; 03-07-2007 at 04:44 AM.

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

    Default

    I can't seem to see your screen shot, it keeps asking for a name and password. Anyways, I worked out those styles for images I just happened to have lying around. They could be tweaked. It might be best if you tweaked them seeing as how you would best know how you want it to look. Also, I could tell much more from a link to your page than from a screen shot.
    - John
    ________________________

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

  10. #10
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's weird that it's asking you for a name/password to see the image. (I just bought my own webspace for another site, and I was trying to use it to host the picture.) Can you do me a favor and edit my post and remove the img code to that photo? Thanks!

    Ok, I think I know how to fix the problem. I think a few of the photos (maybe 3 or 4) are a bit too big, and I need to resize them.

    I uploaded the page, here's the link if you want to take a look: http://www.puertadelmar.net/photos.html

    Can you tell me if it's taking a long time for the larger size photos to load for you? And also, if you think it's fine the way it is? (It's not a big deal to have the prev and next graphics there, as long as I can fix the little problem now, with some of them overlapping the photo)

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
  •