ایجاد گالری تصاویر با CSS و jQuery

ایجاد گالری تصاویر با CSS و jQuery

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

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

خوب کار را با نوشتن بخش HTML آغاز می کنیم.بخش اصلی یک تگ است که یک کلاس و یک ID با نام ib-main-wrapper  را نگه میدارد.سپس در داخل آن نیز یک تگ دیگر اضافه می کنیم که برای استفاده از پلاگین jQuery.kinetic مورد نیاز است.در داخل آن تگ، کلاس  ib-main قرار دارد که ما دو نوع از عناصر آدرس را قرار دادیم.یکی برای آدرس عکس ها و دیگری برای آدرس متن ها یا محتویات آنها.لینک ها ی متن ها شبیه جهبه هایی خواهند بود که با کلیک روی آنها باز شده و تمام صفحه خواهند شد.

<div id="ib-main-wrapper" class="ib-main-wrapper">
	<div class="ib-main">
		<a href="#">
			<img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/>
			<span>Crabbed Age and Youth</span>
		</a>
		<a href="#">
			<img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/>
			<span>Cannot live together</span>
		</a>
		<a href="#" class="ib-content">
			<div class="ib-teaser">
				<h2>Welcome <span>Howdy, Stranger</span></h2>
			</div>
			<div class="ib-content-full">
				<!-- Some content -->
			</div>
		</a>
		...
	</div>
</div>

ایجاد جعبه ها برای  متون در داخل کلاس ib-content خواهند بود.سایز بزرگ تصاویر در داخل عنصر data-largesrc. قرار دارند.

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

<div id="ib-img-preview" class="ib-preview">
	<img src="${src}" alt="" class="ib-preview-img"/>
	<span class="ib-preview-descr" style="display:none;">${description}</span>
	<div class="ib-nav" style="display:none;">
		<span class="ib-nav-prev">Previous</span>
		<span class="ib-nav-next">Next</span>
	</div>
	<span class="ib-close" style="display:none;">Close Preview</span>
	<div class="ib-loading-large" style="display:none;">Loading...</div>
</div>

آنچه ما در این پلاگین داریم عبارتند از :عکس های بزرگ،دکمه های راهنما،دکمه بستن و عنصر بارگزاری.

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

<div id="ib-content-preview" class="ib-content-preview">
	<div class="ib-teaser" style="display:none;">{{html teaser}}</div>
	<div class="ib-content-full" style="display:none;">{{html content}}</div>
	<span class="ib-close" style="display:none;">Close Preview</span>
</div>

خوب حالا به سراغ نوشتن استایل ها می رویم.

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

.ib-main-wrapper{
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
    outline: none;
    /*height dynamic*/
}

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

.ib-main{
    position: relative;
    width: 2546px;
}

هر جعبه یا باکس عنصر دارای پس زمینه بوده و شناور(float) هستند که به ما این امکان را می دهند تا جعبه ها را برای نمایش تصاویر بزرگتر آنها را بکشیم.ما همچنین چند نوع نحوه حرکت برای نمایش بهتر جابجایی تصاویر و متون نیز تعیین کرده ایم.

