< درس > برمجة عارض الصور المنزلقة Image SlideShow باستخدام jQuery و CSS

أهلا وسهلا بك زائرنا الكريم في JO1R FORUM | منتديات شباب و صبايا الأردن، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

: اضافة رد جديد اضافة موضوع جديد

: [ درس ] برمجة عارض الصور المنزلقة Image SlideShow باستخدام jQuery و CSS

15-11-2011 01:20 مساءً

OMRAN

عضـو بـارز

تاريخ الإنضمام : 16-07-2007

رقم العضوية : 46

المشاركات : 1,315

الجنس :

قوة السمعة : 429,537,324

صورة للنتجية النهائية

معاينة

سوف نقوم في مشروعنا هذا بإنشاء 3 ملفات وهي
index.html الصفحة الرئيسية
Style/Style.css ملف الأنماط CSS
Js/slider.js الملف الذي سوف نكتب فيه أوامر jQuery

بعد أن نقوم بإنشاء الملفات السابقة نقوم بربطها بملف index.html عن طريق إضافة الأسطر التالية بين وسمي Head

رمز PHP:

لاحظ أننا قمنا بربط مكتبة jQuery أيضاً من خلال رابط ملف المكتبة من موقعها الرسمي أو بإمكانك تحميل المكتبة وربطها كما ربطنا ملف slider.js

الأسطر البرمجة في ملف index.php

رمز PHP:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

*

*

[ معاينة ] برمجة عارض الصور المنزلقة Image Slideshow باستخدام jQuery و CSS

*

*

*

*
*التالي

*السابق

*
*
*
*

*
*
*
*
*
*
*

*
*
*
*

*
في هذا الدرس سوف أريك كيف تقوم بتصميم واجهة احترافية لموقع خاص بالمصممين ليعرضوا فيه أعمالهم ونبذة عنهم. أعتقد أنك سوف تتعلم الكثير من التقنيات الجديدة ...
*
وصف 2
*
وصف 3
*
وصف 4
*

*

*

*

وكما تلاحظ فبإمكانك إضافة ما تشاء من الصور بداخل الطبقة scroll
رمز PHP:

ولا تنسى أن تقوم بإضافة وصف لكل صورة بداحل الفقرات li

رمز PHP:

في هذا الدرس سوف أريك كيف تقوم بتصميم واجهة احترافية لموقع خاص بالمصممين ليعرضوا فيه أعمالهم ونبذة عنهم. أعتقد أنك سوف تتعلم الكثير من التقنيات الجديدة ...
وصف 2
وصف 3
وصف 4

نقوم الآن بإضافة محتويات الملف Style/Style.css

رمز PHP:

#slider {
position:relative;
margin: 0 auto;
height:202px;
width:502px;
border:1px #8D8C8D solid;
background-color:#E1E1E0;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}

#ImgsWrapper {

position:relative;
height:188px;
width:488px;
margin:0 7px;
top:7px;
overflow:hidden;
}

#description {
position:absolute;
background-color:black;
width:100%;
bottom:0;
color:white;
text-align:right;
font-size:1em;
font-weight:bold;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

#description #desContent {
margin:10px;
}

#slider a {
display:block;
height:188px;
width:488px;
}

#slider img {
border:0;
}

#slider #sliderNextImg, #slider #sliderPreviousImg {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}

#slider #sliderNextImg, #slider #sliderPreviousImg {
position:absolute;
background-color:white;
text-align:center;
height:24px;
width:50px;
top:50%;
margin-top:-12px;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:black;
cursor:pointer;
padding-top:5px;
visibility:hidden;
z-index:9999;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

#slider #sliderNextImg {
left:20px;
}

#slider #sliderPreviousImg {
right:20px;
}

#slider #sliderNextImg:hover, #slider #sliderPreviousImg:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}

#slider ul {
display:none;
}

سوف نتعرف على أهم الخصائص في هذا الملف

رمز PHP:

overflow:hidden

لإخفاء الأجزاء التي تخرج من حواف الطبقة، وهي أهم خاصية في برمجة عارض الصور فهي تمكنك من إخفاء الصور الأخرى التي لا تظهر في مربع عارض الصور.
رمز PHP:

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

الخصائص السابقة تمكنك من ضبط شفافية أحد العناصر. كل خاصية من الخصائص السابقة متعلقة بمتصفح معين.

رمز PHP:

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

الخصائص السابقة تمكنك من إنشاء حواف دائرية للعناصر. كل خاصية من الخصائص السابقة متعلقة بمتصفح معين.

رمز PHP:

display:none;

عدم إظهار العنصر وعدم حجز مساحة له من التصميم.

نقوم الآن بالانتقال إلى أهم ملف وهو ملف Js/slider.js الذي سوف نكتب فيه أوامر jQuery
رمز PHP:

$(document).ready(function(){

var imgHeight = 188;
var imgWidth = 488;
var imagesCount = $("#slider img").length;
var autoSlideShowTime = 5000;
var correntImg = 0;

var t=setTimeout("$(#sliderNextImg).trigger(click);",autoSlideShowTime);

function showDescription() {
$("#desContent").html($("#slider ul li").slice(correntImg, correntImg+1).html());
var descriptionHeight = $("#description").height();
$(#description).animate({opacity: 0.0, height: 0px}, 1);
$(#description).delay(1000).animate({opacity: 0.5, height: 60px}, 500);
}

showDescription();

$("#slider").hover(function() {
$("#sliderNextImg, #sliderPreviousImg").css("visibility","visible");
}, function() {
$("#sliderNextImg, #sliderPreviousImg").css("visibility","hidden");
})

$("#sliderNextImg").click(function() {
clearTimeout(t)
if (correntImg != imagesCount-1) {
correntImg += 1;
$(#scroll).animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 1000);
t=setTimeout("$(#sliderNextImg).trigger(click);",autoSlideShowTime);
} else {
correntImg = 0;
$(#scroll).animate({marginTop: "0px"}, 2000);
t=setTimeout("$(#sliderNextImg).trigger(click);",1000+autoSlideShowTime);
}
showDescription()
});

$("#sliderPreviousImg").click(function() {
clearTimeout(t)
if (correntImg != 0) {
correntImg -= 1;
$(#scroll).animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 1000);
} else {
correntImg = imagesCount - 1;
$(#scroll).animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 2000);
}
t=setTimeout("$(#sliderNextImg).trigger(click);",autoSlideShowTime);
showDescription()
});

});

سوف نقوم الآن بشرح أهم الأوامر المكتوبة
رمز PHP:

$(document).ready

هذا عبارة عن حدث يتم تنفيذه عندما تكون الصفحة جاهزة (عندما يكتمل تحميل أسطر HTML للصفحة).

في البداية قمنا بتعريف 5 متغيرات المتغير الأول يحتوي على ارتفاع الصور والثاني عرض الصور والثالث عدد الصور والرابع نضبط فيه المدة الزمنية التي يقوم فيها عارض الصور بالانتقال إلى الصورة التالية تلقائياً ( كل ثانية = 1000 ) أما المتغير الخامس فيحتوي على الصورة الحالية التي تظهر حالياً في عارض الصور وكما هو ملاحظ فإن الصورة الأولى رقمها 0 والثانية 1 وهكذا.

بعد ذلك قمنا باستخدام الأمر setTimeout لكي يقوم بتنفيذ أمر معين بعد مدة زمنية معينة وهي المدة الموجودة في المتغير autoSlideShowTime، والأمر الذي سوف ينفذه هو الضغط على sliderNextImg كما لو أنك ضغطته بنفسك.

رمز PHP:

$("#desContent").html($("#slider ul li").slice(correntImg, correntImg+1).html());

الأمر السابق يقوم بتغيير محتويات طبقة الوصف باستخدام الوظيفة html() فهو يقوم بضبط محتويات الفقرة li المقابلة للصورة التي يتم عرضها الآن فلو افترضنا أن الصورة التي يتم عرضها الآن رقمها (correntImg=0) فإن هذا السطر البرمجي سوف يضع محتويات الفقرة الأولى li بداخل طبقة الوصف desContent وكل ذلك يتم بالاستعانة بالمحدد slice الذي قوم بانتقاء الفقرة المطلوبة من بين الفقرات الأخرى اعتماداً على رقم الصورة الموجود في المتغير فلو كان رقم الصورة 0 فسيقوم المحدد بتحديد العنصر الذي يقع بين 0 و 1 وهو العنصر 0.

رمز PHP:

$(#description).delay(1000).animate({opacity: 0.5, height: 60px}, 500);

الوظيفة delay تقوم بتنفيذ ما بعدها بعد مدة زمنية محددة والوظيفة animate أعتبرها من أهم ما يميز jQuery فهي تقوم بتغيير أحد خصائص العنصر تدريجياً خلال مدة زمنية معينة. فهي الآن تقوم بتغيير الشفافية حتى تصبح مساوية لـ 0.5 وتغيير الارتفاع حتى يصبح مساوياً لـ 60 بكسل خلال نصف ثانية ( كل ثانية = 1000 ) بمعنى أنك لو قمت بقياس الارتفاع في منتصف هذه المدة سوف تجده يساوي 30 بكسل لأنه يزيد حتى يصبح 60 بكسل خلال النصف ثانية.

[PHP]رمز PHP:

$("#sliderNextImg, #sliderPreviousImg").css("visibility","visible");

تقوم الوظيفة css بتغيير أنماط أي عنصر ففي السطر السابق تقوم بضبط الخاصية visibility إلى القيمة visible لزري التالي والسابق.

منقول من اكاديمية فارس سوفت

الملفات المرفقة zip