نمایش اسلایدی مطالب

نمایش اسلایدی مطالب

در این آموزش قصد داریم تا با استفاده از jQuery و پلاگین mopslider به شما نحوه ایجاد یک اسلایدر را بدهیم که به شما این امکان را میدهد تا چندین مطلب را به صورت اسلاید نمایش بدهید.

برای مشاهده لینک وارد شود

ما برای ذخیره اطلاعات  و نمایش آنها در این پلاگین نیاز به کار خاصی نداریم.ما فقط چند مورد از اطلاعات مورد نیاز را ذخیره خواهیم کرد.ما در زیر به شما تعدادی از اطلاعاتی را که باید در دیتابیس ذخیره کنیم نمایش دادیم.

db/slider.db.txt

Product Model | Product Description | Price | Path To Image | URL
Second Product | Description | Price | Path To Image | URL
Third Product | Description | Price | Path To Image | URL

هر یک از آیتم های بالا یک سطر خواهند بود که در اسلایدر نمایش داده خواهند شد.

این فایل در داخل پوشه db قرار خواهد گرفت.ما برای جلوگیری از امکان نوشتن در دیتابیس از لحظه بارگذاری در مرورگر یک فایل htaccess. اضافه می کنیم تا امنیت را افزایش بدهیم.شما در زیر نحوه انجام این کار را مشاهده می کنید.

# This will prevent opening the db dir in a browser

deny from all

# Will return a 403 error

این خط مانع از دسترسی به دایرکتوری هنگام باز بودن مرورگر میشود.

خوب حالا نگاهی به کدهای HTML می اندازیم.

i1

کدهای HTML بسیار ساده هستند.

<div id="main">	<!-- The main container -->
	<div class="titles">	<!-- Placeholder for the headings -->
	<h1>Notebooks</h1>
	<h2>Fresh on the market</h2>
	</div>

	<div class="container">	<!-- Styled and rounded -->
		<div id="slider">	<!-- Contains the generated products -->
		<?=$products?>	<!-- PHP var that holds the products -->
		</div>
		<div class="clear"></div>
		<!-- Clearing the floats, the old-fashioned way -->
	</div>
</div>

کدهای بالا بدلیل سادگی نیاز به توضیح خاصی ندارند.توضیحات اساسی در جلوی هر کد نیز نوشته شده است.

کدهای CSS نیز بسیار ساده هستند.

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* resetting some of the page elements */
	margin:0px;
	padding:0px;
}

body{
	/* styling the body */
	color:white;
	font-size:13px;
	background: url(img/bg.png);
	font-family:Arial, Helvetica, sans-serif;
}

h1{
	color:white;
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
	font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
	font-size:10px;
	font-weight:normal;
	letter-spacing:1px;
	padding-left:2px;
	text-transform:uppercase;
	white-space:nowrap;
}

.clear{
	/* Clear the floats */
	clear:both;
}

#main{
	/* The main container */
	width:800px;
	margin:0 auto;
}

.container,.titles{
	/* These classes share some common rules */
	color:white;
	margin-top:30px;
	width:100%;

	/* Hiding everything that overflows off the sides */
	overflow:hidden;

	background:url(img/bg_dark.png) #28313b;
	padding:20px 10px 10px;

	/* CSS rounded corners */
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

.titles{
	width:140px;
	padding:10px 15px;
	height:55px;
}

.product{
	/* The products class */
	width:370px;
	height:150px;
	background:url(img/product_bg.png) repeat-x;
	padding-top:10px;

	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

.product .pic{
	/* The product image */
	float:left;
	width:128px;
	height:128px;
	padding:0 10px 5px;
	margin-top:-15px;
}

.product .link,.product .price{
	/* Common rules */
	font-size:10px;
	text-transform:uppercase;
	padding:4px 0;
}

.product .price{
	/* Custom rule */
	color:#CCCCCC;
}

.product .title{
	font-size:16px;
	font-weight:bold;
}

a, a:visited {
	/* Styling the hyperlink */
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	/* The hover state */
	text-decoration:underline;
}

کدهای بالا نیز در بالای هر بخش توضیحات ضروری نوشته شده است.

i2

حالا به کدهای جاوااسکریپت توجه کنید.

$(document).ready(function(){

	/* After the page has finished loading */
	$("#slider").mopSlider({
		'w':800,
		'h':150,
		'sldW':500,
		'btnW':200,
		'itemMgn':20,
		'indi':"Slide To View More",
		'type':'tutorialzine',	/* A custom theme */
		'shuffle':0
	});

});

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

باور کنید که این پلاگین به اندازه ای ساده است که هیچ بخشی از کدهای آن نیازی به توضیح چندانی ندارد.

در بخش آخر هم به سراغ کدهای PHP می رویم که این بخش نیز بسیار ساده است.

$slides = file('db/slider.db.txt');
/* Read the file with file() - returns an array where */
/* every file row becomes a new array element */

$products='';
foreach($slides as $v)
{
	$data = preg_split('/\s*\|\s*/',$v);
	/* Split the file row by the vertical lines */
	/* Using preg_split to remove unnecessary spaces and tabulations */

	$products.='
	<div class="product">
	<div class="pic"><img src="'.$data[3].'" width="128" height="128" alt="'.htmlspecialchars($data[0]).'" /></div>
	<div class="title">'.$data[0].'</div>
	<div class="price">$'.$data[2].'</div>
	<div class="description">'.$data[1].'</div>
	<div class="link"><a href="'.$data[4].'" target="blank">Find out more</a></div>
	<div class="clear"></div>
	</div>';

	/* $data becomes an array with the product's properties */
}

شما فقط باید به این نکته توجه کنید که برای تغییر slider.db.text باید حلقه بالا را تغییر دهید.

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۳ دیدگاه ها

  1. سلام استاد

    سایتتتون مفید نیست
    از هرچی سایت مفیده مفید تره واقعا ازتون ممنونم

  2. سلام استاد

    اگه امکان داره آموزش آپلود عکس با php و ذخیره مسیر آن در mysql و نمایش آن در محل مورد نظر در وب سایت را هم آموزش بدید

    • با تشکر از نظر شما کاربر گرامی

      متاسفانه به دلیل درخواست های بالا آموزش ما به ترتیب به آنها رسیدگی می کنیم و این باعث میشود تا برخی کاربران برای مشاهده درخواست خود کمی منتظر بمانند ولی مطمئن باشید که به زودی آموزش مورد نظر شما نیز در وبسایت قرار خواهد گرفت.

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


− یک = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>