.ib-main a{
    float: left;
    width: 210px;
    height: 210px;
    position: relative;
    overflow: hidden;
    margin: 0px 0px 2px 2px;
    cursor: move;
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover{
    background-size: 100% 100%;
}

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

.ib-main a img{
    opacity: 0.95;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover img{
    opacity: 0.8;
}

توضیحات هر عکس را ما بیرون جعبه(box) قرار می دهیم و هنگامی که کاربر موس را بر روی آنها قرار می دهد با افکتی خاص برای کاربر نمایش داده خواهد شد.

.ib-main > a > span{
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    bottom: -20px;
    left: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover > span{
    bottom: 0px;
}

وقتی ما روی عکس کلیک می کنیم، ما پس زمینه عکس را برای آماده شده برای نمایش کامل تغییر می دهیم تا علامت بارگذاری نمایش داده بشود.

.ib-main a.ib-loading,
.ib-main a.ib-loading:hover{
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    background-size: 31px 31px;
}
.ib-main a.ib-loading img,
.ib-main a.ib-loading:hover img{
    opacity: 0.5;
}

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

.ib-main > a.ib-loading > span,
.ib-main a.ib-loading > span{
    display: none;
}

خوب حالا به سراغ استایل های جعبه های(box) متون می رویم.

.ib-content{
    background: #f9f9f9;
}

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

.ib-content .ib-teaser{
    text-align: center;
    background: #333;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-content .ib-teaser:hover{
    background: #000;
}

سرتیتر و زیر تیر دارای استایل های زیر خواهند بود.

.ib-teaser h2{
    color: #fff;
    font-size: 26px;
    line-height: 26px;
    padding-top: 40%;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-teaser h2 span{
    text-transform: none;
    font-size: 16px;
    font-family: Georgia, serif;
    font-style: italic;
    display: block;
}

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

.ib-content-preview{
    position: absolute;
    top: 44px;
    left: 0px;
    background: #000;
    width: 100%;
    /* height dynamic*/
    display: none;
}

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

.ib-content-preview .ib-teaser h2{
    font-size: 50px;
    padding: 85px 40px 20px 40px;
}
.ib-content-preview .ib-teaser span{
    padding: 20px 0px 0px 5px;
    font-size: 22px;
}
.ib-content-full{
    font-family:'Oswald', serif;
    text-transform: none;
    line-height: 26px;
    margin: 0px 40px;
    border-top: 1px solid #333;
    padding: 20px 0px;
	font-size: 16px;
}
.ib-content-full p{
	padding: 5px 0px;
}

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

.ib-preview{
    overflow: hidden;
    position: absolute;
    top: 40px;
    display: none;
}

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

.ib-preview-descr{
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 999;
    font-size: 50px;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

تصاویر به خودی خود دارای موقعیت متغییر هستند و ارتفاع و عرض آنها توسط جاوااسکریپت اعمال میشود.

.ib-preview img{
	position: absolute;
}

مکان نما ها در دو طرف تصاویر قرار خواهند گرفت.

.ib-nav span{
	width: 53px;
	height: 87px;
	position: absolute;
	top: 50%;
	margin-top: -43px;
	cursor: pointer;
    text-indent: -9000px;
	opacity: 0.6;
	z-index: 999;
    background: transparent url(../images/nav.png) no-repeat top right;
	right: 10px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.ib-nav span.ib-nav-prev{
	background-position: top left;
	left: 10px;
    right: auto;
}

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

.ib-close{
	top: 7px;
	right: 7px;
	background: transparent url(../images/close.png) no-repeat center center;
	position: absolute;
	width: 24px;
	height: 24px;
	cursor: pointer;
	opacity: 0.2;
	z-index: 999;
    text-indent: -9000px;
}
.ib-nav span:hover, .ib-close:hover{
	opacity: 1;
}

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

.ib-loading-large{
    text-indent: -9000px;
    width: 60px;
    height: 60px;
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    z-index: 999;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    opacity: 0.9;
}

خوب حالا به سراغ کدهای جاوااسکریپت می رویم.

ابتدا ما تابع مورد نیاز خود را تعریف می کنیم.

var $ibWrapper	= $('#ib-main-wrapper'),
 
	Template	= (function() {
		...
})();

Template.init();

در ابتدا ما تعدادی متغییر و عناصر برای ذخیره سازی تعریف می کنیم.

var kinetic_moving				= false,
	// current index of the opened item
	current						= -۱,
	// true if the item is being opened / closed
	isAnimating					= false,
	// items on the grid
	$ibItems					= $ibWrapper.find('div.ib-main > a'),
	// image items on the grid
	$ibImgItems					= $ibItems.not('.ib-content'),
	// total image items on the grid
	imgItemsCount				= $ibImgItems.length,

تابع init یک کلاس را به تمام تصاویر اضافه می کند و پلاگین  jQuery.kinetic را فراخوانی می کند و عناصر اصلی را مقدار دهی می کند.

init						= function() {
		
		// add a class ib-image to the image items
		$ibImgItems.addClass('ib-image');
		// apply the kinetic plugin to the wrapper
		loadKinetic();
		// load some events
		initEvents();

	},

load Kinetic سایز های اصلی را تعیین می کند و پلاگین jQuery.kinetic را اعمال می کند.

loadKinetic					= function() {
	
	setWrapperSize();
	
	$ibWrapper.kinetic({
		moved	: function() {
			
			kinetic_moving = true;
			
		},
		stopped	: function() {
			
			kinetic_moving = false;
			
		}
	});
	
},

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

setWrapperSize				= function() {
	
	var containerMargins	= $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
	$ibWrapper.css( 'height', $(window).height() - containerMargins )
	
},

initEvents تمام آیتم های باز تابع را هنگامی که ما روی جعبه کلیک می کنیم فراخوانی می کند و ما هنگامی که اندازه پنجره را تغییر می دهیم سایز های جدید را دریافت می کند.

initEvents					= function() {

	// open the item only if not dragging the container
	$ibItems.bind('click.ibTemplate', function( event ) {
		
		if( !kinetic_moving )
			openItem( $(this) );
	
		return false;	
	
	});
	
	// on window resize, set the wrapper and preview size accordingly
	$(window).bind('resize.ibTemplate', function( event ) {
		
		setWrapperSize();
		
		$('#ib-img-preview, #ib-content-preview').css({
			width	: $(window).width(),
			height	: $(window).height()
		})
		
	});

},

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

openItem					= function( $item ) {
	
	if( isAnimating ) return false;
	
	// if content item
	if( $item.hasClass('ib-content') ) {
		
		isAnimating	= true;
		current	= $item.index('.ib-content');
		loadContentItem( $item, function() { isAnimating = false; } );
		
	}
	// if image item
	else {
	
		isAnimating	= true;
		current	= $item.index('.ib-image');
		loadImgPreview( $item, function() { isAnimating = false; } );
		
	}
	
},

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

loadImgPreview				= function( $item, callback ) {
	
	var largeSrc		= $item.children('img').data('largesrc'),
		description		= $item.children('span').text(),
		largeImageData	= {
			src			: largeSrc,
			description	: description
		};
	
	// preload large image
	$item.addClass('ib-loading');
	
	preloadImage( largeSrc, function() {
		
		$item.removeClass('ib-loading');
		
		var hasImgPreview	= ( $('#ib-img-preview').length > 0 );
		
		if( !hasImgPreview )
			$('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
		else
			$('#ib-img-preview').children('img.ib-preview-img').attr( 'src', largeSrc );
			
		//get dimentions for the image, based on the windows size
		var	dim	= getImageDim( largeSrc );
		
		$item.removeClass('ib-img-loading');
		
		//set the returned values and show/animate preview
		$('#ib-img-preview').css({
			width	: $item.width(),
			height	: $item.height(),
			left	: $item.offset().left,
			top		: $item.offset().top
		}).children('img.ib-preview-img').hide().css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		}).fadeIn( 400 ).end().show().animate({
			width	: $(window).width(),
			left	: ۰
		}, ۵۰۰, 'easeOutExpo', function() {
		
			$(this).animate({
				height	: $(window).height(),
				top		: ۰
			}, ۴۰۰, function() {
			
				var $this	= $(this);
				$this.find('span.ib-preview-descr, span.ib-close').show()
				if( imgItemsCount > 1 )
					$this.find('div.ib-nav').show();
					
				if( callback ) callback.call();
			
			});
		
		});
		
		if( !hasImgPreview )
			initImgPreviewEvents();
		
	} );
	
},

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

loadContentItem				= function( $item, callback ) {
	
	var hasContentPreview	= ( $('#ib-content-preview').length > 0 ),
		teaser				= $item.children('div.ib-teaser').html(),
		content				= $item.children('div.ib-content-full').html(),
		contentData			= {
			teaser		: teaser,
			content		: content
		};
		
	if( !hasContentPreview )
		$('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );
		
	//set the returned values and show/animate preview
	$('#ib-content-preview').css({
		width	: $item.width(),
		height	: $item.height(),
		left	: $item.offset().left,
		top		: $item.offset().top
	}).show().animate({
		width	: $(window).width(),
		left	: ۰
	}, ۵۰۰, 'easeOutExpo', function() {
	
		$(this).animate({
			height	: $(window).height(),
			top		: ۰
		}, ۴۰۰, function() {
			
			var $this	= $(this),
				$teaser	= $this.find('div.ib-teaser'),
				$content= $this.find('div.ib-content-full'),
				$close	= $this.find('span.ib-close');
				
			if( hasContentPreview ) {
				$teaser.html( teaser )
				$content.html( content )
			}
		
			$teaser.show();
			$content.show();
			$close.show();
			
			if( callback ) callback.call();
		
		});
	
	});
	
	if( !hasContentPreview )
		initContentPreviewEvents();	
	
},

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

// preloads an image
preloadImage				= function( src, callback ) {

	$('<img/>').load(function(){
	
		if( callback ) callback.call();
	
	}).attr( 'src', src );

},

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

initImgPreviewEvents		= function() {

	var $preview	= $('#ib-img-preview');
	
	$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {
		
		navigate( 'prev' );
		
	}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {
		
		navigate( 'next' );
		
	}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {
		
		closeImgPreview();
		
	});
	
	//resizing the window resizes the preview image
	$(window).bind('resize.ibTemplate', function( event ) {
		
		var $largeImg	= $preview.children('img.ib-preview-img'),
			dim			= getImageDim( $largeImg.attr('src') );
		
		$largeImg.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		})
		
	});
	
},

برای نمایش متن ها نیز ما باید قابلیت بسته شده را نیز داشته باشیم.

initContentPreviewEvents	= function() {

	$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {
		
		closeContentPreview();
		
	});
	
},

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

// navigate the image items in fullscreen mode
navigate					= function( dir ) {
	
	if( isAnimating ) return false;
	
	isAnimating		= true;
	
	var $preview	= $('#ib-img-preview'),
		$loading	= $preview.find('div.ib-loading-large');
	
	$loading.show();
	
	if( dir === 'next' ) {
		
		( current === imgItemsCount - 1 ) ? current	= ۰ : ++current;
		
	}
	else if( dir === 'prev' ) {
		
		( current === 0 ) ? current	= imgItemsCount - 1 : --current;
		
	}
	
	var $item		= $ibImgItems.eq( current ),
		largeSrc	= $item.children('img').data('largesrc'),
		description	= $item.children('span').text();
		
	preloadImage( largeSrc, function() {
		
		$loading.hide();
		
		//get dimentions for the image, based on the windows size
		var	dim	= getImageDim( largeSrc );
		
		$preview.children('img.ib-preview-img')
						.attr( 'src', largeSrc )
						.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
						})
						.end()
						.find('span.ib-preview-descr')
						.text( description );
		
		$ibWrapper.scrollTop( $item.offset().top )
				  .scrollLeft( $item.offset().left );
		
		isAnimating	= false;
		
	});
	
},

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

