SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with lightbox effect

    Hy everybody,

    I found this great script http://dynamicdrive.com/dynamicindex17/stickynote.htm
    And i want to add lightbox effect ...
    I found there lightbox effect http://www.pjhyett.com/posts/190-the...thout-lightbox ...
    I need some help to add to my script lightbox effect ....

    Please help me!

    Thank you!
    laffin

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should probably do yourself a favor and never pull anything from Dynamic Drive. Nearly everything is unmanageable and awkward to implement. If you're looking to simply drop in a script without much configuration, simply trying googling JavaScript Lightbox. Here's a link to the original lightbox. Nevertheless, building your own isn't very hard. The key is to centering an element on your page that is absolutely positioned comes down to this formula:

    Code:
    <!-- html -->
    <div id="lightbox">
      I am a lightbox!
    </div>
    
    <!-- some css -->
    <style>
      #lightbox {
        position: absolute;
        width: 400px;
        height: 200px;
        border: 1px solid #000;
      }
    </style>
    
    <!-- script -->
    <script>
    // preliminary
    function getViewportWidth() {
      var width = self.innerWidth;  // Safari
      var mode = document.compatMode;
      if (mode || isIE) { // IE, Gecko, Opera
        width = (mode == 'CSS1Compat') ?
        document.documentElement.clientWidth : // Standards
        document.body.clientWidth; // Quirks
      }
      return width;
    }
    
    function getViewportHeight() {
      var height = self.innerHeight; // Safari, Opera
      var mode = document.compatMode;
      if ( (mode || isIE) && !isOpera ) { // IE, Gecko
        height = (mode == 'CSS1Compat') ?
        document.documentElement.clientHeight : // Standards
        document.body.clientHeight; // Quirks
      }
      return height;
    }
    
    var top = parseInt(document.documentElement.scrollTop ? 
                document.documentElement.scrollTop :
                document.body.scrollTop);
    
    
    
    var lightbox = document.getElementById('lightbox');
    var w = lightbox.offsetWidth;
    var h = lightbox.offsetHeight;
    
    
    // the important part
    lightbox.style.top = getViewportHeight()/2 - (h/2) + top + 'px';
    lightbox.style.left = getViewportWidth()/2 - (w/2) + 'px';
    </script>
    The html, css, and JavaScript are all put into one giant code block to condense the example.

  3. #3
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI: Here is an example of the code above on my site.
    http://www.dustindiaz.com/basement/centered.html


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
  •