[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1163
  • Last Modified:

nice image popup

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

0
dougfosterNYC
Asked:
dougfosterNYC
  • 9
  • 7
  • 2
1 Solution
 
LZ1Commented:
You could always try lightbox:
http://www.lokeshdhakar.com/projects/lightbox2/  
0
 
myderrickCommented:
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
0
 
dougfosterNYCAuthor 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?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dougfosterNYCAuthor 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
0
 
myderrickCommented:
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
0
 
LZ1Commented:
Show me your code.  I've had that problem with lightbox before.  Usually just a naming error.
0
 
dougfosterNYCAuthor 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

0
 
dougfosterNYCAuthor Commented:
Thanks myderrick.  Yea, I inherited this site so it's a hodge podge of tables and css.  
0
 
LZ1Commented:
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.
0
 
dougfosterNYCAuthor 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.
0
 
LZ1Commented:
What program are you using to develop?
0
 
dougfosterNYCAuthor Commented:
Dreamweaver MX.  
0
 
LZ1Commented:
Use this free extension.  It's helped me out MANY times in the past.
http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm  
0
 
LZ1Commented:
Just following up.  Did you try that extension work for you?
0
 
dougfosterNYCAuthor 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?
0
 
LZ1Commented:
It doesn't matter which language you are using.  As long as you have Dreamweaver, it will work. The extension itself uses Java.
0
 
dougfosterNYCAuthor Commented:
Ok, I'll give it a try later today.  Thanks.
0
 
dougfosterNYCAuthor 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.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now