closeImgPreview				= function() {

	if( isAnimating ) return false;
	
	isAnimating	= true;
	
	var $item	= $ibImgItems.eq( current );
	
	$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
					.hide()
					.end()
					.animate({
						height	: $item.height(),
						top		: $item.offset().top
						}, ۵۰۰, 'easeOutExpo', function() {
						
						$(this).animate({
							width	: $item.width(),
							left	: $item.offset().left
							}, ۴۰۰, function() {
							
								$(this).fadeOut(function() {isAnimating	= false;});
							
						} );
					
					});

},

برای نمایش محتوا نیز ما به تابعی نیاز خواهیم داشت.

// closes the fullscreen content item
closeContentPreview			= function() {
	
	if( isAnimating ) return false;
	
	isAnimating	= true;
	
	var $item	= $ibItems.not('.ib-image').eq( current );
	
	$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
							.hide()
							.end()
							.animate({
								height	: $item.height(),
								top		: $item.offset().top
							}, ۵۰۰, 'easeOutExpo', function() {
								
								$(this).animate({
									width	: $item.width(),
									left	: $item.offset().left
								}, ۴۰۰, function() {
									
									$(this).fadeOut(function() {isAnimating	= false;});
									
								} );
							
							});

},

getImageDim اندازه تصویر را گرفته و آن را هنگامی که تمام صفحه است در وسط  صفحه قرار می دهد.

getImageDim					= function( src ) {
	
	var img     	= new Image();
	img.src     	= src;
	
	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,
		height	: new_h,
		left	: (w_w - new_w) / 2,
		top		: (w_h - new_h) / 2
	};

};

پایان

+2
-3


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

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

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

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

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

*


7 − = دو

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>