ساخت گالری عکس انبساطی - طراح سایت

به نام خدا

در این مطلب به شما نحوه ساخت گالری تصاویر انبساطی(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>

 

 

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.