Results 1 to 6 of 6

Thread: Thumbnail Viewer how do I un-center

  1. #1
    Join Date
    Apr 2010
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Thumbnail Viewer how do I un-center

    1) Script Title: Image Thumbnail Viewer

    2) Script URL (on DD): www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    3) Describe problem:

    Hi I have one question on this - how do I recode to display the enlarged image in a different position. I want it to be eg 50 pixels from top of screen instead of centred completely on screen. Reason being I have a strip of photos and it would work perfectly if the enlarged images always appeared above them so could just click on each one to enlarge without having to close the enlarged one each time.
    Many thanks

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    it may be somewhat easier to use this script
    http://www.dynamicdrive.com/dynamici...thumbnail2.htm
    here you can taget the id="loadarea" directly with css

  3. #3
    Join Date
    Apr 2010
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi thanks for that. Am trying the viewer II script that you linked to, but how do I code that to appear centered. I've tried the following:

    #loadarea {
    position: absolute;
    margin: 0 auto;
    text-aligh: center;
    }

    And variations but can't get it. Can you advise.
    Thanks

  4. #4
    Join Date
    Apr 2010
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi I think I've found a way to centre the viewer2 script, but how do I get it to close the emlarged image. With the viewer1 script you can click the enlarged image to close but it can't be centered. With the viewer2 script I can center it but can't close it by clicking.

    Many thanks

  5. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    It should work if you use position: relative
    Code:
    #loadarea {
    position: relative;
    margin: 0 auto;
    text-align: center;
    }
    If you want to use position absolute the following will probably work
    Code:
    #loadarea {
    position: absolute;
    left:50%;
    margin-left: -200px;
    text-align: center;
    }
    The margin left is set to the negative value of the loadareas width divided by 2, thus assuming the width is 400px in this case.

  6. #6
    Join Date
    Apr 2010
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thanks, I've got it centred, just need to be able to click on the enlarged image to close it?

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
  •