Results 1 to 2 of 2

Thread: lightbox with text instead of image

  1. #1
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default lightbox with text instead of image

    1) Script Title: lightbox text viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

    3) Describe problem: how shud i do the lightbox to show a 20-30 line paragraph instead of image...i.e...when i hit the image....i want the light box to show me a paragraph intead of image....i would really appreciate if someone can help with this...am goin crazy searchin for this but no luck

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Two options I'm thinking of, make the text an image, don't use lightbox but rather something else that uses the jquery functionality. I made this a bit ago which is similiar to what you need. The keycode function doesnt set the display back to none though... maybe someone else can fix that for ya


    Code:
    <a onclick="document.getElementById('overview').style.display ='block'; document.getElementById('fade').style.display ='block';" class="fadein" href="javascript:void(0);">ACTIVATE</a>
    <script type="text/javascript">
    $(document).keydown(function(e) {
        if ((e.keyCode == 27) || (e.keyCode == 88)  || (e.keyCode == 120)) {
            $('#overview').fadeTo("slow", 0);
            $('.black_overlay').fadeTo("slow", 0);
            run_this();
        }
    });
        $(document).ready(function(){
            $('.fadein').click(function(){
            $('#overview').fadeTo("slow", 1);
            $('.black_overlay').fadeTo("slow", .8);
        });
    });
    function run_this() {
        $(document).ready(function(){
            $('.fadeout').click(function(){
                $('#overview').fadeTo("slow", 0);
                $('.black_overlay').fadeTo("slow", 0);
            });
        });
    return false;
    }
    </script>
    <style type="text/css">
    .fadein {
        display: block;
        opacity:1;
    }
    #overview {
        display:none;
        opacity:0;
        display: none;
        position:absolute;
        top:25%;
        left:25%;
        margin:0 auto;
        width: 50%;
        height: 300px;
        background-color: white;
        z-index:1002;
    }
    .black_overlay{
        display:none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        opacity:0;
    }
    .fadeout {
        position:absolute;
    }
    </style>
    
    
    <div id="overview">
    TEXT
    <a onclick="run_this(); document.getElementById('overview').style.display ='none'; document.getElementById('fade').style.display ='none';" class="fadeout" href="javascript:void(0);">Close</a><p></p></div>

    Oh, this uses jquery as well so you'll need that. http://docs.jquery.com/Downloading_jQuery
    Last edited by bluewalrus; 01-31-2010 at 06:57 PM.
    Corrections to my coding/thoughts welcome.

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
  •