CSS pop up image viewer script

castler

New Member
Messages
80
Reaction score
0
Points
0
I am able to get this script to work on our site from DynamicDrive I am new to the CSS world and am having trouble with the following:

1) - Can't get the images to align side by side on the site without the script breaking (by default, they seem to only have 1 or 2 images side by side, then the 3rd wants to go to the 2nd line - I would like to be able to fit at least 5 or so on the same row).

2) - Would like for the image to auto-align the pop up to fit the browser and not sink below the status bar - that could be frustrating for anyone viewing the images and kind of defeats the scripts purpose.

Thanks for any help i can get - our site is: Urban Exploration - but is currently down as we are performing a major overhaul on it, so the actual page itself is unavailable unless if it needs to be live.
Nick

this is what I currently have for scripting:

Code:
<table style="width: 100%; border-collapse: collapse" summary="" border="5" bordercolor="#000000" cellpadding="3" cellspacing="0"> <tbody> <tr valign="top"> <td colspan="3">This set is for the Dixie Square mall that was located in Harvey, IL prior to being demolished in early April 2013. </td></tr> <tr valign="top"> <td colspan="3"> <div>The mall was most famous for its short scene in the Blues Brothers movie where Jake &amp; Elwood drive their Bluesmobile thru the mall in a funny attempt to elude the law- bottom line... They won that round.</div></td></tr> <tr valign="top"> <td colspan="3"> <div>&nbsp;</div></td></tr></tbody></table><style type="text/css">  .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 */  }  </style><a class="thumbnail" href="#thumb"><img alt="" src="images/ChicagoDixieMall/All_those_Weeds21.jpg" border="0" height="100px" width="100px" /><span><img alt="" src="images/ChicagoDixieMall/All_those_Weeds21.jpg" /><br /> Simply beautiful.</span></a><a class="thumbnail" href="#thumb"><img alt="" src="images/ChicagoDixieMall/Artwork_in_Block_B.jpg" border="0" height="100px" width="100px" /><span><img alt="" src="images/ChicagoDixieMall/Artwork_in_Block_B.jpg" /><br /> Artwork</span></a><br /> <br />   <style type="text/css"> img { margin: 0 5px; } </style>
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
I have to start by saying that almost everything on Dynamic Drive is really outdated. It was a huge resource for us back in the early aughts, but most of what's there comes from a time when Internet Explorer 6 was the fancy new browser, Firefox was still called "Phoenix", and Netscape still made a browser. The world has moved on, and there are better ways for most things.

For (1): The images are inline elements. They act pretty much the same as text would under the same circumstances; they'll line-break when they run out of room. Whatever container they're sitting in isn't wide enough for three or more images, so the CSS that controls that is controlling the container, not the images. Make that container wider, and you'll get more images before each line break.

For (2): There's no good way to do that with pure CSS unless you disregard where the thumbnail link is. Unfortunately, that would mean covering over the link in a lot of cases, making the "mouse-out to kill" action non-obvious. You can change the alignment easily, but there's no good way of doing this as a hover effect anchored to the thumbnails while ensuring that the large image always fits on the screen.

A better way would be to pick a single display location for the enlarged images (and that would have its own little set of problems if you're trying to create a responsive, device-independent design) or to use a lightbox-style display widget. That would involve some JavaScript, if that's not a problem. The easiest to use would probably be one of the jQuery-based solutions. Just Google "jquery lightbox" and you'll find a number of good solutions on the first results page.
 

castler

New Member
Messages
80
Reaction score
0
Points
0
thanks for your comment - I have started to add pics and have got it on a roll - could you review the page and provide feedback for it? I have it almost finished and have about 40 other pages to make over with this new script.

Overall, I like the idea, but am unsure if this really is the proper way to go with having multiple images, Its simple for the end user, but since I can't adjust the pop up image to "absolute" position in the center of the page, it kinda seems weird at first glance.

Thanks.
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
I have a bad connection at the moment that's preventing the images from downloading before the request times out, but the elements are there, so I can see what's going on. Apart from some fine tuning, that's probably as good as you can do, and it will probably work well enough on desktops/laptops or tablets in landscape orientation. And while it IS possible to center the images on the screen, again, it's going to make the UI unusable, or at least inconvenient, since the user would have to mouse completely out of the large image <span> to make some images go away, while others would only mean mousing out of the thumbnail.

I'd still go for the lightbox. One of the most useful things usability expert Jakob Neilsen ever said was this: "remember, users spend most of their time on other web sites". The lightbox is what people are used to, and there's no good reason to mess with their expectations.
 

castler

New Member
Messages
80
Reaction score
0
Points
0
I agree on lightbox and am thinking about scratching the current code and going with that as I have dreamweaver and have been fiddling with it a bit and like it - where do I need to upload the 3 foldes (js, images and css) on the site?

Also is it possible - instead of listing every photo on a page, to have say 1 image that when clicked, but display all the photos for that particular album, as to not clutter the page.
 
Top