به نام خدا
در این مطلب به شما نحوه ساخت گالری تصاویر انبساطی(expandable) با استفاده از پلاگین آماده آن را آموزش خواهیم داد.
شما می توانید فایل مربوط به این آموزش را از اینجا دانلود نمایید.
کد های زیر را در تگ <head> صفحه خود وارد نمایید:
<meta charset="utf-8"> <title>گالری عکس انبساطی (Tarahsite.net)</title> کد های مربوط به استایل <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> کد های مربوط به فراخوانی فایل های پلاگین(jquery) <script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/jquery.mobile.min.js"></script> <script src="js/main.js"></script>
کدهای زیر را نیز در تگ body وارد نمایید:
<header> <h1>(TarahSite.net)گالری عکس انبساطی</h1> </header> <section class="cd-single-item"> <div class="cd-slider-wrapper"> <--محل نوشتن کد مربوط به تصاویر --!> <ul class="cd-slider"> <li class="selected"><img src="img/img-1.jpg" alt="Product Image 1"></li> <li><img src="img/img-2.jpg" alt="Product Image 1"></li> <li><img src="img/img-3.jpg" alt="Product Image 2"></li> </ul> <!-- cd-slider - TarahSite.net --> <ul class="cd-slider-navigation"> <li><a href="#0" class="cd-prev inactive">بعدی</a></li> <li><a href="#0" class="cd-next">قبلی</a></li> </ul> <!-- cd-slider-navigation --> <a href="#0" class="cd-close">Close</a> </div> <!-- cd-slider-wrapper - TarahSite.net --> <div class="cd-item-info"> <h2>عنوان محصول</h2> <p>tarahsite.net - توضیحات</p> <button class="add-to-cart"> افزودن به سبد</button> </div> <!-- cd-item-info - TarahSite.net--> </section> <!-- cd-single-item - TarahSite.net--> <section class="cd-content"> <p> سایر مطالب <br /> TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net <br /> TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net <br /> TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net <br /> TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net <br /> TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net - TarahSite.net <br /> </p> </section>
برای افزودن عکس به گالری ، کد زیر را برای هر عکس در زیر تگ ul با کلاس cd-slider بنویسید:
<li><img src="آدرس محل عکس" alt="توضیحات"></li>