Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Center or Scroll Light Box (image viewer)

    Hi there.
    I recently downloaded, and implemented into my website, Glassbox
    From here: http://www.glassbox-js.com/

    Now I am using it as a light box, In my case I have a few thumbnail images, which, on click opens a pop up window and displays larger versions of the image.
    Example here: http://www.glassbox-js.com/examples/...ox_effects.htm

    As you can see from the example, the box is placed perfectly in the middle of the page.

    My problem is: The image I am trying to enlarge using Glassbox, is at the bottom of the page.
    And the glass box script does not scroll with the page, so when a user clicks on the thumbnail, the pop up window with the enlarged image, stays at the top of the page.
    I either need the Pop Up to center in the scrolled position of the website, or scroll with the we page.
    So if the thumbnail picture is at the bottom of the page, the pop up will appear at the bottom of the page.

    Example;http://nowakelectrical.com/glassbox....ox_effects.htm

    In the above example, If you close the pop up window, and scroll ALL THE WAY to the bottom, and click the show button, you will see nothing.
    But if you then scroll up, you notice the window did appear, but at the top of the page, and not the area in which you scrolled.

    So, how can i fix this?
    I do not have a lot of java script experience, so if one of you would be kind enough to quickly build the code, please.

    Alright, here is another light box script from Dynamic Drive, which has an example of what i would like. Its called FaceBox
    Link: http://www.dynamicdrive.com/dynamici...ebox/index.htm

    and Here is its JS file: http://www.dynamicdrive.com/dynamici...les/facebox.js

    The box positioning code is at the end of the file.

    Now here is the Glass box JS file
    http://nowakelectrical.com/glassbox....ox/glassbox.js

    I would post the code, but it is kind of long.
    All the code i think you need is in the above links.
    If you need to see any other code, just ask.
    I'm guessing here is when it gets its position from.
    This is from the Glassbox JS file

    Code:
            //this.glassbox.style.cursor = "pointer";
            //this.glassbox.style.cursor = "hand";
            this.glassbox.style.position = "absolute";
            this.glassbox.style.left = Math.round( ( this.screenWidth - this.glassboxWidth ) / 2 ) + "px";
            this.glassbox.style.top = Math.round( ( this.screenHeight - this.glassboxHeight ) / 2 ) + "px";
            this.glassbox.style.zIndex = 1000;
            this.glassbox.style.minWidth = this.glassboxWidth + "px"
    Anyway, if someone can please help me out, or at least point me in the right direction, i would greatly appreciate it.
    If you need anything else, please ask.

    Thanks in advanced for all those who respond, and try to help me out.

    K-milk

    PS, Also attached the files.
    Attached Files Attached Files


 

Posting Permissions

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