Results 1 to 8 of 8

Thread: Css Pop-up Image Viewer - Center On Monitor

  1. #1
    Join Date
    Nov 2004
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Css Pop-up Image Viewer - Center On Monitor

    I'm using the CSS Pop-up viewer and I'm wondering if it is possible to have the image find the center of my monitor. What I mean is when I click on an image I have to move the scroll bar up or down in order to view the image properly.

    Is there a code that will tell the image to find the center of my monitor/screen?

    The viewer can be found here: http://www.dynamicdrive.com/style/cs...ge-viewer/P80/

    Thanks in advance!
    Last edited by NoClue; 01-24-2008 at 07:31 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    window.screen.width will give you the horizontal screen resolution
    window.screen.height will give you the vertical screen resolution

  3. #3
    Join Date
    Nov 2004
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Boogyman. But how do I incorporate it in my CSS I've been searching around and trying different things but nothing seems to be working.

    Thanks!

  4. #4
    Join Date
    Nov 2004
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Does anyone know how I can make the image center on the page on pop-up. I've been searching for an answer without luck. Thanks in advance!!


    Here's my css:

    .minithumbnail{
    position: relative;
    z-index: 0;
    text-decoration: none;
    }

    .minithumbnail:hover{
    background-color: transparent;
    z-index: 50;
    text-decoration: none;
    }

    .minithumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #000000;
    padding: 5px;
    right: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: #ffffff;
    text-decoration: none;
    white-space:nowrap
    }

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

    .minithumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -150;
    right: 150px; /*position where enlarged image should offset horizontally */
    }


    Here's the html:

    <a class="thumbnail" href="#thumb">
    <img src="Shafts_thumb.jpg" width="100px" height="124px" border="0" alt="Shafts"/>
    <span><img src="Shafts.jpg" alt="Shafts"/><br />
    Shafts</span></a>

  5. #5
    Join Date
    Nov 2004
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi there,

    Ok then, since there doesn't seem to be a solution to the monitor question - is there a way to add code to the css that tells it how to display in different browsers, for example, how to display in internet explorer and firefox.

    Thanks again!!

  6. #6
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Image Viewer Positioning in PC IE /Fireforx/ MAc Firefox/Safari

    Im having the same problem the script works but on PC IE the images shows much lower than in Firefox PC or Firefox Mac so if i try to raise it higher it then appears off screen everywhere else. Anyone know a fix for this?

  7. #7
    Join Date
    Nov 2004
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've been looking all over the internet for solution without luck. One thing that helps is instead of using px to position the pop-up try using %. Although not perfect it made a pop-ups much more aligned in IE and Firefox.

    Hope this helps!!

  8. #8
    Join Date
    Feb 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Im having much of the same problem as OP, but im wondering what it would take to be multiple positions for multiple images using this coding. Im experimenting right now with a couple of methods, but if anyone knows anything the help would be appreciated.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •