طريقه عمل سليدشو احترافى

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


الفهرس

1. مبدأ إشتغال السلايدشو / Slideshow
2. المرحلة 1 : بنية الـHTML .
3. المرحلة 2 : خصائص السلايدشو.
4. المرحلة 3 : كود jQuery

مشاهدة مثال 1مشاهدة مثال 2

القاسم المشترك بين هذين الشكلين من السلايدشو هو أنهما نوع واحد ، ينزلان يمينا و يسارا دون أي تأثيرات إضافية خارجة عن نطاق الـ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 ، أما بالنسبة للتعريفات التي عرفنا بها العناصر فهي مهمة و لن يعمل السلايدشو من دونها لذلك إنتبه و لا تغيرها !!! .... و بهذا نكون قد أنهينا الدرس ، تحياتي  .