• 0
kldoon

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

سؤال

بسم الله الرحمن الرحيم

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

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

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

• سنقوم أولا بإنشاء معرض بسيطة (الوظيفة الأساسية)

• بعدها سنقوم بعمل بعض الإضافات و التأثيرات على المعرض

• ثالثا سوف نقوم بعمل بعض التحسينات على شكل المعرض (Makeup)

1- الشكل البسيط:

في البداية سوف نرسم الشكل العام للمعرض.

post-133895-1252359467_thumb.png

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

سنبدأ بكود ال HTML التالي لصفحة إنترنت فارغة، حيث سوف نقوم مبدأيا بوضع الكود في وسم <script> في داخل قسم ال Head من الصفحة.

<html>
<head>
<script type="text/javascript">
//Here Our Code Will Be
</script>
</head>
<body>

</body>
</html>

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

ضع الكود التالي داخل ال <Body>:

<table align="center">
<tr>
<td ><img id="img" src=""/></td>
</tr>
<tr>

<td align="center">
<input type="button" value="Previous" />
<input type="button" value="Next" />
</td>
</tr>

</table>

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

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]var[/color] Imageslist [color= #339933;]=[/color][color= #000000; font-weight: bold;]new[/color] [color= #990000;]Array[/color][color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]
  2.  

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] LoadImages[color= #009900;]([/color][color= #009900;])[/color][color= #009900;]{[/color]
  2. addImage [color= #009900;]([/color][color= #0000ff;]'1.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color]
  3. addImage [color= #009900;]([/color][color= #0000ff;]'2.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color]
  4. addImage [color= #009900;]([/color][color= #0000ff;]'3.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color]
  5. addImage [color= #009900;]([/color][color= #0000ff;]'4.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color]
  6. addImage [color= #009900;]([/color][color= #0000ff;]'5.png'[/color][color= #009900;])[/color][color= #339933;];[/color]
  7.  
  8. setImage[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]
  9. [color= #009900;]}[/color]
  10.  

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] addImage[color= #009900;]([/color]url[color= #009900;])[/color][color= #009900;]{[/color]
  2.  
  3. Imageslist[color= #009900;][[/color][color= #990000;]count[/color][color= #009900;]][/color][color= #339933;]=[/color]url[color= #339933;];[/color]
  4. [color= #990000;]count[/color][color= #339933;]++;[/color]
  5. [color= #009900;]}[/color]
  6.  

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]var[/color] [color= #990000;]count[/color][color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  2.  

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

<body onload="LoadImages()">

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

<input type="button" value="Previous" onclick="prev()"/>
<input type="button" value="Next" onclick="next()"/>

أيضا شكل كل من الدالتين سيكون كالتالي:

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] [color= #990000;]next[/color][color= #009900;]([/color][color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. [color= #b1b100;]if[/color][color= #009900;]([/color][color= #990000;]current[/color] [color= #339933;]>=[/color] [color= #009900;]([/color]Imageslist[color= #339933;].[/color]length[color= #cc66cc;]-1[/color][color= #009900;])[/color][color= #009900;])[/color]
  4. [color= #990000;]current[/color][color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  5. [color= #b1b100;]else[/color]
  6. [color= #990000;]current[/color] [color= #339933;]++;[/color]
  7.  
  8. setImage[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]
  9. [color= #009900;]}[/color]
  10.  
  11. [color= #000000; font-weight: bold;]function[/color] [color= #990000;]prev[/color][color= #009900;]([/color][color= #009900;])[/color]
  12. [color= #009900;]{[/color]
  13. [color= #b1b100;]if[/color][color= #009900;]([/color][color= #990000;]current[/color] [color= #339933;]<=[/color] [color= #cc66cc;]0[/color][color= #009900;])[/color]
  14. [color= #990000;]current[/color] [color= #339933;]=[/color] Imageslist[color= #339933;].[/color]length[color= #cc66cc;]-1[/color][color= #339933;];[/color]
  15. [color= #b1b100;]else[/color]
  16. [color= #990000;]current[/color] [color= #339933;]--;[/color]
  17.  
  18. setImage[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]
  19. [color= #009900;]}[/color]
  20.  

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]var[/color] [color= #990000;]current[/color][color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  2.  

الآن نعود إلى الدالة setImage()، كما لاحظنا فإن الدالة next و الدالة prev تقوم أيضا بإستدعاء الدالة setImage. ربما تكون قد تكهنت بشكل هذه الدالة حيث تتمثل الدالة بالكود البسيط التالي:

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] setImage[color= #009900;]([/color][color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"img"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color]Imageslist[color= #009900;][[/color][color= #990000;]current[/color][color= #009900;]][/color][color= #339933;];[/color]
  4. [color= #009900;]}[/color]
  5.  

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

في هذه اللحظة بإمكانك حفظ الكود في ملف html و فتحه في المتصفح، ستلاحظ أننا قد إنتهينا عمليا من الوظيفة الأساسية لمعرض الصور، حيث يتم عرض الصور مع إتاحة زرين للتنقل بين الصور.

2- إضافات و تأثيرات:

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

لعمل ذلك سوف نحتاج أول لتعريف زر بين زري التالي و السابق، سيكون تعريف هذا الزر بالشكل التالي:

<input type="button" value="Play" id="plypus" onclick="PlayPause()"/>

كما نلاحظ أنه عند الضغط على الزر يتم إستدعاء الدالة PlayPause()، أيضا الزر يحمل ال id = plypus مما سوف يمكننا من الوصل إليه من داخل السكربت (حيث سوف نقوم بتغيير قيمة من Play إلى Pause و العكس).

الدالة PlayPause() :

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] PlayPause[color= #009900;]([/color][color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. [color= #b1b100;]if[/color][color= #009900;]([/color]play[color= #339933;]==[/color][color= #cc66cc;]0[/color][color= #009900;])[/color]
  4. [color= #009900;]{[/color]
  5. play[color= #339933;]=[/color][color= #cc66cc;]1[/color][color= #339933;];[/color]
  6. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]value[color= #339933;]=[/color][color= #0000ff;]"Pause"[/color][color= #339933;];[/color]
  7. pt[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"playSlideShow()"[/color][color= #339933;],[/color][color= #cc66cc;]3000[/color][color= #009900;])[/color][color= #339933;];[/color]
  8. [color= #009900;]}[/color][color= #b1b100;]else[/color]
  9. [color= #009900;]{[/color]
  10. play[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  11. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]value[color= #339933;]=[/color][color= #0000ff;]"Play"[/color][color= #339933;];[/color]
  12. clearTimeout[color= #009900;]([/color]pt[color= #009900;])[/color][color= #339933;];[/color]
  13. [color= #009900;]}[/color]
  14. [color= #009900;]}[/color]
  15.  

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

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]var[/color] play[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  2. [color= #000000; font-weight: bold;]var[/color] pt[color= #339933;];[/color]
  3.  

بالنسبة للدالة playSlideShow() فهي بسيطة جدا و تحمل الشكل التالي:

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] playSlideShow[color= #009900;]([/color][color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. pt[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"playSlideShow()"[/color][color= #339933;],[/color][color= #cc66cc;]3000[/color][color= #009900;])[/color][color= #339933;];[/color]
  4. [color= #990000;]next[/color][color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]
  5. [color= #009900;]}[/color]
  6.  

حيث تقوم الدالة بإستدعاء نفسها كل 3 ثواني، و بعدها يتم إستدعاء الدالة next() من أجل الإنتقال إلى الصورة التالية.

الإضافة التالية التي سوف نقوم بعملها، هي إضافة تأثير Fade-in (تلاش الدخول) عند الإنتقال من صورة إلى أخرى، مما سوف يكسب المعرض جانب جمالي كبير.

أول شيئ سوف نحتاج لتطبيق هذه الفكرة هو دالة تقوم بتغيير قيمة شفافية\ اشباع الصورة "Opacity"، لذلك حصلنا على هذه الدالة التي تستقبل كائن، إضافة إلى قيمة بين ال 0 و ال100 و تقوم بإعطاء الكائن شفافية بناء على هذه القيمة (0 تعني شفافية تامه، الجسم مختفي). –حصلنا على هذا الكود من هنا-

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] setOpacity[color= #009900;]([/color]obj[color= #339933;],[/color] opacity[color= #009900;])[/color] [color= #009900;]{[/color]
  2.  
  3. opacity [color= #339933;]=[/color] [color= #009900;]([/color]opacity [color= #339933;]==[/color] [color= #cc66cc;]100[/color][color= #009900;])[/color]?[color= #cc66cc;]99.999[/color][color= #339933;]:[/color]opacity[color= #339933;];[/color]
  4.  
  5. [color= #666666; font-style: italic;]// IE/Win[/color]
  6. obj[color= #339933;].[/color]style[color= #339933;].[/color]filter [color= #339933;]=[/color] [color= #0000ff;]"alpha(opacity:"[/color][color= #339933;]+[/color]opacity[color= #339933;]+[/color][color= #0000ff;]")"[/color][color= #339933;];[/color]
  7.  
  8. [color= #666666; font-style: italic;]// Safari<1.2, Konqueror[/color]
  9. obj[color= #339933;].[/color]style[color= #339933;].[/color]KHTMLOpacity [color= #339933;]=[/color] opacity[color= #339933;]/[/color][color= #cc66cc;]100[/color][color= #339933;];[/color]
  10.  
  11. [color= #666666; font-style: italic;]// Older Mozilla and Firefox[/color]
  12. obj[color= #339933;].[/color]style[color= #339933;].[/color]MozOpacity [color= #339933;]=[/color] opacity[color= #339933;]/[/color][color= #cc66cc;]100[/color][color= #339933;];[/color]
  13.  
  14. [color= #666666; font-style: italic;]// Safari 1.2, newer Firefox and Mozilla, CSS3[/color]
  15. obj[color= #339933;].[/color]style[color= #339933;].[/color]opacity [color= #339933;]=[/color] opacity[color= #339933;]/[/color][color= #cc66cc;]100[/color][color= #339933;];[/color]
  16. [color= #009900;]}[/color]
  17.  

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

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

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] ImgOpen[color= #009900;]([/color][color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. op[color= #339933;]++;[/color]
  4.  
  5. img[color= #339933;]=[/color]document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"img"[/color][color= #009900;])[/color][color= #339933;];[/color]
  6. setOpacity[color= #009900;]([/color]img[color= #339933;],[/color]op[color= #009900;])[/color][color= #339933;];[/color]
  7. t[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"ImgOpen()"[/color][color= #339933;],[/color][color= #cc66cc;]10[/color][color= #009900;])[/color][color= #339933;];[/color]
  8.  
  9. [color= #b1b100;]if[/color][color= #009900;]([/color]op [color= #339933;]>=[/color][color= #cc66cc;]100[/color][color= #009900;])[/color]
  10. [color= #009900;]{[/color]
  11. op[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  12. clearTimeout[color= #009900;]([/color]t[color= #009900;])[/color][color= #339933;];[/color]
  13. [color= #009900;]}[/color]
  14. [color= #009900;]}[/color]
  15.  

سنحتاج لتعريف المتغير op الذي يمثل الشفافية، و المتغير t الازم لعمل دالة التوقيت، أضافة إلى المتغير loadT الذي سوف يتم إستخدامه لاحقا، في اعلى الكود (تحت تعريف المتغير pt و play):

انسخ الكود
  1. [color= #000000; font-weight: bold;]var[/color] t[color= #339933;],[/color]loadT[color= #339933;],[/color]op[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]
  2.  

نعود للدالة السابقة ImgOpen() حيث يتم زيادة قيمة الشفافية في كل مره يتم فيها دخول هذه الدالة، مع العلم بعدها يتم إسناد قيمة الشفافية الحالية الممثلة بالمتغير op إلى الصورة المعروضة حاليا من خلال الدالة setOpacity()، بعد ذلك تقوم الدالة بإستدعاء نفسها كل 10 ملي ثانية، عندما تصبح قيمة الإشباع تساوي أو اكبر من 100 يتم إيقاف المؤقت الذي يستدعي الدالة و تتوقف عن التنفيذ، ويتم إسناد القيمة 0 لمتغير الإشباع\ الشفافية.

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

لحل هذه المشكلة سوف نقوم بتعريف وسم صورة <img> مؤقت بحيث يتم تحميل الصورة التالية إليه ولكن بدون إظهارها، و عندما نتأكد أن الصورة تم تحميلها يتم إظهارها في وسم الصورة الأساسي و تطبيق تأثير التلاشي عليها، لذلك دعنا نبدأ بإضافة السطر التالي إلى جانب وسم الصورة السابق داخل كود ال HTML، لاحظ أننا أعطينا خاصية العرض لهذه الصورة القيمة 0 ما يعني أنها لن تظهر على الشاشة، كما أننا أعطيناها ال id يحمل القيمة tmpImg.

<img id="tmpImg" src="" width="0"/>

بعد ذلك توجه إلى الدالة setImage() وقم بتعديلها بحيث تصبح بالشكل التالي:

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] setImage[color= #009900;]([/color][color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"tmpImg"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color]Imageslist[color= #009900;][[/color][color= #990000;]current[/color][color= #009900;]][/color][color= #339933;];[/color]
  4. [color= #000000; font-weight: bold;]var[/color] tmpImg[color= #339933;]=[/color]document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"tmpImg"[/color][color= #009900;])[/color][color= #339933;];[/color]
  5. [color= #b1b100;]if[/color][color= #009900;]([/color]tmpImg[color= #339933;].[/color]complete [color= #339933;]&&[/color] [color= #339933;]![/color][color= #009900;]([/color]op [color= #339933;]>[/color][color= #cc66cc;]0[/color] [color= #339933;]&&[/color] op [color= #339933;]<[/color] [color= #cc66cc;]100[/color][color= #009900;])[/color][color= #009900;])[/color]
  6. [color= #009900;]{[/color]
  7. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"img"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color]Imageslist[color= #009900;][[/color][color= #990000;]current[/color][color= #009900;]][/color][color= #339933;];[/color]
  8. ImgOpen[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]
  9. clearTimeout[color= #009900;]([/color]loadT[color= #009900;])[/color][color= #339933;];[/color]
  10. [color= #009900;]}[/color][color= #b1b100;]else[/color][color= #009900;]{[/color]
  11. loadT[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"setImage()"[/color][color= #339933;],[/color][color= #cc66cc;]10[/color][color= #009900;])[/color][color= #339933;];[/color]
  12. [color= #009900;]}[/color]
  13. [color= #009900;]}[/color]
  14.  

في السطر الأول نقوم بتحميل الصورة الحالية من المصفوفة إلى الصورة المؤقته، بعدها في السطر الثاني و الثالث نفحص إذا كان قد تم الإنتهاء من تحميل الصورة أمل لا (من خلال الشرط tmpImg.complete) قمنا بإضافة إلى هذا الشرط أيضا شرط يفحص إذا ما كانت قيمة متغير الإشباع أكبر من صفر أو أقل من 100 ما يعني أن لن يكون بالإمكان الإنتقال إلى الصورة التالية إذا كانت الصورة الحالية في مرحلة الظهور. إذا تحقق كل من الشرطين السابقين يتم تحميل الصورة إلى وسم الصورة الأساسي و يتم تطبيق تأثير تلاشي الدخول على تلك الصورة (من خلال إستدعاء الدالة imgOpen) كما يتم إيقاف مؤقت التكرار. إذا لم يتحقق الشرطين السابقين تقوم الدالة بإستدعاء نفسها بعد 10 ملي ثانية.

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

3- Makeup

سنقوم في هذه المرحلة بعمل بعض التحسينات الإضافية التي تهدف إلى زيادة جمالية المعرض و ترتيبه.

اول هذه التحسينات، سوف نقوم بعرض صورة صغيرة متحركة لتشير أنه جاري تحميل الصورة أثناء فتحها يمكنك الحصول على هذه الصورة من هذا الرابط. إذن قم بإضافة خلية ثانية للسطر الثاني في الجدول، وذلك من خلال إضافة الكود التالي بعد ال </td> الموجود مباشرة بعد الوسم الخاص بزر "التالي" في ال HTML:

<td width ="35" height="40">
<img src="stuff\loading.gif" id="Img1" />
</td>

هنا نفترض أن الصورة موجودة في مجلد "Stuff" أيضا قم بإضافة الخاصية التالية إلى وسم أول خلية في الجدول "<td>" بحيث تصبح كالتالي، وذلك لكي يظهر الجدول بشكل جيد:

<td colspan="2" >

بعدها إتجه إلى الدالة setImage() وقم بإضافة السطر التالي داخل الشرط مباشرة بعد ImgOpen(); :

انسخ الكود
  1. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"loadImg"[/color][color= #009900;])[/color][color= #339933;].[/color]width[color= #339933;]=[/color][color= #0000ff;]"0"[/color][color= #339933;];[/color]
  2.  

ثم في نفس الدالة ضع السطر التالي داخل الجزء الغير متحقق من الشرط بعد جملة loadT=setTimeout...:

انسخ الكود
  1. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"loadImg"[/color][color= #009900;])[/color][color= #339933;].[/color]width[color= #339933;]=[/color][color= #0000ff;]"35"[/color][color= #339933;];[/color]
  2.  

في السطرين السابقين إذا كانت الصورة لم يتم تحميلها بعد يتم إظهار صورة مؤشر التحميل من خلال إعطائه العرض 35، ولكن إذا كانت الصورة قد إنتهى تحميلها يتم إخفاء المؤشر من خلال تحديد العرض 0 لمؤشر التحميل و بالتالي لن يظهر.

ثاني التحسينات التي سوف نجريها هي قيامنا بإستخدام صور جميلة بدل من الأزرار التي نستعملها، يمكنك الحصول على صور الاسهم من هنا كما يمكنك الحصول على صور تشغيل\إيقاف من هنا. لإستخدام صوره بدل زر التالي “next”. قم بإستبدال وسم الزر next بالكود التالي:

<a href="java script:next()"><img src="stuff\right.png"></img></a>

وكذلك الأمر مع زر السابق “Previous” :

<a href="java script:prev()"><img src="stuff\left.png"></img></a>

بالنسبة لزر تشغيل\إيقاف “Play/Puase”، إستخدم الكود التالي:

<a href="java script:PlayPause()"><img src="stuff\play.png" id="Img1"></img></a>

لاحظ أننا وضعنا ال id داخل وسم ال <img> لكي يتم تبديل الصور بصور الإيقاف عندما يتم الضغط تشغيل و العكس صحيح، لعمل ذلك إتجه إلى الدالة PlayPuase() وقم بإستبدال السطر الذي يقوم بتغير نص الزر إلى Pause بالسطر التالي:

انسخ الكود
  1. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color][color= #0000ff;]"stuff/puase.png"[/color][color= #339933;];[/color]
  2.  

وقم بإستبدال السطر الذي يقوم بتغيير نص الزر إلى Play:

انسخ الكود
  1. document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color][color= #0000ff;]"stuff/Play.png"[/color][color= #339933;];[/color]
  2.  

جميل حاول التشغيل الآن، :happy: ; نتيجة جميلة.

الآن سوف نقوم بعمل توهج حول الصور بحيث يظهر هذا التوهج عند تمرير الماوس فوق قم بتعديل صور أزرار التالي و السابق و إضافة وهج حول كل من الأزرار وقم بتسمية الزر بإسمه و أضف كلمة over قبل إسم الملف، مثل “overleft.png”. إستخدم برنامج مثل الفوتوشوب لتعديل الصور. أو بإمكانك الصور الجديده من الملفات المرفقة. بعدها سنقوم بإضافة دالتين إلى الكود MouseOver و MousOut كالتالي، حيث سوف تقوم الدالة الأولى بعرض الصورة ذات الوهج بدل الصورة الأصلية و ستقوم الدالة الثانية بإعادة عرض الصورة الأصلية. تحتوي هذه الدوال أيضا على إستثناء حيث إذا كان ال id يحمل القيمة “plypus” يتم فحص حالة التشغيل و الإيقاف للعرض التقديمي، و من ثم يتم إسناد الصورة الصحيحة إلى الزر حسب حالة العرض:

انسخ الكود
  1. [color= #000000; font-weight: bold;]function[/color] MouseOver[color= #009900;]([/color]id[color= #009900;])[/color]
  2. [color= #009900;]{[/color]
  3. [color= #b1b100;]if[/color][color= #009900;]([/color]id[color= #339933;]==[/color][color= #0000ff;]"plypus"[/color] [color= #009900;])[/color]
  4. [color= #009900;]{[/color]
  5. [color= #b1b100;]if[/color][color= #009900;]([/color]play[color= #339933;]==[/color][color= #cc66cc;]0[/color][color= #009900;])[/color]
  6. document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/overplay.png"[/color][color= #339933;];[/color]
  7. [color= #b1b100;]else[/color]
  8. document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/overpause.png"[/color][color= #339933;];[/color]
  9. [color= #009900;]}[/color][color= #b1b100;]else[/color][color= #009900;]{[/color]
  10. document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/over"[/color] [color= #339933;]+[/color] id [color= #339933;]+[/color] [color= #0000ff;]".png"[/color][color= #339933;];[/color]
  11. [color= #009900;]}[/color]
  12.  
  13. [color= #009900;]}[/color]
  14. [color= #000000; font-weight: bold;]function[/color] MouseOut[color= #009900;]([/color]id[color= #009900;])[/color]
  15. [color= #009900;]{[/color]
  16. [color= #b1b100;]if[/color][color= #009900;]([/color]id[color= #339933;]==[/color][color= #0000ff;]"plypus"[/color] [color= #009900;])[/color]
  17. [color= #009900;]{[/color]
  18. [color= #b1b100;]if[/color][color= #009900;]([/color]play[color= #339933;]==[/color][color= #cc66cc;]0[/color][color= #009900;])[/color]
  19. document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/play.png"[/color][color= #339933;];[/color]
  20. [color= #b1b100;]else[/color]
  21. document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/pause.png"[/color][color= #339933;];[/color]
  22. [color= #009900;]}[/color][color= #b1b100;]else[/color][color= #009900;]{[/color]
  23. document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/"[/color] [color= #339933;]+[/color] id [color= #339933;]+[/color] [color= #0000ff;]".png"[/color][color= #339933;];[/color]
  24. [color= #009900;]}[/color]
  25. [color= #009900;]}[/color]
  26.  

بعد ذلك قم بتعديل وسوم صور أزرار "التالي" و "السابق" و "تشغيل\إيقاف" بحيث تصبح بالشكل التالي:

<img src="stuff\left.png" id="left" border="0" onmouseOver="MouseOver('left')" onmouseout="MouseOut('left')">

<img src="stuff\right.png" id="right" border="0" onmouseOver="MouseOver('right')" onmouseout="MouseOut('right')">

<img src="stuff\play.png" id="Img1" border="0" onmouseOver="MouseOver('plypus')" onmouseout="MouseOut('plypus')" >

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

التحسين الثالث و الأخير بسيط جدا ألا وهو وضع السكربت في ملف منفصل إذا قم بقص كل الكود بين كل من وسمي البداية و النهاية للسكربت <script> (لا تقص وسم البداية و النهاية للسكربت).

قم بلصق الكود في ملف بإسم GallScript.js وضعه في نفس مجلد الذي توجد فيها الصفحة، بعدها قم بتعديل وسم السكربت بالتالي:

<script type="text/javascript" src="GallScript.js"/>

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

<table border=0 align="center" bgColor="#222222">

شغل الكود، وأخيرا قد حصلنا على معرض جميل للصور :lol: .

post-133895-1252361077_thumb.png

أرجو أن أكون قد وفقت في إيصال و لو بعض الأفكار الجديدة و الجميلة إليكم، و الآن أصبح لدينا معرض للصور مفتوح المصدر للإستخدام. :wub:

ملاحظة: الكود مجرب ويعمل بشكل جيد على كل من Google Chrome و Mozilla Firefox 3.

الملف المرفق يحتوي على المشروع كاملا مع الصور و ما يلزم لتشغيله.

بإنتظار آرائكم و تعليقاتكم و إنتقادتكم، كما أرجو النتويه عن أي خطأ أو تعديل في الدرس.

تقبلو تحياتي: خلدون خالد، الفريق العربي للبرمجة.

نسخة من الدرس بصيغة PDF:

ImageGallary.pdf

ملفات المشروع جاهز للتنفيذ و الإستخدام:

ImageGallary.zip

5

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

25 إجابة على هذا السؤال .

  • 0

درس جميل الف يعطيك العافية اخوي خلدون ...

لكن لدي ملاحظات ...

- استخدام inline events مثل

onmouseOver="MouseOver('right')" onmouseout="MouseOut('right')"

يمكنك الاستعاضة عنها بطرق عديدة مثل addEventListener لعدة اسباب منها ان يكون كود clean اي تحقيق فصل اكبر بين html و javascript

-استخدام tables

- استخدام Recursion بشكل كبير مما يؤثر على اداء سكربت يمكنك استخدام setInterval بدل setTimeout

مثلا

	function ImgOpen()
{
t=setInterval(function(){

op++;
img=document.getElementById("img");
setOpacity(img,op);
if (op >= 100) {
op = 0;
clearInterval(t);
}
},10);


}

الدرس مفيد جدا , لكن هناك العديد من الافكار لتحسين السكربت ..

ويعطيك عافية :)

تم تعديل بواسطه ahmad123
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أهلا بالأخوين..

لكن لدي ملاحظات ...

هذا هو المطلوب لأنني أصلا مبتدأ في الجافا سكربت، وكل الأفكار كانت إرتجال شخصي :)

بالنسبة لل setInterval ما هو الفرق بينها و بين setTimeout ؟؟

سؤال آخر بالمناسبة ماذا بالنسبة لل img.complete هل هناك طريقة يمكن الإستعاضة عنها لأنها كما تبدو لا تعمل بشكل جيد مع ال IE؟؟

شاكر لك مرورك

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الفرق بين setTimeout و setInterval هو ان الاولى setTimeout تنفذ الامر لمرة واحدة فقط بعد انتهاء الفترة الزمنية المحددة , اما setInterval فهي تنفذه

على فترات متقطعة حسب فترة زمنية , لذلك هي تستخدم كثيرا في animation

img.complete ليست w3c standard و يولد استخدامها بعض المشاكل , الحل هو استخدام addEventlistener مع الحدث load (ملاحظة الاكسبلورر يستخدم attachEvent ) مثلا :

function loadImage(el,callback)
{
if (el.addEventListener){
el.addEventListener('load', callback, false);
} else if (el.attachEvent){
el.attachEvent('onload', callback);
}
}

img = docuemnt.getElementById('myImg');

function iamloaded()
{
alert('Loaded !!!');
}

loadImage(img,iamloaded);

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكــم ورحمـة الله وبركاتــه ،،

مقال رائع يا خلدون

يبقى لي بعض الملاحظات بالنسبة للمقال

غير حجم العنوان أو أكتبه بالخط العريض لتمييزه عن باقي النص

إحذف النص "من هنا" للروابط و عوضه به أرقام مثل [1] و أضف قائمة الروابط في آخر المقال مع الروابط

أخيرا أضف ترقيم للصفحات

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

يستحق التثبيت :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الف الف شكر

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا لجميع من مر وعلق على الموضوع :)

يبقى لي بعض الملاحظات بالنسبة للمقال

غير حجم العنوان أو أكتبه بالخط العريض لتمييزه عن باقي النص

إحذف النص "من هنا" للروابط و عوضه به أرقام مثل [1] و أضف قائمة الروابط في آخر المقال مع الروابط

أخيرا أضف ترقيم للصفحات

أصبحت هذه الآن و ظيفة مشرفين لأنني فقدت حق التعديل على الموضوع (إنهت المدة الزمنية) :lol:

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

موضوع جدأ رائع .. تسلم يديك أخوي

..

عندي طلب إذا ممكن يكون سهل ياليت

انا عندي بالموقع معرض صور مكون من آخر اربع صور مضافه .. لكن أريد أن تكون أكثر تفاعل بحيث يكون عبارة عن شريط

يكون بسهمين عن يمين وشمال عند النقر السهم الشمال تتحرك الصور إلى اليمين والعكس .. طبعاً يكون في المعرض آخر عشر صور ..أو اثنا عشر صوره ...

أتمنى الفكره وصلت

أقرب مثال http://www.templatemonster.com/flash-templates/25676.html في هذا الرابط

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

جزاك الله خيرا و بارك الله فيك يا اخي الحبيب و الله لقد افادني هذا الدرس كثيرا في شغلي و ساقوم بتطبيقه في جميع مشاريعي ... حفظك الله و جعله في ميزان حسناتك ...

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

اخى الكريم

درس رائع جدا

و تسلم على الشرح

انا عندى سؤال

عندى معرض صور على الرابط http://www.najeebawaih.com/najeebawaihnet

يوجد اسفل الصفحة

و بالجافا

ازاى اخلى الصورة عند الوقوف عليها بالماوس تظهر لفوق مش لتحت

يعنى فوق المؤشر يسارا مش تحته يمينا ؟؟؟

مرفق لكم ملف الجافا

و شكرا

hover.js

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

بجد مشرووووع حلو كتير وافدني كتيييييير اخي

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

ياريت تعطيني فكره عن الموضوع

مشكور

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مجهود رائع جدًا

جزاك الله خيرًا

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزاك الله خيراً

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

يا اخى تسلم الله يباركلك موضوع رائع

وفعلا الجافا سكريبت دى جميله وسهله وبتعمل شغل حلو كتير

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مقال رائع جدا نشكر جميع الأخوة المشاركين

بقى الان كيف نعدل ال script حتى نحصل على صور متحركة مع نص وراوبط مثل الذي يظهر

في موقع الجزيرة (الأخبار الرئيسية)

وكيف ممكن نقوم باستدعاء الصور والنصوص من قاعدة البيانات من داخل كود JavaScript

نرجو من الأخوة الأعضاء الذين لهم خبرة في هذا المجال افادتنا

ولكم جزيل الشكر

تم تعديل بواسطه selwi2006
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

منتظرين من الأخوة الأعضاء المشاركة

كيف ممكن نطور الكود السابق ليقرأ البيانات والصور من قاعدة بيانات وتتحرك تلقائيا كل فترة محددة (كل خمس ثواني مثلا)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

نحن مؤسسة خيرية تهتم باسر الشهداء والمفقودين

نريد احد الاعضاء الافاضل مساعدتنا في عمل البوم تفاعلي للصور ( استمارة بيانات الشهداء ) + استمارة بيانات المفقودين ) بإستخدام الجافا سكربت لاداء مهمة معينة

بنفس فكرة الموضوع المطروح هدا

post-133895-1252359467.png

وادا توجد امكانية تصغير الصورة وبالضغط على الصورة تكبر تفيدنا

لغرض استعمالها في مةقعنا المجانا والذي يسمح باستخدام ادارة أكواد Javascript

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جميل جدا معرض الصور دا و انا جربته على google chrome و شغال تمام بس المشكلة انه مش بيشتغل على انترنت اكسبلورر فلو ممكن تجربة انت و تقولنا النتيجة و لو فيه مشكلة زي ما حصل معايا تقولنا ايه الحل و شكرا جزيلا

بسم الله الرحمن الرحيم

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

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

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

• سنقوم أولا بإنشاء معرض بسيطة (الوظيفة الأساسية)

• بعدها سنقوم بعمل بعض الإضافات و التأثيرات على المعرض

• ثالثا سوف نقوم بعمل بعض التحسينات على شكل المعرض (Makeup)

1- الشكل البسيط:

في البداية سوف نرسم الشكل العام للمعرض.

post-133895-1252359467_thumb.png

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

سنبدأ بكود ال HTML التالي لصفحة إنترنت فارغة، حيث سوف نقوم مبدأيا بوضع الكود في وسم <script> في داخل قسم ال Head من الصفحة.

<html><head><script type="text/javascript">//Here Our Code Will Be </script></head><body></body></html>

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

ضع الكود التالي داخل ال <Body>:

<table align="center">    <tr>    <td ><img id="img" src=""/></td>    </tr>    <tr>    <td align="center">    <input type="button" value="Previous" />    <input type="button" value="Next" />    </td>    	</tr></table>

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

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">var Imageslist =new
Array();

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc"> function LoadImages(){<LI style="BACKGROUND: #f0f0f0"> addImage ('1.jpg');<LI style="BACKGROUND: #fcfcfc"> addImage ('2.jpg');<LI style="BACKGROUND: #f0f0f0"> addImage ('3.jpg');<LI style="BACKGROUND: #fcfcfc"> addImage ('4.jpg');<LI style="BACKGROUND: #f0f0f0"> addImage ('5.png');<LI style="BACKGROUND: #fcfcfc"> <LI style="BACKGROUND: #f0f0f0"> setImage();<LI style="BACKGROUND: #fcfcfc"> }

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc"> function addImage(url){<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc"> Imageslist[
count]=url;<LI style="BACKGROUND: #f0f0f0"> count++; <LI style="BACKGROUND: #fcfcfc"> }

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">var
count=0;

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

<body onload="LoadImages()">

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

<input type="button" value="Previous" onclick="prev()"/><input type="button" value="Next" onclick="next()"/>

أيضا شكل كل من الدالتين سيكون كالتالي:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc"> function
next()<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> if(current >= (Imageslist.length-1))<LI style="BACKGROUND: #f0f0f0"> current=0;<LI style="BACKGROUND: #fcfcfc"> else<LI style="BACKGROUND: #f0f0f0"> current ++;<LI style="BACKGROUND: #fcfcfc"> <LI style="BACKGROUND: #f0f0f0"> setImage();<LI style="BACKGROUND: #fcfcfc"> }<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc"> function prev()<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> if(current <= 0)<LI style="BACKGROUND: #f0f0f0"> current = Imageslist.length-1;<LI style="BACKGROUND: #fcfcfc"> else<LI style="BACKGROUND: #f0f0f0"> current --;<LI style="BACKGROUND: #fcfcfc"> <LI style="BACKGROUND: #f0f0f0"> setImage();<LI style="BACKGROUND: #fcfcfc"> }

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">var
current=0;

الآن نعود إلى الدالة setImage()، كما لاحظنا فإن الدالة next و الدالة prev تقوم أيضا بإستدعاء الدالة setImage. ربما تكون قد تكهنت بشكل هذه الدالة حيث تتمثل الدالة بالكود البسيط التالي:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function setImage()<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> document.getElementById("img").src=Imageslist[
current];<LI style="BACKGROUND: #f0f0f0"> }

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

في هذه اللحظة بإمكانك حفظ الكود في ملف html و فتحه في المتصفح، ستلاحظ أننا قد إنتهينا عمليا من الوظيفة الأساسية لمعرض الصور، حيث يتم عرض الصور مع إتاحة زرين للتنقل بين الصور.

2- إضافات و تأثيرات:

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

لعمل ذلك سوف نحتاج أول لتعريف زر بين زري التالي و السابق، سيكون تعريف هذا الزر بالشكل التالي:

<input type="button" value="Play" id="plypus" onclick="PlayPause()"/>

كما نلاحظ أنه عند الضغط على الزر يتم إستدعاء الدالة PlayPause()، أيضا الزر يحمل ال id = plypus مما سوف يمكننا من الوصل إليه من داخل السكربت (حيث سوف نقوم بتغيير قيمة من Play إلى Pause و العكس).

الدالة PlayPause() :

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function PlayPause()<LI style="BACKGROUND: #f0f0f0">{<LI style="BACKGROUND: #fcfcfc"> if(play==0)<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> play=1;<LI style="BACKGROUND: #f0f0f0"> document.getElementById("plypus").value="Pause";<LI style="BACKGROUND: #fcfcfc"> pt=setTimeout("playSlideShow()",3000);<LI style="BACKGROUND: #f0f0f0"> }else<LI style="BACKGROUND: #fcfcfc"> {<LI style="BACKGROUND: #f0f0f0"> play=0;<LI style="BACKGROUND: #fcfcfc"> document.getElementById("plypus").value="Play";<LI style="BACKGROUND: #f0f0f0"> clearTimeout(pt);<LI style="BACKGROUND: #fcfcfc"> }<LI style="BACKGROUND: #f0f0f0">}

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

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">var play=0;<LI style="BACKGROUND: #f0f0f0">var pt;

بالنسبة للدالة playSlideShow() فهي بسيطة جدا و تحمل الشكل التالي:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function playSlideShow()<LI style="BACKGROUND: #f0f0f0">{<LI style="BACKGROUND: #fcfcfc"> pt=setTimeout("playSlideShow()",3000);<LI style="BACKGROUND: #f0f0f0">
next();<LI style="BACKGROUND: #fcfcfc">}

حيث تقوم الدالة بإستدعاء نفسها كل 3 ثواني، و بعدها يتم إستدعاء الدالة next() من أجل الإنتقال إلى الصورة التالية.

الإضافة التالية التي سوف نقوم بعملها، هي إضافة تأثير Fade-in (تلاش الدخول) عند الإنتقال من صورة إلى أخرى، مما سوف يكسب المعرض جانب جمالي كبير.

أول شيئ سوف نحتاج لتطبيق هذه الفكرة هو دالة تقوم بتغيير قيمة شفافية\ اشباع الصورة "Opacity"، لذلك حصلنا على هذه الدالة التي تستقبل كائن، إضافة إلى قيمة بين ال 0 و ال100 و تقوم بإعطاء الكائن شفافية بناء على هذه القيمة (0 تعني شفافية تامه، الجسم مختفي). –حصلنا على هذا الكود من هنا-

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function setOpacity(obj, opacity) {<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc"> opacity = (opacity == 100)?99.999:opacity;<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc"> // IE/Win<LI style="BACKGROUND: #f0f0f0"> obj.style.filter = "alpha(opacity:"+opacity+")";<LI style="BACKGROUND: #fcfcfc"> <LI style="BACKGROUND: #f0f0f0"> // Safari<1.2, Konqueror<LI style="BACKGROUND: #fcfcfc"> obj.style.KHTMLOpacity = opacity/100;<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc"> // Older Mozilla and Firefox<LI style="BACKGROUND: #f0f0f0"> obj.style.MozOpacity = opacity/100;<LI style="BACKGROUND: #fcfcfc"> <LI style="BACKGROUND: #f0f0f0"> // Safari 1.2, newer Firefox and Mozilla, CSS3<LI style="BACKGROUND: #fcfcfc"> obj.style.opacity = opacity/100;<LI style="BACKGROUND: #f0f0f0">}

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

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

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function ImgOpen()<LI style="BACKGROUND: #f0f0f0">{<LI style="BACKGROUND: #fcfcfc">op++;<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc">img=document.getElementById("img");<LI style="BACKGROUND: #f0f0f0">setOpacity(img,op);<LI style="BACKGROUND: #fcfcfc">t=setTimeout("ImgOpen()",10);<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc">if(op >=100)<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> op=0;<LI style="BACKGROUND: #f0f0f0"> clearTimeout(t);<LI style="BACKGROUND: #fcfcfc"> }<LI style="BACKGROUND: #f0f0f0">}

سنحتاج لتعريف المتغير op الذي يمثل الشفافية، و المتغير t الازم لعمل دالة التوقيت، أضافة إلى المتغير loadT الذي سوف يتم إستخدامه لاحقا، في اعلى الكود (تحت تعريف المتغير pt و play):

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">var t,loadT,op=0;

نعود للدالة السابقة ImgOpen() حيث يتم زيادة قيمة الشفافية في كل مره يتم فيها دخول هذه الدالة، مع العلم بعدها يتم إسناد قيمة الشفافية الحالية الممثلة بالمتغير op إلى الصورة المعروضة حاليا من خلال الدالة setOpacity()، بعد ذلك تقوم الدالة بإستدعاء نفسها كل 10 ملي ثانية، عندما تصبح قيمة الإشباع تساوي أو اكبر من 100 يتم إيقاف المؤقت الذي يستدعي الدالة و تتوقف عن التنفيذ، ويتم إسناد القيمة 0 لمتغير الإشباع\ الشفافية.

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

لحل هذه المشكلة سوف نقوم بتعريف وسم صورة <img> مؤقت بحيث يتم تحميل الصورة التالية إليه ولكن بدون إظهارها، و عندما نتأكد أن الصورة تم تحميلها يتم إظهارها في وسم الصورة الأساسي و تطبيق تأثير التلاشي عليها، لذلك دعنا نبدأ بإضافة السطر التالي إلى جانب وسم الصورة السابق داخل كود ال HTML، لاحظ أننا أعطينا خاصية العرض لهذه الصورة القيمة 0 ما يعني أنها لن تظهر على الشاشة، كما أننا أعطيناها ال id يحمل القيمة tmpImg.

<img id="tmpImg" src="" width="0"/>

بعد ذلك توجه إلى الدالة setImage() وقم بتعديلها بحيث تصبح بالشكل التالي:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function setImage()<LI style="BACKGROUND: #f0f0f0">{<LI style="BACKGROUND: #fcfcfc"> document.getElementById("tmpImg").src=Imageslist[
current];<LI style="BACKGROUND: #f0f0f0"> var tmpImg=document.getElementById("tmpImg");<LI style="BACKGROUND: #fcfcfc"> if(tmpImg.complete && !(op >0 && op < 100))<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> document.getElementById("img").src=Imageslist[current];<LI style="BACKGROUND: #f0f0f0"> ImgOpen();<LI style="BACKGROUND: #fcfcfc"> clearTimeout(loadT);<LI style="BACKGROUND: #f0f0f0"> }else{<LI style="BACKGROUND: #fcfcfc"> loadT=setTimeout("setImage()",10);<LI style="BACKGROUND: #f0f0f0"> }<LI style="BACKGROUND: #fcfcfc">}

في السطر الأول نقوم بتحميل الصورة الحالية من المصفوفة إلى الصورة المؤقته، بعدها في السطر الثاني و الثالث نفحص إذا كان قد تم الإنتهاء من تحميل الصورة أمل لا (من خلال الشرط tmpImg.complete) قمنا بإضافة إلى هذا الشرط أيضا شرط يفحص إذا ما كانت قيمة متغير الإشباع أكبر من صفر أو أقل من 100 ما يعني أن لن يكون بالإمكان الإنتقال إلى الصورة التالية إذا كانت الصورة الحالية في مرحلة الظهور. إذا تحقق كل من الشرطين السابقين يتم تحميل الصورة إلى وسم الصورة الأساسي و يتم تطبيق تأثير تلاشي الدخول على تلك الصورة (من خلال إستدعاء الدالة imgOpen) كما يتم إيقاف مؤقت التكرار. إذا لم يتحقق الشرطين السابقين تقوم الدالة بإستدعاء نفسها بعد 10 ملي ثانية.

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

3- Makeup

سنقوم في هذه المرحلة بعمل بعض التحسينات الإضافية التي تهدف إلى زيادة جمالية المعرض و ترتيبه.

اول هذه التحسينات، سوف نقوم بعرض صورة صغيرة متحركة لتشير أنه جاري تحميل الصورة أثناء فتحها يمكنك الحصول على هذه الصورة من هذا الرابط. إذن قم بإضافة خلية ثانية للسطر الثاني في الجدول، وذلك من خلال إضافة الكود التالي بعد ال </td> الموجود مباشرة بعد الوسم الخاص بزر "التالي" في ال HTML:

<td width ="35" height="40">  <img src="stuff\loading.gif" id="Img1" /></td>

هنا نفترض أن الصورة موجودة في مجلد "Stuff" أيضا قم بإضافة الخاصية التالية إلى وسم أول خلية في الجدول "<td>" بحيث تصبح كالتالي، وذلك لكي يظهر الجدول بشكل جيد:

<td colspan="2" >

بعدها إتجه إلى الدالة setImage() وقم بإضافة السطر التالي داخل الشرط مباشرة بعد ImgOpen(); :

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">document.getElementById("loadImg").width="0";

ثم في نفس الدالة ضع السطر التالي داخل الجزء الغير متحقق من الشرط بعد جملة loadT=setTimeout...:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">document.getElementById("loadImg").width="35";

في السطرين السابقين إذا كانت الصورة لم يتم تحميلها بعد يتم إظهار صورة مؤشر التحميل من خلال إعطائه العرض 35، ولكن إذا كانت الصورة قد إنتهى تحميلها يتم إخفاء المؤشر من خلال تحديد العرض 0 لمؤشر التحميل و بالتالي لن يظهر.

ثاني التحسينات التي سوف نجريها هي قيامنا بإستخدام صور جميلة بدل من الأزرار التي نستعملها، يمكنك الحصول على صور الاسهم من هنا كما يمكنك الحصول على صور تشغيل\إيقاف من هنا. لإستخدام صوره بدل زر التالي "next". قم بإستبدال وسم الزر next بالكود التالي:

<a href="java script:next()"><img src="stuff\right.png"></img></a>

وكذلك الأمر مع زر السابق "Previous" :

<a href="java script:prev()"><img src="stuff\left.png"></img></a>

بالنسبة لزر تشغيل\إيقاف "Play/Puase"، إستخدم الكود التالي:

<a href="java script:PlayPause()"><img src="stuff\play.png" id="Img1"></img></a>

لاحظ أننا وضعنا ال id داخل وسم ال <img> لكي يتم تبديل الصور بصور الإيقاف عندما يتم الضغط تشغيل و العكس صحيح، لعمل ذلك إتجه إلى الدالة PlayPuase() وقم بإستبدال السطر الذي يقوم بتغير نص الزر إلى Pause بالسطر التالي:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">document.getElementById("plypus").src="stuff/puase.png";

وقم بإستبدال السطر الذي يقوم بتغيير نص الزر إلى Play:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">document.getElementById("plypus").src="stuff/Play.png";

جميل حاول التشغيل الآن، :happy: ; نتيجة جميلة.

الآن سوف نقوم بعمل توهج حول الصور بحيث يظهر هذا التوهج عند تمرير الماوس فوق قم بتعديل صور أزرار التالي و السابق و إضافة وهج حول كل من الأزرار وقم بتسمية الزر بإسمه و أضف كلمة over قبل إسم الملف، مثل "overleft.png". إستخدم برنامج مثل الفوتوشوب لتعديل الصور. أو بإمكانك الصور الجديده من الملفات المرفقة. بعدها سنقوم بإضافة دالتين إلى الكود MouseOver و MousOut كالتالي، حيث سوف تقوم الدالة الأولى بعرض الصورة ذات الوهج بدل الصورة الأصلية و ستقوم الدالة الثانية بإعادة عرض الصورة الأصلية. تحتوي هذه الدوال أيضا على إستثناء حيث إذا كان ال id يحمل القيمة "plypus" يتم فحص حالة التشغيل و الإيقاف للعرض التقديمي، و من ثم يتم إسناد الصورة الصحيحة إلى الزر حسب حالة العرض:

انسخ الكود

  1. <LI style="BACKGROUND: #fcfcfc">function MouseOver(id)<LI style="BACKGROUND: #f0f0f0">{<LI style="BACKGROUND: #fcfcfc"> if(id=="plypus" )<LI style="BACKGROUND: #f0f0f0"> {<LI style="BACKGROUND: #fcfcfc"> if(play==0)<LI style="BACKGROUND: #f0f0f0"> document.getElementById(id).src= "stuff/overplay.png";<LI style="BACKGROUND: #fcfcfc"> else<LI style="BACKGROUND: #f0f0f0"> document.getElementById(id).src= "stuff/overpause.png";<LI style="BACKGROUND: #fcfcfc"> }else{<LI style="BACKGROUND: #f0f0f0"> document.getElementById(id).src= "stuff/over" + id + ".png";<LI style="BACKGROUND: #fcfcfc"> }<LI style="BACKGROUND: #f0f0f0"> <LI style="BACKGROUND: #fcfcfc">}<LI style="BACKGROUND: #f0f0f0">function MouseOut(id)<LI style="BACKGROUND: #fcfcfc">{<LI style="BACKGROUND: #f0f0f0"> if(id=="plypus" )<LI style="BACKGROUND: #fcfcfc"> {<LI style="BACKGROUND: #f0f0f0"> if(play==0)<LI style="BACKGROUND: #fcfcfc"> document.getElementById(id).src= "stuff/play.png";<LI style="BACKGROUND: #f0f0f0"> else<LI style="BACKGROUND: #fcfcfc"> document.getElementById(id).src= "stuff/pause.png";<LI style="BACKGROUND: #f0f0f0"> }else{<LI style="BACKGROUND: #fcfcfc"> document.getElementById(id).src= "stuff/" + id + ".png";<LI style="BACKGROUND: #f0f0f0"> }<LI style="BACKGROUND: #fcfcfc">}

بعد ذلك قم بتعديل وسوم صور أزرار "التالي" و "السابق" و "تشغيل\إيقاف" بحيث تصبح بالشكل التالي:

<img src="stuff\left.png" id="left" border="0" onmouseOver="MouseOver('left')" onmouseout="MouseOut('left')"><img src="stuff\right.png" id="right" border="0" onmouseOver="MouseOver('right')" onmouseout="MouseOut('right')"><img src="stuff\play.png" id="Img1" border="0" onmouseOver="MouseOver('plypus')" onmouseout="MouseOut('plypus')" >

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

التحسين الثالث و الأخير بسيط جدا ألا وهو وضع السكربت في ملف منفصل إذا قم بقص كل الكود بين كل من وسمي البداية و النهاية للسكربت <script> (لا تقص وسم البداية و النهاية للسكربت).

قم بلصق الكود في ملف بإسم GallScript.js وضعه في نفس مجلد الذي توجد فيها الصفحة، بعدها قم بتعديل وسم السكربت بالتالي:

<script type="text/javascript" src="GallScript.js"/>

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

<table border=0 align="center" bgColor="#222222">

شغل الكود، وأخيرا قد حصلنا على معرض جميل للصور :lol: .

post-133895-1252361077_thumb.png

أرجو أن أكون قد وفقت في إيصال و لو بعض الأفكار الجديدة و الجميلة إليكم، و الآن أصبح لدينا معرض للصور مفتوح المصدر للإستخدام. :wub:

ملاحظة: الكود مجرب ويعمل بشكل جيد على كل من Google Chrome و Mozilla Firefox 3.

الملف المرفق يحتوي على المشروع كاملا مع الصور و ما يلزم لتشغيله.

بإنتظار آرائكم و تعليقاتكم و إنتقادتكم، كما أرجو النتويه عن أي خطأ أو تعديل في الدرس.

تقبلو تحياتي: خلدون خالد، الفريق العربي للبرمجة.

نسخة من الدرس بصيغة PDF:

ImageGallary.pdf

ملفات المشروع جاهز للتنفيذ و الإستخدام:

ImageGallary.zip

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

اخى الكريم / azhran

والاعضاء الاخرين

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

ارجو اعداده ومساعدتنا في الحصول عليه

ولكم الاجر والثواب من عند الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جميل

بارك الله فيك

جزاك الله كل خير

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جيد جداً و أتمني فقط أستخدام ال EventListner بدلا من inline events  وموفق فكرة جيده جداً :lol:

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

رائع جدا ولكن توجد اكواد لسى باقي ما فهمتها

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .