Select Page

در این آموزشی قصد داریم با استفاده از JQuery یک گالری اسلاید شو تمام صفحه درست کنیم . ایده ی ما بر این هست که عکس کوچک (بند انگشتی ) از عکسی که در حال نمایش آن هستیم در کنار صفحه داشته باشیم که وقتی عکس اصلی تغییر میکنه این عکس بندانگشتی هم به صورت عمودی بچرخه . عکس بزرگتر به سمت بالا یا پایین (بسته به جهتی که میخوایم حرکت کنیم) حرکت کنه. برای جابه جا کردن عکس ها قصد داریم از اسکرول کردن و کیبورد استفاده کنیم. عکس بند انگشتی آیکون زوم و فول اسکرین خواهد داشت،که عکس بزرگ در حال نمایش رو  تمام صفحه میکنه .

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

همچنین از پلاگین Mousewhee استفاده میکنیم.

عکس ها توسط Polina Efremova گرفته شده که میتونید پروفایل بیهنس ایشون رو ببینید.

با کدهای HTML شروع میکنیم

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

<div id="tf_loading" class="tf_loading"></div>

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

<div id="tf_bg" class="tf_bg">
	<img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
	<img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
	<img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
	<img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
	<img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
	<img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
	<div class="tf_pattern"></div>
</div>

از خصوصیت longdesc استفاده کردیم تا مسیر عکس های بند انگشتی رو معرفی کنیم . توضیحات مربوط به longdesc رو مطالعه کنید. آخرین div با کلاس  tf_pattern قرار است به عنوان Overlay روی عکس بزرگ قرار بگیرد. (طرح نقطه چین)

در این مرحله محتوای مخصوص به هر عکس رو نمایش می دهیم.

<div id="tf_content_wrapper" class="tf_content_wrapper">
	<div class="tf_content" id="content1" style="display:block;">
		<h2>Dreamer</h2>
		<p>Far far away, behind the word mountains, ... </p>
	</div>
	<div class="tf_content" id="content2">
		...
	</div>
	...
</div>

محتوای مربوط به هر عکس در المانی با کلاس “tf_content” قرار می گیرد.

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

<div id="tf_thumbs" class="tf_thumbs">
	<span id="tf_zoom" class="tf_zoom"></span>
	<img src="images/thumbs/1.jpg" alt="Thumb1"/>
</div>

تگ span به مناسب وضعیتی که دارد دارای کلاس “tf_zoom” یا “tf_fullscreen” خواهد بود.

و در نهایت المان هایی برای جابه جایی بین تصاویر درست می کنیم.

<div id="tf_next" class="tf_next"></div>
<div id="tf_prev" class="tf_prev"></div>

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

استایل دهی با CSS

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

.tf_bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
}

Container در صفحه fix شده و تمام صفحه را در میگیرد . عکس بزرگ position: absolute خواهد داشت و طول و عرض واقعی آن با استفاده از JQuery داده خواهد شد.

.tf_bg img{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	z-index: 1;
	display:none;
}

استایل div ی که کلاس tf_pattern داشت ، و به صورت نقطه چین روی عکس ظاهر خواهد شد .

.tf_pattern{
	position:absolute;
	width:100%;
	height:100%;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}

همینطور محتوای هر عکس را به صورت  positon: Absolute  استایل دهی میکنیم.

.tf_content{
	position:absolute;
	bottom:50px;
	left:50px;
	z-index:10;
	display:none;
}

هدر محتوای هر عکس به صورت زیر استایل دهی میشود.

.tf_content h2{
	color:#fff;
	font-size:90px;
	padding:0;
	margin:0;
	font-family: 'Dancing Script', arial, serif;
	text-shadow:1px 1px 2px #000;
}

متن محتوا دارای عکسی برای پس زمینه و سایه می باشد.

.tf_content p{
	color:#fff;
	padding:0;
	margin:0;
	background:transparent url(../images/bg_content.png) repeat top left;
	padding:40px;
	width:500px;
	font-family: 'PT Sans Narrow', arial, serif;
	font-size:20px;
	line-height:25px;
	text-transform:uppercase;
	text-shadow:2px 2px 1px #000;
	-moz-box-shadow:1px 1px 5px #202020;
	-webkit-box-shadow:1px 1px 5px #202020;
	box-shadow:1px 1px 5px #202020;
	border:4px solid #fff;
}

عکس بند انگشتی در قسمت وسط-راست صفحه قرار میگیرد . برای اینکه المانی را از نظر عمودی وسط صفحه قرار دهیم کافی ست ،Top:50% و Margin-top رو (منفی) ارتفاع المان قرار دهیم .

.tf_thumbs{
	position:absolute;	
	z-index:12;
	right:50px;
	top:50%;
	margin-top:-79px;
	border:4px solid #fff;
	-moz-box-shadow:1px 1px 5px #202020;
	-webkit-box-shadow:1px 1px 5px #202020;
	box-shadow:1px 1px 5px #202020;	
	-webkit-box-reflect:
		below 5px
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(0.6, transparent),
			to(rgb(18, 18, 18))
		);
}
.tf_thumbs img{
	display:block;
}

المان های جهت رو در کنار عکس بند انگشتی قرار دادیم.

.tf_next,
.tf_prev{
	width:35px;
	height:14px;
	position:absolute;
	top:50%;
	right:320px;
	z-index:100;
	cursor:pointer;
	background:transparent url(../images/nav.png) no-repeat top left;
	opacity:0.5;
}
.tf_next{
	background-position:0px -14px;
	margin-top:80px;
}
.tf_prev{
	background-position:0px 0px;
	margin-top:-55px;
}
.tf_next:hover,
.tf_prev:hover{
	opacity:0.9;
}

آیکون های زوم یا نمایش تمام صفحه در قسمت راست-بالا ی عکس بند انگشتی قرار میگیرند.

.tf_zoom,
.tf_fullscreen{
	width:20px;
	height:20px;
	position:absolute;
	top:6px;
	right:6px;
	cursor:pointer;
	z-index:100;
	opacity:0.6;
	background:transparent url(../images/icons.png) no-repeat top left;
}
.tf_zoom{
	background-position:0px -20px;
}
.tf_fullscreen{
	background-position:0px 0px;
}
.tf_zoom:hover,
.tf_fullscreen:hover{
	opacity:0.9;
}

لودینگ در وسط صفحه :

.tf_loading{
	position:fixed;
	top:50%;
	left:50%;
	margin:-30px 0px 0px -30px;
	width:60px;
	height:60px;
	background:#fff url(../images/loader.gif) no-repeat center center;
	z-index:999;
	opacity:0.7;
}

استایل دهی به پایان رسید ، حالا نوبت به Javascript رسید 😉

شروع به نوشتن JavaScript می کنیم.

اول،فایل های زیر رو لود میکنیم.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>

تابع preload رو برای عکس های بزرگ می نویسیم.

(function($) {
	$.fn.preload = function(options) {
		var opts 	= $.extend({}, $.fn.preload.defaults, options);
		o			= $.meta ? $.extend({}, opts, this.data()) : opts;
		var c		= this.length,
			l		= 0;
		return this.each(function() {
			var $i	= $(this);
			$('<img/>').load(function(i){
				++l;
				if(l == c) o.onComplete();
			}).attr('src',$i.attr('src'));	
		});
	};
	$.fn.preload.defaults = {
		onComplete	: function(){return false;}
	};
})(jQuery);

مقدار دهی های اولیه و تعریف متغیرها:

var $tf_bg				= $('#tf_bg'),
	$tf_bg_images		= $tf_bg.find('img'),
	$tf_bg_img			= $tf_bg_images.eq(0),
	$tf_thumbs			= $('#tf_thumbs'),
	total				= $tf_bg_images.length,
	current				= 0,
	$tf_content_wrapper	= $('#tf_content_wrapper'),
	$tf_next			= $('#tf_next'),
	$tf_prev			= $('#tf_prev'),
	$tf_loading			= $('#tf_loading');

عکس ها رو لود میکنیم:

$tf_bg_images.preload({
	onComplete	: function(){
		$tf_loading.hide();
		init();
	}
});

عکس اول را نمایش داده و بعضی Event ها رو مقداردهی میکنیم:

