Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Resolution dependant image popup

Status
Not open for further replies.
richard061458

richard061458

Technical User
Joined
Jun 20, 2006
Messages
8
Location
CA
I'm using a simple JavaScript to pop up an image window when a thumbnail image is clicked on. Some of the full-size images are fairly large (e.g. 650x900 pixels) which isn't a problem as long as the monitor resolution is high enough. The problem occurs when using a low res monitor setting (I'd like to site to work properly on all resolutions from 800x600). What currently happens with a low res monitor depends on the browser. The image is either scaled down in size (Mac Camino) or the popup window is larger than the available screen space so part of the image is off the screen (Windows IE).

What I'd like to have happen is to have the full image displayed if the monitor resolution is high enough but with a low res monitor the popup window is scaled so that it fits the screen properly and scoll bars are added so that the entire full-size image can be seen. In no case do I want the image to be scaled or have the pop-up window be larger than the display area.
 
Sort by date Sort by votes
It should just be a matter of setting the dimensions of the popup window so it opens to a specified size. Any content loaded inside that window will automatically have scrollbars if they are larger than the current dimensions of the window.
You can detect the current screen size at least in IE with commands like screenHeight, screenWidth, availHeight, availWidth, innerHeight, innerWidth, etc.

Take a look at the below link, it shows some example scripts on detecting various browser and screen properties.
There are probably better examples available but I found this one first. :)

You can either launch the popup with a fixed size and then use code to resize the window based on the image size you are loading or you could detect the screen size ahead of time and use that to determine what size popup to create.


Google, you're my hero!
 
Upvote 0 Downvote
Thanks for your comment theniteowl.

Explicitely setting the window dimensions won't work in some situations.

What I'd like to do is something like the following...

IF ImageHeight > ScreenHeight OR
ImageWidth > ScreenWidth THEN
NewWindow(Scrollbars, ScreenHeight, ScreenWidth) ELSE
NewWindow(NoScrollbars, ImageHeight, ImageWidth)

Unfortunately, I don't really know JavaScript syntax so if someone could translate that logic into actual code I'd be much appreciative.

TIA
 
Upvote 0 Downvote
Where do you get the image size info from?
You will need to have that info on hand in order to make the comparison.

Here is a sample.
This sets the popup height and width to whatever the smallest dimension is between the screen and the image.
If the image is smaller the window is smaller. If the image is larger than the screen the popup only goes to the dimension of the screen.
You should automatically get scrollbars if the image loaded into the popup window is larger than the original window dimensions.

Code: 
<html>
<head>
<SCRIPT type="text/javascript">
<!--
  var picHeight = 300;
  var picWidth = 700;
  var url = "urltoyourfile"

  var scrWidth = screen.width;
  var scrHeight = screen.height;

  if (picWidth > scrWidth)
    pupWidth = scrWidth;
  else
    pupWidth = picWidth;

  if (picHeight > scrHeight)
    pupHeight = scrHeight;
  else
    pupHeight = picHeight;

  OpenWindow(url, pupHeight, pupWidth);

  function OpenWindow(url, pupHeight, pupWidth) {
    picWin = window.open(url,'','scrollbars=yes,menubar=no,width='+pupWidth+',height='+pupHeight+',alwaysRaised=yes,location=0');
    picWin.creator = self;
    picWin = picWin.focus() 
  }
//-->
</script>
</head>
<body>
</body>
</html>




Google, you're my hero!
 
Upvote 0 Downvote
I'd like to provide the image size when calling the function. For example

onClick=OpenWindow(images/CW-01.jpg, width=447,height=770)

If you'd like you can take a look at the page I'm working with.

 
Upvote 0 Downvote
Anyone?

How can the above code be converted into a function that accepts picHeight, picWidth and url as passed parameters?
 
Upvote 0 Downvote
I just change picHeight and picWidth to be the input parameters (instead of pupWidth/pupHeight) and moved the logic statements inside the OpenWindow function.

