مصمم - مدونة تصميم وتطوير المواقع العربية

في سلسلة من دروس مكتبة جافا سكريبت الرائعة جي كويري سنصنع اليوم معرض صور ذكي قابل للعمل على أحجام صور مختلفة وبأي عدد بدون تعديل للكود الأصلي.

فلننظر سوياً إلى الكود في موضوع اليوم.

الفكرة

إذاً ما سنفعله لننتج هذا التأثير هو وضع تقسيمة div داخل الحاوي وسيتحرك باتجاه رأسي عند الضغط على الرابط “التالي” أو “السابق”. تكون هذه الحركة عن طريق إضافة خاصية position:absolute للتقسيمة الرئيسية التي تحتوي على جميع الصور والتلاعب بالإحداثيات داخل المستند.

التوصيف

بدايةً يجب توصيف داخل وسم body المستند كالآتي وسيتضمن أربعة صور.

    		

    			Panel 1
    		


    		

    			Panel 2
    		


    		

    			Panel 3
    		


    		

    			Panel 4
    		






Previous
Next

تنسيقات CSS

#wrap {
	width:760px;
	height:320px;
	margin:80px auto;
	background:#fff;
	overflow:hidden;
	position:relative;
}

#panelsWrap {
	position:absolute;
	top:0px;
}

.panel {
	width:100%;
	height:320px;
}

.preview {
	width:560px;
	float:left;
}

.description {
	width:160px;
	padding:20px;
	float:left;
}

إذا عرضنا المستند على المتصفح الآن كل ما سنراه هو صورة واحدة، هذا لأن المربع الرئيسي المعرف بwrap مزود بخاصية overflow:hidden وخاصيتين العرض بقيمة ٧٦٠ بيكسل والطول بقيمة ٣٢٠ بيكسل. النتيجة هي أن كل ما يلي الصورة يوجد خارج المربع الرئيسي ولذلك يحجب عن المستخدم.

كود الجي كويري

بعد توصيف المستند وإعطاء العناصر تنسيقات الـCSS المناسبة، دعنا نكتب كود الجافا سكريبت الذي سينتج الحركة المطلوبة بطريقة ذكية.

سيتحقق هذه التفاعل عن طريق تخصيص المتغيرات الآتية:

• wrapHeight الذي سيوضع في أول الكود لحفظ ارتفاع المربع الرئيسي
• panelHeight الذي أيضاً سيوضع في أول الكود لحفظ ارتفاع الصورة
• wrapCoord الذي سيوضع داخل الحدث click بمعنى أن قيمته ستتحدث عند كل ضغطة، وهذا لأن القيمة متغيرة بعد كل حركة لتقسيمة حاوي الصور panelsWrap ويجب تحديثها في كل مرة.
• wrapTopPosition الذي يحفظ الإحداثية top لتقسيمة حاوي الصور.
• wrapBottomPosition الذي يحفظ الإحداثية bottom لتقسيمة حاوي الصور.

:سنتحكم في منطق الكود عن طريق الجمل الشرطية الآتية

if ( (wrapTopPosition < wrapHeight) && (wrapTopPosition >= 0) ) {
افعل هذا!
} else {
افعل ذلك!
}

الجملة الشرطية التي نراها في الأعلى هي عند الضغط على “التالي” وهذا سيحرك تقسيمة حاوي الصور إلى الأعلى، أو باللغة التي يفهمها المتصفح فهذا يعني طرح قيمة تعادل إتفاع الصورة الواحدة من الإحداثية top. لذلك سنحتاج إلى مقارنة الإحداثية الحالية لحاوي الصور مع موقعه الأصلي ونهاية الصور لكي يرجع إلى نقطة الصفر عندما تنتهي الصور.

if ( (wrapTopPosition < (panelHeight*-1) ) || (wrapTopPosition <= (wrapHeight*-1) ) ) {
افعل هذا!
} else {
افعل ذلك!
}

أما هذه الجملة الشرطية فسوف تتفعل عند الضغط على "السابق" ولأن إتجاه الحركة أصبح معكوساً الآن، يجب أن نجعل الإرتفاعات بالسالب. قد يبدو الكود معقداً في بداية الأمر ولكنه سيتضح عند متابعة كل ضغطة وقيم كل متغيرات باستخدام console.log.

هكذا سيبدو كود الجافاسكريبت كاملاً!

$(function() {
	var wrapHeight = $('#panelsWrap').height();
	var panelHeight = $('.panel').height();

	var animationSpeed = 600;
	var animationEasing = 'easeOutQuart';

//	console.log('wrapHeight on load:', wrapHeight);
//	console.log('panelHeight on load:', panelHeight);

	$('a#next').click(function() {
		var wrapCoord = $('#panelsWrap').position();
		var wrapTopPosition = (wrapCoord['top']*-1)+panelHeight;

		if ( (wrapTopPosition < wrapHeight) && (wrapTopPosition >= 0) ) {
			$('#panelsWrap').stop(true, true).animate({
				'top' : '-='+panelHeight,
			}, animationSpeed, animationEasing);
//			console.log('turned true');
		} else {
			$('#panelsWrap').stop(true, true).animate({
				'top' : 0,
			}, animationSpeed, animationEasing);
//			console.log('turned false');
		}
		return false;
//		console.log('wrapTopPosition on click:', wrapTopPosition);
//		console.log('wrapHeight on click:', wrapHeight);

	});
	$('a#prev').click(function() {
		var wrapCoord = $('#panelsWrap').position();
		var wrapTopPosition = (wrapCoord['top'])-panelHeight;
		var wrapBottomPosition = (wrapHeight*-1)+panelHeight;

		if ( (wrapTopPosition < (panelHeight*-1) ) || (wrapTopPosition <= (wrapHeight*-1) ) ) {
			$('#panelsWrap').stop(true, true).animate({
				'top' : '+='+panelHeight,
			}, animationSpeed, animationEasing);
//			console.log('turned true');
		} else {
			$('#panelsWrap').stop(true, true).animate({
				'top' : wrapBottomPosition,
			}, animationSpeed, animationEasing);
//			console.log('turned false');
		}
		return false;
//		console.log('wrapTopPosition on click:', wrapTopPosition);
//		console.log('wrapBottomPosition on click:', wrapHeight*-1);

	});
});

إذاً ما هذا المسمى بـconsole.log؟

لمستخدمي إضافة فاير بغ التابعة لفاير فوكس وهي أداة قيمة جداً للمطور، سيظهر في لوحة التحكم أو الـconsole تحديث بكل القيم المتغيرات الموضوعة داخلها عند فتح المستند وعند الضغط.

بالتأكيد، في المنتج النهائي كل وظائف console.log ينصح بمحيها من الكود.

هكذا تكون طريقة عمل معرض للصور باستخدام جي كويري، دعوني أعرف آراءكم في التعليقات!