function init(){
	//get dimentions for the image, based on the windows size
	var dim	= getImageDim($tf_bg_img);
	//set the returned values and show the image
	$tf_bg_img.css({
		width	: dim.width,
		height	: dim.height,
		left	: dim.left,
		top		: dim.top
	}).fadeIn();

	//resizing the window resizes the $tf_bg_img
	$(window).bind('resize',function(){
		var dim	= getImageDim($tf_bg_img);
		$tf_bg_img.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		});
	});

	//expand and fit the image to the screen
	$('#tf_zoom').live('click',
	function(){
		if($tf_bg_img.is(':animated'))
			return false;

		var $this	= $(this);
		if($this.hasClass('tf_zoom')){
			resize($tf_bg_img);
			$this.addClass('tf_fullscreen')
			.removeClass('tf_zoom');
		}
		else{
			var dim	= getImageDim($tf_bg_img);
			$tf_bg_img.animate({
				width	: dim.width,
				height	: dim.height,
				top		: dim.top,
				left	: dim.left
			},350);
			$this.addClass('tf_zoom')
			.removeClass('tf_fullscreen');	
		}
	}
	);
	
	//click the arrow down, scrolls down
	$tf_next.bind('click',function(){
		if($tf_bg_img.is(':animated'))
			return false;
		scroll('tb');
	});
	
	//click the arrow up, scrolls up
	$tf_prev.bind('click',function(){
		if($tf_bg_img.is(':animated'))
			return false;
		scroll('bt');
	});
	
	//mousewheel events - down / up button trigger the scroll down / up
	$(document).mousewheel(function(e, delta) {
		if($tf_bg_img.is(':animated'))
			return false;
			
		if(delta > 0)
			scroll('bt');
		else
			scroll('tb');
		return false;
	});
	
	//key events - down / up button trigger the scroll down / up
	$(document).keydown(function(e){
		if($tf_bg_img.is(':animated'))
			return false;
		
		switch(e.which){
			case 38:	
				scroll('bt');
				break;	

			case 40:	
				scroll('tb');
				break;
		}
	});
}

این تابع برای کنترل کردن رفتار دکمه های قبل و بعد هستند.

function scroll(dir){
	//if dir is "tb" (top -> bottom) increment current, 
	//else if "bt" decrement it
	current	= (dir == 'tb')?current + 1:current - 1;
	
	//we want a circular slideshow, 
	//so we need to check the limits of current
	if(current == total) current = 0;
	else if(current < 0) current = total - 1;
	
	//flip the thumb
	$tf_thumbs.flip({
		direction	: dir,
		speed		: 400,
		onBefore	: function(){
			//the new thumb is set here
			var content	= '';
			content		+='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
			$tf_thumbs.html(content);
		}
	});

	//we get the next image
	var $tf_bg_img_next	= $tf_bg_images.eq(current),
	//its dimentions
	dim				= getImageDim($tf_bg_img_next),
	//the top should be one that makes the image out of the viewport
	//the image should be positioned up or down depending on the direction
	top	= (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
			
	//set the returned values and show the next image	
	$tf_bg_img_next.css({
		width	: dim.width,
		height	: dim.height,
		left	: dim.left,
		top		: top
	}).show();
		
	//now slide it to the viewport
	$tf_bg_img_next.stop().animate({
		top 	: dim.top
	},1000);
		
	//we want the old image to slide in the same direction, out of the viewport
	var slideTo	= (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
	$tf_bg_img.stop().animate({
		top 	: slideTo
	},1000,function(){
		//hide it
		$(this).hide();
		//the $tf_bg_img is now the shown image
		$tf_bg_img	= $tf_bg_img_next;
		//show the description for the new image
		$tf_content_wrapper.children()
		.eq(current)
		.show();
	});
	//hide the current description	
	$tf_content_wrapper.children(':visible')
	.hide()

}

تابع resize برای کنترل تغیر اندازه ی مرورگر و انیمیت کردن عکس برای اندازه ی جدید.

function resize($img){
	var w_w	= $(window).width(),
	w_h	= $(window).height(),
	i_w	= $img.width(),
	i_h	= $img.height(),
	r_i	= i_h / i_w,
	new_w,new_h;
	
	if(i_w > i_h){
		new_w	= w_w;
		new_h	= w_w * r_i;
		
		if(new_h > w_h){
			new_h	= w_h;
			new_w	= w_h / r_i;
		}
	}	
	else{
		new_h	= w_w * r_i;
		new_w	= w_w;
	}
	
	$img.animate({
		width	: new_w + 'px',
		height	: new_h + 'px',
		top		: '0px',
		left	: '0px'
	},350);
}

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

function getImageDim($img){
	var w_w	= $(window).width(),
	w_h	= $(window).height(),
	r_w	= w_h / w_w,
	i_w	= $img.width(),
	i_h	= $img.height(),
	r_i	= i_h / i_w,
	new_w,new_h,
	new_left,new_top;
	
	if(r_w > r_i){
		new_h	= w_h;
		new_w	= w_h / r_i;
	}
	else{
		new_h	= w_w * r_i;
		new_w	= w_w;
	}


	return {
		width	: new_w + 'px',
		height	: new_h + 'px',
		left	: (w_w - new_w) / 2 + 'px',
		top		: (w_h - new_h) / 2 + 'px'
	};
}

کد نویسی JQuery  هم به پایان رسید ، فونت ها رو از گوگل لود میکنیم.

<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />