إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

درس عمل سلايدشو / slideshow بالـCSS و الـjQuery فقط

19 تعليق

في هذا الدرس ، ستتعلم طريقة عمل سلايدشو بسيط بإستخدام لغتي الـCSS و الـjQuery فقط ، مرحلة بمرحلة ، ستتعرف على  البنية الأولية للسلايدشو بالـHTML ، الـCSS ثم الـjQuery ، و إنطلاقا من المعلومات التي يقدمها هذا الدرس ستكون قادرا من إبداع عدة أشكال و أنواع من السلايدشو عبر تغيير قيم الـCSS .


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

سنرى في هذا الدرس بنية الـHTML و الـCSS التي يقوم عليها هذا النوع من السلايدشو ، ثم سنتطرق إلى كود الـjQuery الذي يقوم بعمليات الإنزلاق و كل شيء . يفترض منك أولا أن تكون ملم بلغتي HTML و CSS كاملتين ، أما الـjQuery فسأشرح عملها في الفقرة الأخيرة دون الخوض العميق فيها ، فلا تحتاج لأن تكون على دراية كبيرة بها .... و قبل البدأ إفتح ملف HTML جديدا لتبدأ التطبيق عليه مباشرة ، ثم إحتفظ لنفسك بالنتيجة الأخيرة  .

مبدأ إشتغال السلايدشو / Slideshow
الفقرة المهمة هو فقرة التعرف على بنية السلايدشو بالـHTML ، فمن خلال التعرف على تلك البنية ، يمكنك أن تتوقع مسبقا كود الـCSS الذي يناسب ، و ضبطه ليتناسب مع جميع المتصفحات الحالية ، و بالطبع مع إستخدام تقنيات الـCSS3 يمكننا إنشاء سلايدشوهات غاية في الروعة  .
يتكون السلايدشو أولا من عنصر <div> نُعرفه عادة بـslideshow# حيث يحتوي هذا العنصر على كل عناصر السلايدشو الأخرى المهمة و الضرورية ، و داخل هذا الـ <div> ، يوجد عنصر <div> اخر نسميه slider# ، و إنطلاقا من تسميته يمكنك أن تستنتج أن هذا العنصر هو الذي ينزلق يمينا و يسارا محركا معه كل محتويات السلايدشو ، و ذلك طبعا باستخدام كود الـjQuery ، حيث يحتوي هذا الـslider# على عدة عناصر <div> معرفة بـslide. ( أسميها خانات  ) و التي تحتوي بدورها على المحتوى المراد عرضه في صفحة الويب .

المرحلة 1 : بنية الـHTML .
<!-- Slideshow HTML -->
<div id="slideshow">
    <img src="leftImg.png" class="left" />
    <img src="rightImg.png" class="right" />
    <div id="slider">
        <div class="slide">
            <!-- محتوى الخانة الأولى -->
        </div>
        <div class="slide">
            <!-- محتوى الخانة الثانية -->
        </div>
        <div class="slide">
            <!-- محتوى الخانة الثالثة -->
        </div>
    </div>
</div>
<!-- slideshow HTML -->

لاحظ في الكود السابق أن العناصر مرتبة جدا ، حيث يسهل على صاحب الموقع تغيير محتواها باستمرار في حالة إن لم يكن يستخدم واجهات متطورة .
لاحظ وجود عنصرين لم نتكلم عنها قبلا ، إنهما عنصري <img> ، هذين الصورتين تمثلان الأزرار التي تقوم بالتحويل عند النقر عليها كالصورة جانبه ، و ذلك عبر تفعيل خاصية النقر باستخدام الـjQuery ... عادة لا يتم إدخال عناصر <img> في HTML السلايدشو مباشرة ، بل يتم إدخالها باسخدام الـjQuery و خاصة باستخدام معطيات DOM .... لكننا نحن الان لن ندخل في مثل هذه التعقيدات ، لقد أدخنا عناصر <img> في الـHTML و سنكمل على هذا النحو  .

قبل البدأ في تخصيص السلايدشو بالـCSS ، لابد من وضع بعض المحتوى داخل خانات slide. ، حتى نستطيع تمييزها و بالتالي تخصيصها كما يجب .

