Centering Popup

[DS928]

I am using this code from Dynamic Drive and I want the popup to be dead center on the screen. It seems now it's in relation to the thumbnail. The code.




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


I tried...
top: 50%;
left: 50%;

That didn't seem to work.

[Beverleyh]

What is this CSS from? Please post a link to the DD demo page and also a link to the page on your website.

[DS928]

What is this CSS from? Please post a link to the DD demo page and also a link to the page on your website.

This is where its from....
This is the page I am building... Select American / Baltimore Then results...Pass over the cameras to bring up the pix.

www.menuhead.net/Pages/BigHead.php

Thank You.

[DS928]

OOPS. Here is the link for the pop up code.
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P20/

[Beverleyh]

If all the enlarged images are the same size (eg, 600 x 800) you can use a negative offset where the left and top margins are half the value of the overall image width and height, like this;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-400px;If your images are all different sizes, as yours are, you'll need to employ some JavaScript to calculate an offset based on viewport size, in which case you might as well use a pre-made popup viewer like this: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm or this: http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

[DS928]

Thank you. I will play around with both options today and let you know how things turn out.

[DS928]

OK, I've played. This is my line...


<a class="thumbnail" href="#thumb" rel="facebox"><img src="http://www.menuhead.net/Images/Buttons/PShotClear.png" width="30px" height="20px" border="0" />

If I take out class="thumbnail" and/or href="#thumb" then I lose the rollover effect. The image just appears on the page. Any hints on how to maintain the rollover and still get this thing centered? Thank you.

PS Here is the CSS I am currently using. This is for the hover, etc...



a:hover {
text-decoration:none;
}

a {
text-decoration:none;
}

#interface1 {
z-index:1;
}

#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%}

#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #6A6A6A;
text-align:center;
z-index:255;
}

#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#9D9D94
}

#loader_bg {
background-color:#EBEBE4;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}

.border_preview{
z-index:100;
position:absolute;
background: #fff;
border: 1px solid #444;
}

.preview_temp_load {
vertical-align:middle;
text-align:center;
padding: 10px;
}
.preview_temp_load img{
vertical-align:middle;
text-align:center;
}



/*Image Title Styling*/

.title_h2 {
padding:12px 0 0 18px;
}

h2 {
font-size:14px;
padding:0;
margin:0;
font-family: "century gothic";
color:#FFF
text-align:center;
}

.thumbnail{
position: relative;
z-index: 0;
width:30px;}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image This is for the image*/
position: absolute;
background-color: #333;
padding: 2px;
left: -1000;
border: 3px solid black;
border-radius: 35px;
-moz-border-radius: 35px; /* Old Firefox */
visibility: hidden;
color: white;
text-decoration: none;
text-align: center;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

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

[Beverleyh]

Wait, what method are you using now?

You should choose either the CSS Popup Image Viewer with the negative margin offset - the caveat here is that it will only work if all your images are the same size, but you'll keep the rollover - OR choose Facebox, but then you'll need to set it up as advised on the demo page and include its javascripts and stylesheets - this is the method you should use if all of your images are different sizes, and it looks like its triggered onclick. I'm not sure if it supports a hover trigger (can't check - on iphone)

You'll need to decide which one to choose based on the limitations and compromises of each script. At the minute it looks like you're trying to combine the CSS for each script, without installing the Facebox JavaScript.

[DS928]

Hmmm. I did a test. I made an image 250px by 500pk. Set the css to...
top:50%;
left:50%;
margin-top:-125px;
margin-left:-250px;
Hoping this would center the test image. It centers it on the camera as opposed to the page. So that is a no go.
Back to the other code. The lightbox one is too slow and combersome for what I need. So now I am down to two methods. The one I have, which works except for the centering issue. Also, I know I forgot to mention that it's using tootip as well, if that makes a difference. So, back to the facebox method. I have the main page that contains the script, The table with the restaurants is on another page, I am thinking this makes a difference, I am also looking into the hovering with facebox. Thank you, once again.

[Beverleyh]

Hmmm. I did a test. I made an image 250px by 500pk. Set the css to...
top:50%;
left:50%;
margin-top:-125px;
margin-left:-250px;


Try it with position:absolute; as well.

