The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    light box code

    udarsha45
    udarsha45
    udarsha45
    Forumember


    Male Posts : 626
    Reputation : 9
    Language : English
    Location : Sri Lanka
    • Post n°1

    Solved light box code

    Post by udarsha45 August 15th 2011, 9:47 am

    can any one tell me the code to the light box ? so i can add it to my html page ?
    • Back to top
    mgt98
    mgt98
    mgt98
    Forumember


    Male Posts : 344
    Reputation : 45
    Language : English
    • Post n°2

    Solved Re: light box code

    Post by mgt98 August 15th 2011, 9:49 am

    Can you explain what you mean by 'light box'?
    • Back to top
    udarsha45
    udarsha45
    udarsha45
    Forumember


    Male Posts : 626
    Reputation : 9
    Language : English
    Location : Sri Lanka
    • Post n°3

    Solved Re: light box code

    Post by udarsha45 August 15th 2011, 9:51 am

    • Back to top
    Nera.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -
    • Post n°4

    Solved Re: light box code

    Post by Nera. August 15th 2011, 10:41 am

    Hi,

    Where are you stuck, I've tried it on forum index and works fine.

    This goes to your head section
    Code:
    <script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js"></script>
    <script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>

    CSS goes to CSS
    Code:
    #lightbox{   position: absolute;   left: 0; width: 100%; z-index: 999; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(http://www.lokeshdhakar.com/projects/lightbox2/data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2//images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2//images/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }

    #imageData{   padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
    #imageData #caption{ font-weight: bold;   }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
    #imageData #bottomNavClose {
        background: url("http://www.lokeshdhakar.com/projects/lightbox2/images/closelabel.gif") repeat scroll 0 0 transparent;
        float: right;
        height: 18px;
        outline: medium none;
        padding-bottom: 0.7em;
        width: 66px;
    }   

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

    I've linked the images so you don't have to.

    Than you set up an image like this (assuming you want multiple images on light box)

    Code:
    <a href="WHAT WILL APPEAR ON TOUCH GOES HERE" rel="lightbox[roadtrip]" title="my caption"><img src="TUMB IMAGE GOES HERE"></a>

    Click on those two images below Play board and you'll see it working http:xxxxxxxxxxxxx
    Never mind the images, it's just to show you.


    Last edited by Nera. on August 15th 2011, 1:03 pm; edited 1 time in total (Reason for editing : -link removed)
    • Back to top
    udarsha45
    udarsha45
    udarsha45
    Forumember


    Male Posts : 626
    Reputation : 9
    Language : English
    Location : Sri Lanka
    • Post n°5

    Solved Re: light box code

    Post by udarsha45 August 15th 2011, 11:19 am

    nera what do you mean by this ?

    This goes to your head section
    • Back to top
    Nera.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -
    • Post n°6

    Solved Re: light box code

    Post by Nera. August 15th 2011, 11:41 am

    Bellow your head tag
    Code:
    <head>
    • Back to top
    udarsha45
    udarsha45
    udarsha45
    Forumember


    Male Posts : 626
    Reputation : 9
    Language : English
    Location : Sri Lanka
    • Post n°7

    Solved Re: light box code

    Post by udarsha45 August 15th 2011, 11:49 am

    working thanks Smile

    solved
    • Back to top
    Nera.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -
    • Post n°8

    Solved Re: light box code

    Post by Nera. August 15th 2011, 11:55 am

    Welcome.

    Solved > Locked
    • Back to top

      Current date/time is September 24th 2024, 1:23 pm