المرحلة 2 : خصائص السلايدشو.
في هذه المرحلة سنعطي بنية HTML السابقة التصميم المناسب لها لكي تكوٍن لنا سلايدشو ، هذه المرحلة مهمة لأن كود jQuery الذي يحرك السلايدشو يعتمد في عمله على تغيير خصائص CSS ، ففي بعض العناصر مثل slider# لا يجب أبدا التخلي عن بعض الخصائص الضرورية التي تميزه  ، لذلك سأقوم بتأطير الخصائص الضرورية التي لا يجب المساس بها بالأصفر حتى تظهر جليا .

فبالنسبة للعنصر slideshow# ، نضع دائما خاصيتي width و height ، لأنه لا يمكن أبدا إنشاء سلايدشو دون تحديد هذين الخاصيتين ، حيث يأخذان قيمتين ثابثتين و لا يمكن تغييرهما ، في هذا المثال سأضع width:650px و height:260px ، لكن في اخر الدرس سأريك كيف تغيرها بحيث يبقى التصميم متماسكا لأنه لا شك أنك تريد عمل سللايدشو بمقاسات خاصة بك ... هناك خاصيتين لا غنا عنهما position:relative و overflow:hidden .

div#slideshow {
    margin:0 auto;
    border:10px solid #676456;
    width:650px;
    height:260px;
    position:relative;
    overflow:hidden;
}

بالنسبة للصورتين اللتين تمثلان الأزرار ، فيتم تخصيصها بـ position:absolute تجعل منهما ثابثثين بالنسبة للعنصر slideshow# ، و لهذا وضعنا لهذا الأخير الخاصية position:relative .

div#slideshow > img.left {
    position:absolute;
    top:55px;
    left:0;
    z-index:1;
    cursor:pointer;
}
div#slideshow > img.right {
    position:absolute;
    top:55px;
    right:0;
    z-index:1;
    cursor:pointer;
}

بالطبع فإن كنت تجرب على حاسوبك الان ، فإنك ستحتاج لتحميل الصورتين و وضعهما مع ملف الـHTML الذي تشتغل فيه .  تحميل الصورة 1 | تحميل الصورة 2

أخيرا و ليس اخرا نمر إلى العنصرين slider# و slide. ، أكثر ما يهم في خصائص slider# هو أنه يجب أن يكون ذو عرض كبير جدا حيث وضعتُ width:9999px ، لم أرغب في وضع رقم خيالي حتى لا ينفجر حاسوبي طبعا  ، و هو الاخر أيضا ثابث بالنسبة لـslideshow# حيث يأخذ position:absolute  و أهم خاصية يأخذها هي right:0 ، فكود jQuery يقوم أساسا بتغيير قيمة right للعنصر slider# ليظهر لنا و كأنه ينزلق أو يزاح يمينا و يسارا  .
أما عنصر slide. فيأخذ خاصية float:right و height و width و padding حيث القيم التي تأخذها الخاصيتان width و padding يتناسبان عكسيا حسب للعرض الذي يأخذه العنصر الكبير slideshow# .
يتناسبان بحيث مجموع الـwidth و الـpadding في الجوانب يساوي عرض العنصر الكبير slideshow# ، يمكن تلخيص كل هذا فيما يلي :
width + padding-left + padding-right = #slideshow width

و نفس الشيء بالنسبة للإرتفاع height و الـpadding-top و padding-bottom

height + padding-top + padding-bottom = #slideshow height

#slider {
    position:absolute;
    top:0; right:0;
    z-index:0;
    width:9999px;
}
.slide {
    float:right;
    width:570px;
    height:200px;
    padding-left:40px;
    padding-right:40px;
    padding-top:30px;
    padding-bottom:30px;
    color:#FFF;
    background:#2F2C21;
    font:normal 15px Tahoma;
}

