اسلاید شو چرخشی

با استفاده از این پلاگین می توانید اسلاید شویی چرخشی داشته باشید .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<link rel="stylesheet" href="screen.css" type="text/css" media="all" title="Screen" />
<link rel="stylesheet" href="dist/jquery.rondell.css" type="text/css" media="all" title="Screen">
<script src="libs/modernizr-2.0.6.min.js"></script>

2-  کد html جهت استفاده پلاگین

    <div id="introduction" class="page hasShadow">
        <h1 style="text-align:center"><a href="http://www.ijquery.ir">دنیای جی کوئری</a></h1>
      <div id="rondellCarousel" class="hidden">
          <a target="_blank" rel="rondell_1" href="images/galery/band.jpg" title="My favourite band">
              <img src="images/galery/band_small.jpg" alt="Band" title="My favourite band">
          <h5>Awesome concert</h5>
          <p>My favourite band.</p></a>
          <a target="_blank" rel="rondell_1" href="images/galery/dog.jpg" title="My dog">
              <img src="images/galery/dog_small.jpg" alt="Dog" title="My dog">
          <h5>My dog</h5>
          <p>Standing in front of a glass door and wants in.</p></a>
          <a target="_blank" rel="rondell_1" href="images/galery/cat.jpg" title="My cat">
              <img src="images/galery/cat_small.jpg" alt="Cat" title="My cat">
          <h5>My cat</h5>
          <p>Sleeping...</p></a>
          <a target="_blank" rel="rondell_1" href="images/galery/boar.jpg" title="Boar">
              <img src="images/galery/boar_small.jpg" alt="Boar" title="Boar">
          <h5>Dead boar on the wall</h5>
          <p>Hanging around.</p></a>
          <a target="_blank" rel="rondell_1" href="images/galery/snow.jpg" title="Snow">
              <img src="images/galery/snow_small.jpg" alt="Snow" title="Snow">
          <h5>Winter wonderland</h5>
          <p>The german alps.</p></a>
          <a target="_blank" rel="rondell_1" href="images/galery/rabbit.jpg" title="Rabbit">
              <img src="images/galery/rabbit_small.jpg" alt="Rabbit" title="Rabbit">
          <h5>Bunny</h5>
          <p>In my brothers garden.</p></a>
          <a target="_blank" rel="rondell_1" href="images/galery/trash.jpg" title="">
              <img src="images/galery/trash_small.jpg" alt="Trash" title="Trash">
          <h5>Trash</h5>
          <p>Somewhere in the USA.</p></a></div>
    </div><br>
    <script src="libs/jquery-1.9.1.min.js"></script>
    <script src="libs/jquery.mousewheel-3.0.6.min.js"></script>
    <script src="dist/jquery.rondell.js"></script>
    <script src="demohelpers.js"></script>
    <script type="text/javascript">
        (function () {
            $(function () {
                var carousel;
                carousel = $("#rondellCarousel > *").rondell({
                    preset: "carousel"
                });
                $(".resize-button").click(function (e) {
                    e.preventDefault();
                    return carousel.fitToContainer();
                });
                return $.ajax({
                    url: "http://www.wookmark.com/api/json",
                    dataType: "jsonp",
                    success: function (data, text, xhqr) {
                        var item, rondellContent, _i, _len, _ref;
                        if (text === "success") {
                            rondellContent = "";
                            _ref = data.slice(0, 25);
                            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                                item = _ref[_i];
                                rondellContent += "            <a href=\"" + item.image + "\" title=\"" + item.title + " @ " + item.url + "\" target=\"_blank\" style=\"display:none\">              <img src=\"" + item.preview + "\" title=\"" + item.title + "\" width=\"" + item.width + "\" height=\"" + item.height + "\"/>            </a>          ";
                            }
                            return $("#rondellCubic").html(rondellContent).children().rondell({
                                preset: "cubic"
                            });}}});});}).call(this);
</script>