درس تصميم معرض إحترافي للصور بإستخدام الجافا سكربت

في هذا الدرس سوف أشرح عملية إنشاء معرض تفاعلي للصور بإستخدام الجافا سكربت.
لن أقوم في بشرح أكود HTML كما أني لن أقوم بشرح أكود الJavaScript ولكن ما سوف اقوم بشرحة هو كيفية الإستفادة من و إستغلال ال HTML و الجافا سكربت من أجل الوصول إلى أداء مهمة معينة.

• سنقوم أولا بإنشاء معرض بسيطة (الوظيفة الأساسية)
• بعدها سنقوم بعمل بعض الإضافات و التأثيرات على المعرض
• ثالثا سوف نقوم بعمل بعض التحسينات على شكل المعرض (Makeup)

1- الشكل البسيط:
في البداية سوف نرسم الشكل العام للمعرض


كما نرى فإن هنالك 3 أزرار: التالي – السابق – تشغيل\ايقاف. إضافة إلى الصورة المعروضة. طبعا وظيفة معرض الصور هو عرض مجموعة من الصور في مكان واحد على صفحة إنترنت بدون الحاجة إلى إعادة تحميل الصفحة من أجل التنقل بين الصور.
سنبدأ بكود ال HTML التالي لصفحة إنترنت فارغة، حيث سوف نقوم مبدأيا بوضع الكود في وسم في داخل قسم ال Head من الصفحة

[code]


//Here Our Code Will Be








بعد ذلك سوف نضيف بعض ال HTML كود من أجل وضع زرين مبدأيين (التالي، السابق)، إضافة إلى كائن صورة لكي يتم عرض الصورة في داخله، سيتم ترتيب هذه المكونات في جدول من أجل الترتيب.
ضع الكود التالي داخل ال :












شيئان في الكود السابق سيكون من المهم لك التعرف عليهما، الأول عليك ملاحظة أن الضغط على الزر Previous يتم إستدعاء الدالة prev() من كود الجافا سكربت، كذلك الأمر مع زر التالي يتم إستدعاء الدالة next()، الأمر الآخر الذي يلزمك ملاحظته في وسم ال حيث أننا قمنا بإعطاء الوسم id بإسم “img” حيث سيكون بإمكاننا الوصول إلى هذا الوسم من داخل السكربت.
الآن نحن بحاجة إلى شيئ (مصفوفة) من أجل تخزين روابط الصور التي سوف يتم عرضها في المعرض، لذلك سوف نقوم بتعريف مصوفة في أعلى الوسم الخاص بالسكربت في ال :
انسخ الكود

var Imageslist =new Array();



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

function LoadImages(){
addImage ('1.jpg');
addImage ('2.jpg');
addImage ('3.jpg');
addImage ('4.jpg');
addImage ('5.png');

setImage();
}



تقوم هذه الدالة بإستدعاء دالة أخرى تسمى addImage() و ترسل إليه رابط للصورة، في كل مره يتم إستدعاء الدالة addImage() يتم إرسال رابط لأي صورة، لاحظ أن الصورة قد تكون في أي موقع وقد تكون تحمل أي اسم؛ في حالتنا هنا لدينا 5 صور موجوة في نفس المجلد الذي تتواجد فيه الصفحة. لاحظ أيضا أن الصورة رقم 5 تحمل الإمتداد png. بعد إضافة روابط الصور إلى المصفوفة يتم إستدعاء الدالة setImage() حيث سنتحدث عنها لاحقا.
انسخ الكود
plain text
function addImage(url){

Imageslist[count]=url;
count++;
}


الدالة addImage() تستقبل متغير يحمل رابط الصورة كما قلنا سابقة و تضيفه إلى نهاية المصفوفة. طبعا من الواضح أننا سوف نحتاج لتعريف المتغير count في بداية كود السكربت (اسفل تعريف المصفوفة).
انسخ الكود
plain text
var count=0;



كما قلنا سابقا يلزمنا إستدعاء الدالة Loadimages() عند تحميل الصفحة من أجل تجهيز المصفوفة وتعبئتها بالروابط، إذن يجب علينا التعديل على الوسم الخاص بالصفحة ووضعه بالشكل التالي:



بعد ذلك سوف نقوم ببرمجة الأزرار بحيث عند الضغط على زر التالي أو السابق يتم الإنتقال إلى الصورة التالية او السابقة، يتم عمل ذلك من خلال إستدعاء كل من الدالتين next() و prev() عند الضغط على الأزرار، إذن يلزمنا تعديل وسوم الأزرار كالتالي:



أيضا شكل كل من الدالتين سيكون كالتالي:
انسخ الكود
plain text
function next()
{
if(current >= (Imageslist.length-1))
current=0;
else
current ++;

setImage();
}

function prev()
{
if(current <= 0)
current = Imageslist.length-1;
else
current --;

setImage();
}



