Search code examples
javascriptjqueryphoto-gallery

jQuery - Photo gallery


Would somebody be so kind and tell me, why this script only works in Firefox and not in Chrome. Script: when it is finished it should be a simple Photo gallery Thank you for your help!!!

$(document).ready(function() {
            function animate()
            $( ".picture" ).delay( 2000 ).fadeTo( "slow" , 0.00, function() {
                    $( ".picture2" ).animate({ opacity: 1.00 }, "slow" );
                    $( ".picture2" ).delay( 2000 ).fadeTo( "slow" , 0.00, function() {
                        $( ".picture" ).animate({ opacity: 1.00 }, "slow" );
                        animate();
                });
            });
            animate();
        });

Solution

  • This is the hole html code

    <html>
        <head>
            <meta charset="UTF-8">
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
            <title>Bilderreihe | unfertig</title>
            <style type="text/css">
    
                .picture {
                    position: absolute;
                    left: 50px;
                    margin-top: 5%;
                    margin-left: 30%;
                }
    
                .picture2 {
                    position: absolute;
                    left: 50px;
                    margin-top: 5%;
                    margin-left: 30%;
                    opacity: 0.0;
                }
    
            </style>
        </head>
    <body>
        <div class="all">
            <div class="picture">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQYtvxXpYfat_I3XYW8tWZ42KJIHR25DsOIgA6CdHVbOXJYHHvDZw" height="300" width="500">
            </div>
    
            <div class="picture2">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTIJMikQdg1bqI9PBgD_gBZSTcBCSRvzEN_sj_ngu0TrVbOdtr" height="300" width="500">
            </div>
    
            <div class="picture3">
                <img src="">
    
                    <button id="left">&laquo;</button>
                    <button id="right">&raquo;</button>
        </div>
        <script>
    
    
    
            $(document).ready(function() {
                function animate()
                $( ".picture" ).delay( 2000 ).fadeTo( "slow" , 0.00, function() {
                        $( ".picture2" ).animate({ opacity: 1.00 }, "slow" );
                        $( ".picture2" ).delay( 2000 ).fadeTo( "slow" , 0.00, function() {
                            $( ".picture" ).animate({ opacity: 1.00 }, "slow" );
                            animate();
                    });
                });
                animate();
            });
    
        </script>
    </body>
    </html>