لاحظ أننا إحترمنا المعادلات السابقة في تصميمنا هذا ، فلقد وضعنا في الأول بالنسبة للعنصر الكبير slideshow# العرض width:650px و الإرتفاع height:260px . و إذا قمنا بالحساب قليلا :
570px + 40px + 40px = 650px
200px + 30px + 30px = 260px
سهلة و جميلة أيضا ، فإن أردت تغيير عرض أو إرتفاع العنصر slide. فتأكد أن تتحقق المعادلات السابقة لكي يكون تصميمك متماسكا .
أما باقي الخصائص التي يأخذها العنصر slide. فهي تخص جمالية التصميم و تنسيقه و يمكنك تغييرها كما تريد و نفس الشيء بالنسبة للخصائص التي لم يتم تأطيرها باللون الأصفر  ، و بالطبع يمكنك إضافة المزيد من الخصائص من عندك إن أردت ذلك .

المرحلة 3 : كود jQuery 
أخذت الان خصائص الـCSS مكانها ، لم يبق الان إلا إدخال كود jQuery  الذي سيشغل لنا كل شيء ، و بالطبع بما أننا سنستعمل الـjQuery فلابد إذن من ربط صفحتنا بمكتبة هذه اللغة الشهير jquery.com ، و ذلك عبر إضافة العنصر الصغير التالي :
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

طريقة العمل
يقوم كود الـjQuery عموما بتغيير قيمة الخاصية right في العنصر slider# ، فعند الضغط على الصورة leftImg.png يزيد من قيمة الخاصية right بـ 650px أي عرض السلايدشو ، و عند الضغط على الصورة rightImg.png ينقص منها أيضا 650px ، و ذلك يتم بسلاسة عبر إستخدام الـ animation الخاصة بالـjQuery .

الكود هو كالتالي :
<script>
$(document).ready(function(){
    $('div#slideShow').val(1);
    setInterval('sheck()',1);
    $('div#slideShow > img.left').click(function(){$('div#slideShow > div#slider').animate({'right':'-=650px'},'normal'); $('div#slideShow').val(parseInt($('div#slideShow').val()) + 1) })
    $('div#slideShow > img.right').click(function(){$('div#slideShow > div#slider').animate({'right':'+=650px'},'normal'); $('div#slideShow').val(parseInt($('div#slideShow').val()) - 1) })
})
function sheck() {
    if ( $('div#slideShow').val() == 1 ) { $('div#slideShow > img.right').fadeOut(1) }
    else { $('div#slideShow > img.right').fadeIn('fast') }
    if ( $('div#slideShow').val() == $('div#slideShow > div#slider > div').length  ) { $('div#slideShow > img.left').fadeOut(1) }
    else { $('div#slideShow > img.left').fadeIn('fast') }
}
</script>

الـ650 التي تراها في الكود ملونة بالأحمر مهمة جدا ، فإن أردت تغيير عرض السلايدشو فيجب أن تغير معه القيمة أعلاه ، إن وضعت مثلا 1000px بدل 650px في خاصية width للعنصر slideshow# ، فهذا يعني أنه عليك أن تضع 1000 بدل 650 في الكود أعلاه ، و بالطبع لا تنس تخصيص العنصر slide. بحيث تحقق خصائصه المعادلات السابقة .

خلاصة 
من خلال ما تعلمته في هذا الدرس يمكنك الان إنشاء سلايدشو من تصميمك عبر إضافة المزيد من الخصائص الخاصة بتنسيق الألوان و الخطوط و غيرها ، فحتى و لو كنت لا تعرف شيئا عن لغة jQuery فباتباع التعليمات في هذا الدرس يمكنك حتما أن تتمكن من تصميم سلايدشو أجمل و أحسن ، و ذلك فقط من خلال ما تعرفه من الـHTML و الـCSS ، أما بالنسبة للتعريفات التي عرفنا بها العناصر فهي مهمة و لن يعمل السلايدشو من دونها لذلك إنتبه و لا تغيرها !!! .... و بهذا نكون قد أنهينا الدرس ، تحياتي  .
مساحة إعلانية

