D3 Examples - $.ui.cycling

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title></title>
        <style>
        #settings {text-align:left; position:absolute; top:0; left:0; background-color:gainsboro; opacity:.5;}
        #settings:hover {opacity:1;}
        img {display:inline-block; vertical-align:bottom; width:10em; height:10em; background-color:gainsboro;}
        
        .hexagon {font-size:300%;}
        .hexagon .active {font-size:200%; z-index:1;}
        .hexagon, .hexagon * {-moz-border-radius:100%;-webkit-border-radius:2em;border-radius:2em;}
        ul.hexagon {list-style:none; margin:0; padding:0; width:4em; height:4em; position:relative; margin-top:1em; margin-left:1em; display:inline-block;}
        .hexagon li {width:2em; height:2em; border:1px dotted; position:absolute; margin-right:-1em; margin-top:-1em; line-height:2em; text-align:center; border:1px solid;}
        .hexagon li:nth-child(1) {right:0; top:50%;}            /* θ = 0 */
        .hexagon li:nth-child(2) {right:25%; top:6.69872981%;}  /* θ = π/3 */
        .hexagon li:nth-child(3) {right:75%; top:6.69872981%;}  /* θ = 2π/3 */
        .hexagon li:nth-child(4) {right:100%; top:50%;}         /* θ = π */
        .hexagon li:nth-child(5) {right:75%; top:93.30127019%;} /* θ = 4π/3 */
        .hexagon li:nth-child(6) {right:25%; top:93.30127019%;} /* θ = 5π/3 */
        .hexagon li:nth-child(7) {right:50%; top:50%;}
        
        #prev, #next {position:absolute; top:50%; margin-top:-.85em; font-size:300%; z-index:99;}
        #prev {left:0;}
        #next {right:0;}
        .carousel {display:inline-block; vertical-align:middle;}
        .carousel .active {background-color:infobackground;}
        #carousel-one,
        #carousel-two {overflow:auto;}
        #carousel-one {white-space:nowrap; width:31em;}
        #carousel-one .item {margin-right:.5em;}
        #carousel-one .item:last-child {margin-right:0;}
        #carousel-two {white-space:normal; height:31em; width:11em;}
        #carousel-two .item {margin-bottom:.5em;}
        #carousel-two .item:last-child {margin-bottom:0;}
        
        strong {position:fixed; z-index:99; top:50%;margin-top:-.5em; left:0; right:0; width:100%; text-align:center; font-size:300%; color:red; opacity:0; -moz-transition:opacity 1s;}
        strong.active {opacity:1; -moz-transition:opacity 0s;}
        </style>
    </head>
    <body>
        <strong>"cyclingchange"</strong>
        <!-- Horizontal carousel -->
        <div id="carousel-one" class="carousel">
            <img alt="1" src=""><img alt="2" src=""><img alt="3" src=""><img alt="4" src=""><img alt="5" src=""><img alt="6" src=""><img alt="7" src=""><img alt="8" src=""><img alt="9" src=""><img alt="10" src=""><img alt="11" src="">
        </div>
        
        <!-- Vertical (and non-homogeneous structure) carousel -->
        <div id="carousel-two" class="carousel">
            <div><div>
                <img alt="1" class="item" src=""><span><span><img alt="2" class="item" src=""></span></span><img alt="3" class="item" src=""><img alt="4" class="item" src=""><img alt="5" class="item" src=""><img alt="6" class="item" src=""><img alt="7" class="item" src=""><img alt="8" class="item" src=""><img alt="9" class="item" src=""><img alt="10" class="item" src=""><img alt="11" class="item" src=""><img alt="12" class="item" src=""><img alt="13" class="item" src=""><img alt="14" class="item" src=""><img alt="15" class="item" src="">
            </div></div>
            <span></span>
        </div>
        
        <!-- Hexagonal carousel -->
        <ul id="carousel-three" class="carousel hexagon">
            <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
        </ul>
        
        <!-- Controls -->
        <p>
            <button id="prev" type="button"><abbr title="previous">&lt;</abbr></button>
            <button id="next" type="button"><abbr title="next">&gt;</abbr></button>
        </p>
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
        <script src="https://flesler-plugins.googlecode.com/files/jquery.scrollto-1.4.2.js"></script>
        <script src="ui.cycling.js"></script>
        <script>
        var change = function(event, data) {
            //
            // The function to be called when an instance of cycling is changing
            //
                
                $('strong').addClass('active');
                setTimeout(function () {
                    $('strong').removeClass('active')
                }, 10);
                
                // Make the new active item active
                $(this).cycling('option', 'items').removeClass('active').eq(data.value).addClass('active');
                
                // Scroll to it
                $(this).stop(true, true).scrollTo(data.$activeItem, {
                    duration: 500,
                    easing: 'easeOutCirc'
                });
            };
        
        // 1st carousel (horizontal)
        $('#carousel-one').cycling({
            value: 5,
            min: 2,
            max: 8,
            change: change
        });
        
        // Bind the previous change function on 'cyclingchange' for carousel 2 and 3
        $([$('#carousel-two')[0], $('#carousel-three')[0]]).bind('cyclingchange', change);
        
        // 2nd carousel (vertical)
        $('#carousel-two').cycling({
            value: 7,
            max: 12,
            items: $('.item'),
            loop: false,
            step: 2
        });
        // 3rd carousel (hexagonal)
        $('#carousel-three').cycling({
            value: 3
        });
        
        //
        // Controls (previous/next)
        //
        
        $('#prev').click(function(){
            $(':ui-cycling').cycling('prev');
        });
        $('#next').click(function(){
            $(':ui-cycling').cycling('next');
        });
        </script>
    </body>
</html>
    