We help IT Professionals succeed at work.

nice image popup

Medium Priority
1,183 Views
Last Modified: 2013-11-19
I know there are a lot of solutions out there but I'm overwhelmed. I have an image gallery and want to have a nice image popup with a larger version of the image either by hovering over or clicking.  I want something more elegant than a window.

I currently have a nice css solution at http://www.festivacharters.com/test/gallery.php?page=gallery.  If you hover over the top left or the top right image, you'll see that it pops up but is "under" the container element.  Is there a way to have the popup to be on top so it doesn't get hidden?

If not, is there a simple, elegant solution where the popup would have some sort of border effect to make it look like a photograph with a border?
* ********************* THUMBNAIL POPUP */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
.thumbnail{
position: relative;
z-index: 0;
}
 
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
 
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
 
}

Open in new window

Comment
Watch Question

LZ1
Top Expert 2011

Commented:
You could always try lightbox:
http://www.lokeshdhakar.com/projects/lightbox2/  
This shifts the image to the right....How about toggling the left : value?

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
 
}

MD

Author

Commented:
Well I don't want to have to guess if the image is going to overlap or not.  Is there a way to have the popup stay on top so I don't have to deal with that issue?

Author

Commented:
Thanks LZ1.

I like Lightbox, and that should be a good solution, but I can't get it to work.  

All but the top left two and the top right images are using it.  I placed all the .js and the .css and image files where they should be.  It just isn't popping anything up.  Any idea why not?

http://www.festivacharters.com/test/gallery.php?page=gallery
The lightbox idea is not bad.

OK. I figure that the divs are locked up in a table. Now we need to allow the div to overflow the table.

Will figure something out.

MD
LZ1
Top Expert 2011

Commented:
Show me your code.  I've had that problem with lightbox before.  Usually just a naming error.

Author

Commented:
http://www.festivacharters.com/test/gallery.php?page=gallery,

I think the easiest thing is go to the site and view to source code.  But below are two ways I'm trying it

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
--------------------------------------------
 
                        <p><a href="images/gallery/festivacruditesetup.jpg" rel="lightbox" title="Festiva Crudite Setup - Fruit Station"> <img src="images/gallery/festivacruditesetup_thumb.gif" alt="Festiva Crudite Setup" /></a></p>
                      </center>
                        <p><a href="images/gallery/slidingglassbowview.gif" rel="lightbox[boatsetup]" title="Festiva Crudite Setup - Sliding Glass Bow View"> <img src="images/gallery/slidingglassbowview_thumb.gif" alt="Festiva Crudite Setup - Sliding Glass Bow View" /></a></p>
						<p><a href="images/gallery/Lindamakingcakes.jpg" rel="lightbox[boatsetup]" title="Festiva - Cheif Linda making cakes"><img src="images/gallery/Lindamakingcakes_thumb.jpg" alt="Festiva - Cheif Linda making cakes" /></a></p>					

Open in new window

Author

Commented:
Thanks myderrick.  Yea, I inherited this site so it's a hodge podge of tables and css.  
LZ1
Top Expert 2011

Commented:
After looking your links and includes all over, everything looks like it should. Please double and triple check that your includes are going to the right place and are also all uploaded.

Author

Commented:
Yea, the three js files are correct, the css file is correct, and the image files.  So this is weird.  I don't know how to troubleshoot this one...

And I guess I'm screwed with the css solution since the images get hidden outside the container....

Bummer.
LZ1
Top Expert 2011

Commented:
What program are you using to develop?

Author

Commented:
Dreamweaver MX.  
Top Expert 2011
Commented:
Use this free extension.  It's helped me out MANY times in the past.
http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm  

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
LZ1
Top Expert 2011

Commented:
Just following up.  Did you try that extension work for you?

Author

Commented:
Well, actually I haven't.  I don't have PHP on my local server so I upload every time to test things.  Will that matter that I don't have PHP installed?
LZ1
Top Expert 2011

Commented:
It doesn't matter which language you are using.  As long as you have Dreamweaver, it will work. The extension itself uses Java.

Author

Commented:
Ok, I'll give it a try later today.  Thanks.

Author

Commented:
Wow, so I got busy.  Thanks LZ1, I installed the extension and it is very helpful.  In the end, the problem was that I didn't have onLoad="initLightbox()" in the body tag.  Also, for some reason,  I put all the LB files in the default /lightbox_assets directory and even though they were the same files, that made it work.

It's not worth trying to figure out why.

Thanks again.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.