تعليقات بلوجر

  1. شكرا عاشق النت معلومات رائعة

    ردحذف
  2. ألف شكر على هذا التميز الرائع 'مدونة ثعلوب'

    ردحذف
  3. رائعة من روائع مدونتك
    أقل ما يمكن فعله لشخص يبذل هكذا مجهود هو بضع نقرات على أزرار شبكات التواصل الإجتماعي
    وبالنسبة لي سجلت خصيصاً بموقع ثبت ووضعت وصفاً لموضوعك هناك كالتالي:
    ♥درس بسيط وسهل يمكنك من تصميم أي سلايدشو يناسب مدونتك أو موقعك بدون خبرة بالـ jQuery
    حيث أنك تستطيع فهم آلية عمل السلايدات مع التطبيق العملي♥
    ومع ذلك لا أعتقد أنني أعطيت الموضوع حقه...
    لك تحياتي والكثير من الدعاء

    ردحذف
    الردود
    1. ماذا عساي أفعل يا أخي لأشكرك على الردود الرائعة ، لقد نورت المدونة حقا ، و إني أشكرك من القلب و الله أفرحتني ، ما كنت لتتعب نفسك في ثبت حقا أخي ، يكفينا ردودك الهائلة ، في إنتظار مدونتك إن شاء الله .

      حذف
  4. السلام عليكم

    اخي ممكن تساعدني في اداة تعرض اخر المواضيع من قسم معين ؟ لاني بحثت و لم اجد الاداة .

    شكرا لك علي هذه المدونه المفيده

    محمد

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

      حذف
    2. السلام عليكم .. كل عام وانت بخير :
      اخى !غير معروف! .. بالنسبة لاداة تعرض اخر الموضوعات فى قسم معين هى عبارة عن سكريبت يقوم بعرض خلاصة رابط معين ...!

      بالنسبة لطلبك قوم بتغيير رابط الخلاصة للصفحة الرئيسيسة للمدونة برابط خلاصة لقسم معين والرابط كالتالى يمكنك الاستعانة بة :

      http://cod-b.blogspot.com/search/label/LABELNAM/feeds/posts/default
      فقط قم بتغيير LABELNAM باسم القسصم المراض عرض اخر مواضيعة
      .. اتمنى يكون الرد واضح بالتوفيق

      حذف
  5. شكرا على التعب والمجهود يا اجمل مدونه على النت واطيب عاشق نت

    ردحذف
    الردود
    1. مشكور أخي على الرد الجميل ، أهلا و سهلا بك

      حذف
  6. أشكر جهودك الطاهرة اخى الكريم عاشق النت
    ونشاطك اللامحدود ووفقك الله

    ردحذف
  7. اهلا بيك عاشك النت بصراحة كتير بتعجبنى مواضعتك ودى اللى شجعنى اعمل مدون خاصة بيه عشان اقر اسوق منتجاتى عبر النت وفعلا اشتغلت وعملت مدونة لكن توجهننى فيها مشاكل كثير وحبات اركب فيها سلايدشو وقرات موضوعك كويس ولكن مش قادر افهم اركبة لانى مش متخصص فى الموضوع خالص ياريت تقولى ازاى اركبة

    ردحذف
    الردود
    1. ماذا أقول لك يا أخي ؟؟؟ :)
      ما رأيك أن تجرب السلايدشو في الموضوع أسفله
      http://www.doaib.com/2011/07/how-to-add-image-slider-to-blogger.html

      حذف
  8. مشكور على الطرح

    ردحذف
  9. هل يمكن دمج هذا السلايد فى قالب ويردبيرس ؟

    ردحذف
  10. درس ممتاز.. وجب تشغيل الدماغ شوية ^^

    ردحذف
  11. تم عمل السلايد شو بنجاح ولكن يحتاج الى تركيز وخبرة بسيطة html
    سلمت يداك...

    ردحذف
  12. اخي ممكن تنزل فديو على اليوتيوب لهذا الشرح

    ردحذف
  13. أولا : أحب أشكرك على الموضوع الرائع وربنا يجزيك كل خير على قدر كل من إستفاد .
    ثانيا : كنت محتاج مساعده من سيادتك أو شخص يقرأ ردى ويكون له خبره فى الموضوع الذى أود طرحه...أريد معرفة كيفية دمج صفحة التسجيل على قاعدتين مع العلم انى اعمل بال navicat (توضيح:أود أن أجعل من يسجل حساب يظهر تسجيله بنفس الحساب ولكن على قاعدتين database مختلفتين ) أتمنى أن أجد مساعده .... ولكم جزيل الشكر ....أخوكم أبو أحمد

    ردحذف
  14. احسنت .............واوجزت

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة