عرض رائع لمصغرات الصور Jquery

بواسطة dev بتاريخ أغسطس 08, 2010 القسم Jquery, دروس وتعليم

من الممتع ان تبعد عن عروض الفلاش التي تستهلك الكثير من الوقت بالتحميل ولكن مايبعدك عن الاستغناء عنها هي تلك المميزات الرهيبة التي تدعمها اليوم سوف نعرض عرض مميز بواسطة

Jquery يجعلك تستغني عن الفلاش تستطيع استخدامه كعرض مصغرات لمعرض صور او غير ذلك

بسم الله نبدأ

1- انشاء كود XHTMl

علينا بداية ان نقوم بانشاء قائمة بواسطة xhtml

2- انشاء كود CSS

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* حجم مصغرات الصور */
	-ms-interpolation-mode: bicubic; /* حل مشكلة العرض في اكسبلور */
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;  /* الصورة المستخدمه عند مرور الماوس*/
	border: none;
}

لاحظ : بالكود السابق تجد انه تم استخدام -ms-interpolation-mode: bicubic; هذا حل مشكلة عرض الصور بمتصفح اكسبلور حيث انك تجد دوماً باكسبلور مشكلة بعرض الصور لمزيد من المعلومات حول هذه المشكلة يمكنك مراجعه الرابط التالي
http://dev.3ql.com/?p=124

3- المرحلة الاخيرة اضافة الجافا سكربت

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'}); /*جعل الصورة دائما بالأعلي*/
	$(this).find('img').addClass("hover").stop() /* اضافة الكلاس اوفر وايقاف الحركة*/
		.animate({
			marginTop: '-110px',
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px', /* تكبير الصورة مع مرور الماوس */
			height: '174px', /* تكبير الصورة مع مرور الماوس */
			padding: '20px'
		}, 200); /* رقم 200 يعبر عن سرعه الحركة يمكنك تغييره */

	} , function() {
	$(this).css({'z-index' : '0'}); /* ارجاع الصورة  */
	$(this).find('img').removeClass("hover").stop()  /* حذف الكلاس اوفر*/
		.animate({
			marginTop: '0',
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', /* استعادة مقاس الصورة الافتراضي */
			height: '100px', /* استعادة مقاس الصورة الافتراضي */
			padding: '5px'
		}, 400);
});

---

استنتاج :

من الممتع ان تقوم بانشاء شيئ شبييه بالفلاش بدون استخدامه وذلك لما تقوم به الجافا من كفاءة افضل يفضل دائما ان تقوم بمحاولة التعديل والتطوير علي الدرس حتي تحصل علي شكل افضل للعرض وربما تتعلم المزيد اذا توصلت لشيئ مميز او اردت مناقشتنا لا تتردد باضافة تعليقك

تم بحمد الله

نشكركم علي سعة صدركم
واتمني التوفيق
مدونة عقل البرمجة