اسلاید متن روی عکس با jQuery

در این آموزش, قصد داریم به شما نحوه نمایش متن روی عکس را با رویداد mouseover نمایش بدیم . در آموزش های قبلی jQuery نحوه ساخت اسلایدر عکس با جی کوئری را دیدید.

در این مثال, ما از jQuery و CSS برای نمایش اسلاید متن روی عکس استفاده کردیم. ما از تابع slideToggle() جی کوئری برای ساخت افکت toggle با بردن ماوس روی چارچوب تصویر بهره بریم.

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

کد HTML اسلاید متن روی عکس

این کد به شما چارجوب تصویر با اسلاید متن را نشان میدهد. تگ DIV اسلاید متن بطور معمول مخفی است و با اجرای افکت toggle جی کوئری به هنگام بردن ماوس روی قسمت از تصویر , نمایش داده خواهد شد.

<div class="image-frame">
	<img src="4.jpg"/>
	<div class="image-caption">
	  <h2>Slide1</h2>
	  Mouse over Slide 1 to view the caption.
	</div>
</div>
<div class="image-frame">
	<img src="2.jpg"/>
	<div class="image-caption">
	  <h2>Slide2</h2>
	  Mouse over Slide 2 to view the caption.
	</div>
</div>

<h2>Slide1</h2>

Mouse over Slide 1 to view the caption.

</div>

<h2>Slide2</h2>

Mouse over Slide 2 to view the caption.

</div>

کد CSS اسلاید متن روی عکس

استایل های زیر برای پوزیشن دهی به به باکس ها استفاده شده است.

.image-frame {
	float: left;
	position: relative;
	margin: 5px;
	color: #333;
}
.image-frame .image-caption {
	display: none;
	opacity: 0.8;
	background:#cae5c1;
	width: 290px;
	position: absolute;
	bottom: 0px;
	padding: 5px;
}

.image-frame {

float: left;

position: relative;

margin: 5px;

color: #333;

}

.image-frame .image-caption {

display: none;

opacity: 0.8;

background:#cae5c1;

width: 290px;

position: absolute;

bottom: 0px;

padding: 5px;

}

اسلاید متن روی عکس با jQuery

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

$(document).ready(function() {
    $('.image-frame').hover(function(){
		$('.image-caption',this).slideToggle('slow');
	}, function(){
		$('.image-caption',this).slideToggle('slow');
    });
});