گالری حرفه ای عکس

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

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

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

   <link href='flipping_gallery.css' rel='stylesheet' type='text/css' />
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script type="text/javascript" src="jquery.flipping_gallery.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script>
     $(document).ready( function() {
       $(".gallery").flipping_gallery({
          enableScroll: true,
	     autoplay: 2000
	  });    
    $(".next").click(function() {
      $(".gallery").flipForward();
         return false;
      });
      $(".prev").click(function() {
         $(".gallery").flipBackward();
            return false;
         });
      });
</script>

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

      <div class="page-container"> 
        <div class="gallery">
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/1.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/2.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/3.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/4.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/5.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/1.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/2.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/3.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/4.jpg"></a>
            <a href="#" data-caption="دنیای جی کوئری"><img src="img/5.jpg"></a>
        </div>
        <div class="navigation">
          <a href="#" class="btn prev">قبلی</a>
          <a href="#" class="btn next">بعدی</a>
        </div>
      </div>