[DS928]

Tried it. Still not centering to page. It centers to the camera image. Is tooltip.js causing some of this not to work. I am trying to minimize the number a clicks a person has to do. Thats why I have the rollover. Otherwise, its on clik to see and another to close.

[Beverleyh]

I'm stuck on iPhone for the time being so I can't test anything but this looks promising: http://jmar.github.com/jquery-hoverZoom/

[DS928]

Thank you. I am trying it now. First impression is that it's slow to load large image the first time...about 5 seconds. But I am giving it a shot! Once again, Thank you.

[Beverleyh]

I think the speed has more to do with your images than the script. I say that because your page has been crashing my iphone if I have more than a few tabs open - something about it is really causing it to struggle, and usually that's the amount of stuff downloading in the background, more often than not, images.

When I got it to work, I pulled off an image ( http://www.menuhead.net/Restaurants/Baltimore/Adams_Eve/Pix/RoundAdams_Eve.png ) - the first thing I noticed is that its a png, which isn't the best web format for photos. Jpeg is more appropriate for that.

The size is the next thing you should address - this current pic comes in at 262kb, which really is too big, but you can compress it to about a tenth of the size if you optimise and convert it to jpeg. You can optimise to around 60% without noticing much of a quality loss. Around 60%-75% is standard for the web.

I ran it through the image optimiser here on DD http://tools.dynamicdrive.com/imageoptimizer/index.php and sure enough, after converting to jpeg and choosing a 60%-70% quality compression, the resulting size is about 28kb. That's around a 90% saving!

I haven't checked all of your other images, but the 4 that I did were all high quality png, so for arguments sake lets say that they're all in the same png format... You could reduce your whole page to a tenth of its current size by converting to jpeg and optimising - and just think how much of an improvement that will have on speed.

You can use the DD image optimiser tool for single images, but for batch conversions, try Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/

There are many FREE image optimisation tools available that do a fair job with compression, but most don't strip out all the extra background EXIF data (when a photo was taken, camera model, landscape or portrait, etc). That's fine for most people's web optimisation needs (the fact that a web designer/developer has used ANY form of image compression shows they're thinking about their visitors' needs and sets them apart from less experienced hobbyists), but if size is a critical issue and you need to crunch out every last byte that you can get your hands on, you can resort to more specialised tools, such as SmushIt http://www.smushit.com/ysmush.it/ , PunyPNG http://www.punypng.com/ or Adobe Fireworks (commercial), which will have greater collective results on larger amounts of in-page photos/images. I tend to 'smush' template/layout images and gallery photos (ie, the images that impact on every web page or a large, same-page group that could collectively slow things down)

Anyway, just some things for you to look into.

[DS928]

Thank you Beverly. You are the best! I really appreciate you taking the time time to explain all ofthis about images. I will get busy and start the conversions today. For some reason I thought png was the way to go. Once again. Thank you.

[Beverleyh]

Png has its place and it does offer an excellent, lossless quality - its just that the filesize that goes with it tends to be much larger. The general idea with any web image is to retain enough quality so things look good while keeping filesize small enough so load times aren't drastically slowed down.

General rules -

Use .jpg/jpeg for photos or detailed images that require a lot of colours, and optimise to about 60%-75% quality for web.

Use .gif for simple, small animations, logos, diagrams and images that require 1-bit transparency, which means a pixel is either transparent or it isn’t (no middle-ground). .Gif only supports 256 colours so you may notice speckling after saving in this format.
You might also like to try substituting .gif for .png-8 as it can offer a 7-12% saving over the .gif format.

Use .png-24 for images that require lots of colours, very precise/crisp edges and alpha-transparency (pixels can be varying degrees of transparency)

[DS928]

Thank you. That fills volumns of reading. A good set of rules!

[DS928]

Thank you Beverly. I ended up using colorbox. I still have to convert the images. But I am really happy with the results though. even with a loss of rollover / mouseover. Once again. Thank you. http://menuhead.net/Pages/BigHead.php

[Beverleyh]

No problem.

BTW - you've said thank you a lot in this thread but have you noticed the grey "thanks" (thumbs-up) buttons towards the bottom left of each post? Click those on the helpful replies and it makes the thanks official ;)