70% OFF : CLICK HERE TO BUY IT TODAY FOR ONLY $44.70 OR GET IT FREE VIA TRIALPAY  

PHP Demo Application - Source Code

/Framework/Model/Vendor/jquery-ui/development-bundle/demos/position/cycler.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Position - Default functionality</title>
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    
    <style type="text/css">
       html, body {
           margin: 0;
        padding: 0
       }
    </style>
    
    <script type="text/javascript">
    $(function() {
        
        $.fn.position2 = function(options) {
            return this.position($.extend({
                of: window,
                using: function(to) {
                    $(this).css({
                        top: to.top,
                        left: to.left
                    })
                },
                collision: "none"
            }, options));
        }
        
        $.fn.left = function(using) {
            return this.position2({
                my: "right middle",
                at: "left middle",
                offset: "25 0",
                using: using
            });
        }
        $.fn.right = function(using) {
            return this.position2({
                my: "left middle",
                at: "right middle",
                offset: "-25 0",
                using: using
            });
        }
        $.fn.center = function(using) {
            return this.position2({
                my: "center middle",
                at: "center middle",
                using: using
            });
        };
        
        $("img:eq(0)").left();
        $("img:eq(1)").center();
        $("img:eq(2)").right();
        
        $("body").css({
            overflow: "hidden"
        })
        $(".demo").css({
            position: "relative",
        });
        $(".demo img").css({
            position: "absolute",
        });
        
        function animate(to) {
            $(this).animate(to);
        }
        function next() {
            $("img:eq(2)").center(animate);
            $("img:eq(1)").left(animate)
            $("img:eq(0)").right().appendTo(".demo");
        }
        function previous() {
            $("img:eq(0)").center(animate);
            $("img:eq(1)").right(animate);
            $("img:eq(2)").left().prependTo(".demo");
        }
        $("#previous").click(previous);
        $("#next").click(next);
        
        $(".demo img").click(function() {
            $(".demo img").index(this) == 0 ? previous() : next();
        });
        
        $(window).resize(function() {
            $("img:eq(0)").left(animate);
            $("img:eq(1)").center(animate);
            $("img:eq(2)").right(animate);
        })
    });
    </script>
    
</head>
<body><div class="demo">    <img src="images/earth.jpg" />
    <img src="images/flight.jpg" />
    <img src="images/rocket.jpg" />    <a id="previous" href="#">Previous</a>
    <a id="next" href="#">Next</a>
</div><div class="demo-description"><p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them.
<br/>Use the links at the top to cycle, or click on the images on the left and right.
<br/>Note how the images are repositioned when resizing the window.
<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p></div><!-- End demo-description --></body>
</html>

PHP Demo Source Code Index