Untitled

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />
        <title>CJ Shuffle: A jQuery Ad Rotator</title>

        <style type="text/css">

            body {

                background-color: #F5F5F5;
                margin: 0;

            }

        </style>

        <!-- ******************************************************** -->
        <!-- BEGIN CODE TO COPY INTO THE HEAD SECTION OF YOUR WEBPAGE -->
        <!-- ******************************************************** -->

        <link rel="stylesheet" href="css/cj-shuffle.css" type="text/css" />

        <script type="text/javascript" src="js/modernizr-2.5.3.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
        <script type="text/javascript" src="js/jquery.clip-animation.min.js" ></script>
        <script type="text/javascript" src="js/cj-shuffle-swipe.js"></script>
        <script type="text/javascript" src="js/cj-shuffle.js" ></script>

        <script type="text/javascript">

            /* ************************ */
            /* BEGIN DEVELOPER SETTINGS */
            /* ************************ */
            jQuery(document).ready(function() {

                jQuery("#shuffle-gallery-1").cjShuffle({

                    /* The original image width */
                    imageWidth: 296,

                    /* The original image height */
                    imageHeight: 246,

                    /* The margin between each image in pixels */
                    imageMargin: 10,

                    /* The amound of pixels to scale down by for each item */
                    scaleDownBy: 30,

                    /* Choose to set the Slideshow to auto-play, true/false */
                    autoPlay: false,

                    /* The autoPlay delay in milliseconds */
                    autoPlayDelay: 4000,

                    /* Choose to randomize the slide order everytime someone visits your web page, true/false */
                    randomizeItems: false,

                    /* The link target when a slide is linked, options are "_parent" and "_blank" */
                    linkTarget: "_blank"

                });

                jQuery("#shuffle-gallery-2").cjShuffle({

                    /* The original image width */
                    imageWidth: 296,

                    /* The original image height */
                    imageHeight: 246,

                    /* The margin between each image in pixels */
                    imageMargin: 10,

                    /* The amound of pixels to scale down by for each item */
                    scaleDownBy: 30,

                    /* Choose to set the Slideshow to auto-play, true/false */
                    autoPlay: false,

                    /* The autoPlay delay in milliseconds */
                    autoPlayDelay: 4000,

                    /* Choose to randomize the slide order everytime someone visits your web page, true/false */
                    randomizeItems: false,

                    /* The link target when a slide is linked, options are "_parent" and "_blank" */
                    linkTarget: "_blank"

                });

            });

        </script>

        <!-- ****************************************************** -->
        <!-- END CODE TO COPY INTO THE HEAD SECTION OF YOUR WEBPAGE -->
        <!-- ****************************************************** -->

    </head>

    <body>

        <!-- ******************************************************** -->
        <!-- BEGIN CODE TO COPY INTO THE BODY SECTION OF YOUR WEBPAGE -->
        <!-- ******************************************************** -->

        <div class="shuffle-gallery" id="shuffle-gallery-1">

            <div class="shuffle-gallery-preloader">

                <img src="img/shuffle/assets/preloader.gif" width="55" height="18" alt="preloader" />

            </div>

            <ul>

                <!-- ***************** -->
                <!-- BEGIN BANNER ITEM -->
                <!-- ***************** -->

                <li title="img/shuffle/banners/1.png">

                    <!-- "class" options are "align-left" and "align-right", thsese are the text-align options -->
                    <!-- "title" attribute is optional.  If added it will link the entire slide to the url entered -->

                    <ul class="align-left" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                <!-- *************** -->
                <!-- END BANNER ITEM -->
                <!-- *************** -->

                <li title="img/shuffle/banners/2.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/3.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/4.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/5.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/6.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                <li title="img/shuffle/banners/7.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                <li title="img/shuffle/banners/8.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

            </ul>

            <!-- The next button -->
            <div class="shuffle-gallery-button">

                <img src="img/shuffle/assets/button.png" width="85" height="33" alt="next button" />

            </div>

            <!-- If JavaScript is disabled, we'll just display the first image -->
            <noscript>

                <a href="http://codecanyon.net/user/CodingJack" target="_blank"><img src="img/shuffle/banners/1.png" width="300" height="250" alt="jQuery Banner Rotator" /></a>

            </noscript>

        </div>

        <div class="shuffle-gallery" id="shuffle-gallery-2">

            <div class="shuffle-gallery-preloader">

                <img src="img/shuffle/assets/preloader.gif" width="55" height="18" alt="preloader" />

            </div>

            <ul>

                <!-- ***************** -->
                <!-- BEGIN BANNER ITEM -->
                <!-- ***************** -->

                <li title="img/shuffle/banners/1.png">

                    <!-- "class" options are "align-left" and "align-right", thsese are the text-align options -->
                    <!-- "title" attribute is optional.  If added it will link the entire slide to the url entered -->

                    <ul class="align-left" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                <!-- *************** -->
                <!-- END BANNER ITEM -->
                <!-- *************** -->

                <li title="img/shuffle/banners/2.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/3.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/4.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/5.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                 <li title="img/shuffle/banners/6.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                <li title="img/shuffle/banners/7.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

                <li title="img/shuffle/banners/8.png">

                    <ul class="align-right" title="http://codecanyon.net/user/CodingJack"></ul>

                </li>

            </ul>

            <!-- The next button -->
            <div class="shuffle-gallery-button">

                <img src="img/shuffle/assets/button.png" width="85" height="33" alt="next button" />

            </div>

            <!-- If JavaScript is disabled, we'll just display the first image -->
            <noscript>

                <a href="http://codecanyon.net/user/CodingJack" target="_blank"><img src="img/shuffle/banners/1.png" width="300" height="250" alt="jQuery Banner Rotator" /></a>

            </noscript>

        </div>

        <!-- ****************************************************** -->
        <!-- END CODE TO COPY INTO THE BODY SECTION OF YOUR WEBPAGE -->
        <!-- ****************************************************** -->

    </body>

</html>