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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: start lightbox

  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts

    start lightbox

    Hei,
    I have this lightbox and basically I want it to start automatically when I enter the site. Can you please help me?

    Thanks!

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This is the lightbox code:


    Code:
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery lightBox plugin</title>
    
    	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
        
        <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
        <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
        
        <!-- Ativando o jQuery lightBox plugin -->
        <script type="text/javascript">
        $(function() {
            $('a[@rel*=lightbox]').lightBox();
        });
    	
    
        </script>
       	<style type="text/css">
    	
    	</style>
    </head>
    
    <body>
    
    <div id="gallery">
        <ul>
            <li>
                <a href="photos/tutorial.png" title="" rel='lightbox'>
                    <img src="photos/thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
            </li>
            
        </ul>
    </div>
    
    </body>
    </html>

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    Hei,
    I have this lightbox and basically I want it to start automatically when I enter the site. Can you please help me?

    Thanks!
    can you please help us by providing detailes?

    best regards

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    This is the lightbox code:


    Code:
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery lightBox plugin</title>
    
    	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
        
        <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
        <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
        
        <!-- Ativando o jQuery lightBox plugin -->
        <script type="text/javascript">
        $(function() {
            $('a[@rel*=lightbox]').lightBox();
        });
    	
    
        </script>
       	<style type="text/css">
    	
    	</style>
    </head>
    
    <body>
    
    <div id="gallery">
        <ul>
            <li>
                <a href="photos/tutorial.png" title="" rel='lightbox'>
                    <img src="photos/thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
            </li>
            
        </ul>
    </div>
    
    </body>
    </html>
    this is the index page on your site? can you post a link to a test page?

    best regards

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'm sorry, I don't have a link so I attached everything in 3 archives (because the maximum size is 50 kb) . If you put everything in one folder and enter the index page you'll see that if you click the image the lightbox opens. I want it to open when I open the page.

    Thanks a lot !
    Attached Files Attached Files

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    I'm sorry, I don't have a link so I attached everything in 3 archives (because the maximum size is 50 kb) . If you put everything in one folder and enter the index page you'll see that if you click the image the lightbox opens. I want it to open when I open the page.

    Thanks a lot !
    download the files. I'm looking for setup and i come back with feedback.

    best regards

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    I'm sorry, I don't have a link so I attached everything in 3 archives (because the maximum size is 50 kb) . If you put everything in one folder and enter the index page you'll see that if you click the image the lightbox opens. I want it to open when I open the page.

    Thanks a lot !
    i don't think i can doit. your jquery is 1.2.3, pretty old. I tried to use jquery 1.5.1 but it didn't work at all( i try to use trigger to simulate the initial click and this was introduced in 1.3.0).

    btw, add this to your script:
    Code:
    <!-- Ativando o jQuery lightBox plugin -->
        <script type="text/javascript">
        $(function() {
            $('a[@rel*=lightbox]').lightBox({ fixedNavigation: true });
        });
    and move
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    before first script tags.

    anyway this changes will not make it to do what you want. I'm sorry.

    best regards

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    It doesn't have to be exactly this lightbox...I just need the idea...to have one that opens on window.load and then somewhere , if I click something to be able to open it again... I've been googling around and others have tried and some of them say that they managed but I didn't...

    Thanks for your reply

  • #9
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    It doesn't have to be exactly this lightbox...I just need the idea...to have one that opens on window.load and then somewhere , if I click something to be able to open it again... I've been googling around and others have tried and some of them say that they managed but I didn't...

    Thanks for your reply
    i'm usualy like a combination between a buldog and a cat,
    try to put this in your page:
    Code:
    <!-- Ativando o jQuery lightBox plugin -->
        <script type="text/javascript">
        $(document).ready(function() {
            $("a[@rel*='lightbox']").lightBox({ fixedNavigation: true });
            $('a:first[@rel*='lightbox']").trigger('click',[]);
        });
    seems that works for me.

    best regards

  • Users who have thanked oesxyl for this post:

    alexa (03-15-2011)

  • #10
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    For me it doesn't seem to work...if I include this the lightbox doesn't show up at all...

  • #11
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I got it, it was a punctuation problem

    Thank you so much.....

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    For me it doesn't seem to work...if I include this the lightbox doesn't show up at all...
    the only changes i made:
    - index.htm page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery lightBox plugin</title>
    
    	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
        <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
        
        <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    	 <!--
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    	 -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
        <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
        
        <!-- Ativando o jQuery lightBox plugin -->
        <script type="text/javascript">
        $(document).ready(function() {
            $("a[@rel*='lightbox']").lightBox({fixedNavigation:true});
    	 $("a:first[@rel*='lightbox']").trigger('click',[]);
        });
        </script>
    </head>
    
    <body>
    
    
    <div id="gallery">
        <ul>
            <li>
                <a href="image1.jpg" title="" rel='lightbox'>
                    <img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
                <a href="image2.jpg" title="" rel='lightbox'>
                    <img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
                <a href="image3.jpg" title="" rel='lightbox'>
                    <img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
                <a href="image4.jpg" title="" rel='lightbox'>
                    <img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
                <a href="image5.jpg" title="" rel='lightbox'>
                    <img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
                </a>
            </li>
            
        </ul>
    </div>
    
    </body>
    </html>
    download the images imag1.jpg, images imag2.jpg, images imag3.jpg, images imag4.jpg and images imag5.jpg.

    best regards

  • #13
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I had to put :

    Code:
         $(document).ready(function() {
           $('a[@rel*=lightbox]').lightBox({ fixedNavigation: true });
            $('a[@rel*=lightbox]').trigger('click',[]);   
        });
    in order to make it work. Thanks again !

  • #14
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alexa View Post
    I got it, it was a punctuation problem

    Thank you so much.....
    you are welcome, is still a problem i can't solve but you didn't mention, is my problem, i can' make it to restart with first picture after the last one,
    i probably giveup since is just a game for me,

    best regards

  • #15
    New Coder
    Join Date
    Feb 2011
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I am am planning to have just one picture (the one from the archive) which will present my site, so this is perfect for me .



  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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