لدينا متغير بإسم current يمثل رقم index الصورة المعروضة من المصفوفة. حيث يتم في داخل الدالة next فحص قيمة المتغير current إذا كانت اكبر أو مساوية من عدد الصور الموجودة في المصفوفة يتم إعطائها القيمة 0 (ما يعني عند الوصول إلى الصورة الأخيرة يتم الإنتقال إلى الصورة الأولى)، إذا لم تكن قيمة ال current اكبر او يساوي عدد الصور في المصفوفة يتم زيادة قيمة المتغير بواحد من أجل الإنتقال إلى الصورة التالي. نفس الأمر مع الدالة prev ولكن يتم فحص فيما إذا كانت قيمة المتغير تساوي او اقل من صفر يتم إعطاء المتغير ال index الخاص بالصورة الأخيرة (ما يعني إذا كنا نقف على أول صورة و تم الضغط على السابق يتم الإنتقال إلى الصورة الأخيرة). إذا لم تكن قيمة المتغير مساوية لصفر يتم طرح واحد منه. طبعا من الواضح أنه يلزمنا تعريف متغير بإسم current في أعلى كود السكربت (تحت تعريف المتغير count).
انسخ الكود
plain text
var current=0;



الآن نعود إلى الدالة setImage()، كما لاحظنا فإن الدالة next و الدالة prev تقوم أيضا بإستدعاء الدالة setImage. ربما تكون قد تكهنت بشكل هذه الدالة حيث تتمثل الدالة بالكود البسيط التالي:
انسخ الكود
plain text
function setImage()
{
document.getElementById("img").src=Imageslist[current];
}



يتم في هذه الدالة تغيير قيمة خاصية ال src الذي يمثل رابط الصورة الخاص بالوسم الذي يحمل ال id المسمى img، حيث يتم إسناد القيمة الموجودة في الفهرس current في المصفوفة الخاصة بروابط الصور. طبعا يتم إستدعاء هذه الدالة من ثلاث أماكن كما لاحظنا، حيث يتم إستدعائها من داخل الدالتين next() و prev() بحيث يتم تغيير قيمة المتغير current قبل إستدعاء هذه الدالة. أيضا عندما يتم إستدعاء هذه الدالة من داخل الدالة LoadImages() بكون المتغير current يحمل القيمة صفر؛ ما يعني أنه سوف يتم عرض الصورة الأولى.
في هذه اللحظة بإمكانك حفظ الكود في ملف html و فتحه في المتصفح، ستلاحظ أننا قد إنتهينا عمليا من الوظيفة الأساسية لمعرض الصور، حيث يتم عرض الصور مع إتاحة زرين للتنقل بين الصور.

2- إضافات و تأثيرات:
أول الإضافات التي سوف نقوم بعملها هي زر لتشغيل العرض التقديمي و إيقافه، حيث يبدأ عند الضغط على زر Play العرض (ويتحول الزر إلى Pause) وعند الضغط على الزر Pause يتم إيقاف تشغيل العرض. في العرض يتم الإنتقال إلى الصورة التالية بعد 3 ثواني.
لعمل ذلك سوف نحتاج أول لتعريف زر بين زري التالي و السابق، سيكون تعريف هذا الزر بالشكل التالي:


كما نلاحظ أنه عند الضغط على الزر يتم إستدعاء الدالة PlayPause()، أيضا الزر يحمل ال id = plypus مما سوف يمكننا من الوصل إليه من داخل السكربت (حيث سوف نقوم بتغيير قيمة من Play إلى Pause و العكس).
الدالة PlayPause() :
انسخ الكود
plain text
function PlayPause()
{
if(play==0)
{
play=1;
document.getElementById("plypus").value="Pause";
pt=setTimeout("playSlideShow()",3000);
}else
{
play=0;
document.getElementById("plypus").value="Play";
clearTimeout(pt);
}
}


في هذه الدالة يتم فحص قيمة متغير بإسم play إذا كان يحمل القيمة 0 (أي أن العرض متوقف) يتم إعطاء هذا المتغير القيمة 1 و بعدها يتم تعديل النص الظاهر في الزر الخاص بالتشغيل و كتابة “Pause” في داخله، بعد ذلك يتم إستخدام الدالة (المضمنة في الجافا سكربت) setTimeout() حيث تقوم هذه الدالة بإستداعاء الدالة playSlideShow() بعد 3 ثواني (3000 ملي ثانيه = 3 ثواني). –هنا أفترض ان لديك معرفة مسبقة بطريقة عمل ال setTimeout و ال clearTimeout إذا لم يكن لديك هذه المعرفة عليك بالرابط التالي-. إذا كان المتغير play يحمل القيمة 1 يتم تحويل قيمته إلى 0 و يتم تغير النص في الزر، و بعدها يتم إيقاف المؤقت الذي يستدعي الدالة playSlideShow() بشكل متكرر.

من الواضح أننا بحاجة لتعريف المتغيرين play و pt و ذلك في أعلى كود السكربت (تحت تعريف ال current):
انسخ الكود
plain text
var play=0;
var pt;



بالنسبة للدالة playSlideShow() فهي بسيطة جدا و تحمل الشكل التالي:
انسخ الكود
plain text
function playSlideShow()
{
pt=setTimeout("playSlideShow()",3000);
next();
}

الله يسلمكم شكرا لمروركم

مشكور جاري التركيب على منتداي