في كثير من الأحيان نريد أن نضع صورة img في خلفية الموقع وتكون متوافقة مع أبعاد المتصفح من دون تشويه الصورة الحفاظ على تناسبية أبعادها (الطول والعرض).
هذا لم يكن متاحا فعله باستعمال ال CSS فقط ولهذا وجب تدخل الجافاسكريبت لحل الإشكالية، ومن أجل ذلك قررنا إنشاء إضافة بسيطة لمكتبة الجيكويري تقوم بالمهمة وبهذا نضرب عصفورين بحجر واحد؛ بحيث نتعلم معا كيفية إنشاء إضافات الجيكويري (jQuery plugins) وفي نفس الوقت يكون لدينا سكريبت صغير نستعمله في مشاريعنا الخاصة كلما احتجنا إلى إضافة صورة Fullscreen للموقع.
*يمكن استعمال خاصية ال cover:background-size لجعل خلفية عنصر ما تأخذ جميع أبعاد هذا العنصر، ولكن في هذا الدرس سنتكلم عن الصورة وليس background.
إنشاء الدالة المجردة Anonymous function أول خطوة هي إنشاء دالة مجردة أو مجهولة إذا صحت الترجمة (Anonymous function) وهي دالة لاتملك أي اسم تقبل بارامتر واحد في حالتنا وهو jQuery الذي يحل محل رمز $ في الدالة (تسمى أيضا closure) وذلك لتجنب أي تعارض مع مكتبات أخرى (إذا تم استدعاؤها في نفس الموقع أو التطبيق) ربما تستخدم رمز $ كذلك.
(function($) { //يوضع الكود هنا })(jQuery)
1
2
3
|
(function($) {
//يوضع الكود هنا
})(jQuery)
|
ثم نقوم بإضافة دالة الإضافة (fullBg) إلى أوبجكت الجيكويري :
(function($) { $.fn.fullBg = function(){ // الكود هنا. }; })(jQuery)
1
2
3
4
5
6
7
|
(function($) {
$.fn.fullBg = function(){
// الكود هنا.
};
})(jQuery)
|
في مكتبة الجيكويري، التعبير $.fn هو نفسه $.prototype ويستعمل عندما نريد إضافة دالة أو Method ل object أو كائن معين في الجافاسكريبت و في حالتنا الأوبجكت هو الجيكويري ($).
الرياضيات بعد ذلك نضيف المنطق أو الكود الخاص بإضافتنا كما يلي :
(function($) { $.fn.fullBg = function(){ return this.each(function(){ var _this = $(this), _width = _this.width(), _height = _this.height(), _widthw = $(window).width(), _heightw = $(window).height(); if(_width/_widthw > _height/_heightw){ _this.css({ 'height':'100%', 'width':'auto' }); }else{ _this.css({ 'width':'100%', 'height':'auto' }); } }); }; })(jQuery)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
(function($) {
$.fn.fullBg = function(){
return this.each(function(){
var _this = $(this),
_width = _this.width(),
_height = _this.height(),
_widthw = $(window).width(),
_heightw = $(window).height();
if(_width/_widthw > _height/_heightw){
_this.css({
'height':'100%',
'width':'auto'
});
}else{
_this.css({
'width':'100%',
'height':'auto'
});
}
});
};
})(jQuery)
|
قمنا بتمرير دالة مجردة أخرى (Anonymous function) لدالة الجيكويري each() وفي داخلها تدور الأحداث :
- أولا قمنا بإنشاء أربع متغيرات : _width عرض الصورة، _height طول الصورة،_widthw عرض نافذة المتصفح، _heightw طول نافذة المتصفح.
- ثم قمنا بعمل شرط، وقارننا نسب العرض مقسوم على العرض و الطول على الطول للصورة ونافذة المتصفح وأضفنا الستايل الخاص بنا حسب تحقق الشروط.. هذه مسألة رياضيات ومنطق أكثر من كونها مسألة تقنيات برمجة..
و لا ننسى إضافة الستايل التالي للصورة المراد جعلها Fullscreen حتى نضمن بقاءها دائما في خلفية الموقع مهما نزلنا أو صعدنا.
.fullbg{ position: fixed; left: 0; top: 0; } /* لا ننسى إضافة الكلاس fullbg إلى وسم الصورة. */
1
2
3
4
5
6
7
8
|
.fullbg{
position: fixed;
left: 0;
top: 0;
}
/*
لا ننسى إضافة الكلاس fullbg إلى وسم الصورة.
*/
|
في الأخير نقوم باستدعاء الإضافة بعد استدعاء مكتبة الجيكويري طبعا، ونقوم بتطبيقها على الصورة كالتالي :
$('.fullbg').fullBg();
بحيث fullbg هي كلاس الصورة
<img src="test.jpg" class="fullbg" >
1
|
<img src="test.jpg" class="fullbg" >
|
و
هنا تجدون مثالا حياًّ لصورة Fullscreen باستعمال إضافتنا التي أنشأنها من الصفر.