Code: 
  function OpenWindow(url, picHeight, picWidth) {
    var scrWidth = screen.width;
    var scrHeight = screen.height;

    if (picWidth > scrWidth)
      pupWidth = scrWidth;
    else
      pupWidth = picWidth;

    if (picHeight > scrHeight)
      pupHeight = scrHeight;
    else
      pupHeight = picHeight;

    picWin = window.open(url,'','scrollbars=yes,menubar=no,width='+pupWidth+',height='+pupHeight+',alwaysRaised=yes,location=0');
    picWin.creator = self;
    picWin = picWin.focus() 
  }


Google, you're my hero!
 
Upvote 0 Downvote
Sorry to be so dense niteowl but I can't get it to work.

I placed the OpenWindow function in the HEAD section of the page in question and then call it from a thumbnail image as follows...

<img src="images/CW01thumb.jpg" name="CW01" width="91" height="106" border="0" id="CW01" onClick="openWindow('images/CW-01.jpg',770,447)">

Nothing happens.

What am I doing wrong?
 
Upvote 0 Downvote
Minor typo.
The function name is OpenWindow.
You used a lower case o in your onclick event and Javascript is case sensitive.
You can rename the function or rename the call whichever way you prefer, they just have to match case.


Google, you're my hero!
 
Upvote 0 Downvote
Doh!

After making the correction, the script works perfectly with some browsers (Firefox-Mac, Opera-Mac, Safari-Mac) but doesn't work on others. On Camino-Mac with a low res display, the window is sized properly but instead of scrollbars the image is scaled down in size.

Most importantly, on IE6-Win with an 800x600 display, the window isn't scaled down in size so you can't see the entire image.

Any other ideas?
 
Upvote 0 Downvote
All browsers may not support the screen.width and screen.height properties or may not support them in quite the same way. You will have to search on those properties and the browser you want to support to find suitable alternatives.

I suspect that Camino on the Mac has a default behavior to reduce the image size. You can try specifying the height and width attributes in the image tag itself to see if it prevents shrinking the image.

For IE6 I have no idea why you would get that effect.
Do you happen to be testing on an LCD display? I wonder if screen.height/width is reporting the max resolution rather than current resolution?
You can test that with this little bit of code:
Code: 
<html>
<head>
<script type="text/javascript">
alert('Width:'+screen.width+'\n\r'+' Height:'+screen.height);
</script>
</head>
<body>
</body>
</html>

That will just popup an alert telling the width/height properties of the screen. If it says something higher than what the current resolution is then something is off and if it is an LCD I bet the values it reports are the optimal settings for the LCD despite it's current resolution settings.


Google, you're my hero!
 
Upvote 0 Downvote
Thanks again niteowl.

Camino shouldn't be a problem because it does a pretty good job scaling the images.

IE6 on the other hand really butchers the image when it scales. I ran your test and it indicated the correct screen resolution (800x600, not LCD BTW). For some reason it seems to be generating a window slightly larger than the screen resolution. It looks like the usable area of the window may be the correct dimensions but the scroll bars and title bar don't fit on the screen.

Is it possible to modify the script so that it checks for browser type and if it's IE6-Windows the window size is slightly smaller than that dictated by screen resolution?
 
Upvote 0 Downvote
BTW, Firefox-Win also scales the image rather than adding scroll bars.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined
Replies
2
Views
724
waubain
waubain
Raj Kumar
  • Locked
  • Question Question
Attached Formula image to add in javascript
Replies
1
Views
410
gmmastros
gmmastros
bach1
  • Locked
  • Question Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
454
Offera
Offera
buckeyeleaf1979
  • Locked
  • Question Question
need help trying to get another page to display in popup
Replies
0
Views
221
buckeyeleaf1979
buckeyeleaf1979
DougP
  • Locked
  • Question Question
Newbie question about making functions to pass image names for viewing larger
Replies
7
Views
685
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top