PDA

View Full Version : Popup Image Viewer - how to adjust the size of pop up image?



dasadler
04-14-2008, 11:38 PM
1) Script Title: Image size in Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Describe problem: How can I adjust two things:


the color and font of the text (over which the mouse hovers) and

The size of the image that pops up??

Thank you

Nile
04-15-2008, 01:04 AM
Alright, to change the font:
Change:

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

To:


.thumbnail{
position: relative;
z-index: 0;
font-family: Tempus Sans ITC; //Your font
}

For the second, I think that it does that automatically, but can we please see your code? Better yet, a link to the page?

dasadler
04-15-2008, 01:12 AM
Thanks, I am still playing with the code. The original page is

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

and I am trying to help a friend with this page:

http://ai-dev.freehostia.com/cc/menuideas.html

Nile
04-15-2008, 01:18 AM
Well, its looks good for me, except the image should be smaller, is that what you wanna change?

dasadler
04-15-2008, 01:24 AM
Yes, i would like to make the image smaller and change the color of the word from blue to the deep red (#990000) like the rest of the text.

dasadler
04-15-2008, 01:25 AM
Do I need to adjust the size first or can I define the size in the style statement?

Nile
04-15-2008, 11:46 AM
From what I can tell, all you need to do is adjust the size in the style like you said.

dasadler
04-15-2008, 05:29 PM
Wish I knew how to do that... I understand the concept - just not which code to use. I was hoping you might have an example or tell me where i might find it. I am certainly willing to experiment.

Specifically, however, I don't know if whatever sizing code I insert would be in the CSS or HTML section... also, to which element should I apply the resizing?

dasadler
04-15-2008, 06:23 PM
Never mind. I think I am getting close through trial and error.

Nile
04-15-2008, 08:39 PM
Alright, glad to help you.

clair
12-12-2009, 11:59 AM
I apologize if this is the wrong place for this post, but can't find a better one.

I have implemented the CSS Popup Image Viewer in my PHP db pages and I have used only ONE image, not the two as is used in the original code. I just uploaded one image of the size I want for the larger image and then in the HTML I refer to the thumbnail size as a percent: that is width="70%" height="70%" and for the larger image, I use 100% for both.

You can see this in operation at
http://www.artbuttonworks.com/blue-pgs.php

Just wanted to let folks know about this as a lot of people have commented on the overhead of 2 images. (I did it because I have a lot of objects to deal with and did not want to consume time sizing and uploading two images for every image I need.)

Clair

jscheuer1
12-12-2009, 01:07 PM
For images of those sizes, generally that is a fine strategy, though your images are a bit larger (byte wise) then they probably need to be.

However, for images that are like 70x70 for the thumbnails and like 300x300 for the larger image, separate images would be better, though ideally in a case like that the thumbnails (and any other visible images on the page that follow the gallery) should be preloaded using HTML. That way the visible portion of the page would load faster, and any larger images not required via user interaction could be left on the server if need be (user leaves the page before it has completely downloaded) with no adverse consequences to the page visually.