إنشاء سكريبت لتمرير الصور باستخدام jQuery

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

إنشاء سكريبت لتمرير الصور باستخدام jQuery

أعتقد أنه من المهم أن نفهم في البداية بنية HTML و CSS قبل التكلم عن Javascript.

HTML:

<div id="gallery-wrap">
    <ul id="gallery">
        <li><a href="image1.jpg"><img src="thumb1.jpg" alt="" /></a></li>
        <li><a href="image2.jpg"><img src="thumb2.jpg" alt="" /></a></li>
    </ul>
</div>
<div id="gallery-controls">
    <a href="#" id="gallery-prev"><img src="images/prev.png" alt="" /></a<
    <a href="#" id="gallery-next"><img src="images/next.png" alt="" /></a>
</div>
  • gallery-wrap: المكان الذي سوف تظهر فيه العناصر، لنسمه المساحة المرئية (Visible Area).
  • gallery: لائحة غير مرتبة من العناصر (الصور) المكونة للسلايدر. عرض هذا العنصر يساوي مجموع عرض الصور كلها.
  • gallery-controls: العنصر الذي سوف يحوي مقابض التحكم بالعرض.

عادة ما يحوي العرض أكثر من صورتين لتكوين السلايدر، ولكن اكتفينا هنا بصورتين لتبسيط الشيفرة البرمجية.

CSS:

#gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
#gallery{position: relative; left: 0; top: 0; list-style-type:none;}
#gallery li{float: right; margin: 0 20px 15px 0;}
#gallery li a img{ height: 175px; width: 160px;}

#gallery-controls{margin: 0 auto; width: 732px;}
#gallery-prev{float: left;}
#gallery-next{float: right;}

نلاحظ هنا:

  • gallery-wrap: أهم الخصائص هي overflow:hidden، وهذه الخاصية تمنع ظهور المحتوى الموجود خارج المساحة المرئية. وأيضأ position: relative لنقل النقطة المركزية لتوضع العناصر.
  • gallery li: أهم الخصائص هي float:left، وهي تقوم بوضع العناصر بجانب بعضها تبعاً لعرض العنصر الاب (gallery).

jQuery / JavaScript

$(document).ready(function(){

    // Gallery
    if(jQuery("#gallery").length){

        // Declare variables
        var totalImages = jQuery("#gallery > li").length,
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function(){
            if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
                jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });

        jQuery("#gallery-next").click(function(){
            if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
                jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }

});

أهم المراحل هنا:


totalImages = jQuery(“#gallery > li”).length

يعيد لنا عدد العناصر الموجودة داخل #gallery، أي يعيد لنا عدد الصور ببساطة.


imageWidth = jQuery(“#gallery > li:first”).outerWidth(true)

يعيد لنا العرض الكامل لكل صورة (بما في ذلك Padding و Margin و Border).


totalWidth = imageWidth * totalImages

يعيد لنا عرض مجموع الصور كاملة.


visibleImages = Math.round(jQuery(“#gallery-wrap”).width() / imageWidth)

عملية حسابية لعدد الصور الموجودة في المساحة المرئية (Visible Area) للعنصر #gallery-wrap.


visibleWidth = visibleImages * imageWidth

حساب العرض المرئي.


stopPosition = (visibleWidth – totalWidth)

حساب مكان التوقف.

بإمكانكم الاطلاع على مثال أو تحميله. أرجو ارسال اقتراحاتكم وتعليقاتكم، وشكراً.

محمد نورس البغدادي

من مواليد دمشق بدأ عمله في دمشق كمطور مواقع انترنت ثم انتقل الى دبي. يعمل كمطور واجهات للمواقع الالكترونية ومطور تطبيقات للاجهزة اللوحية.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookLinkedInGoogle Plus

2 thoughts on “إنشاء سكريبت لتمرير الصور باستخدام jQuery

  1. كنت اصمم احد قوالب الوردبريس
    فلت أزور مدونتكم لعلي القى شيئ جديد و الحمد لله لقيته لول
    شكرا جزيلا على الموضوع الرائع
    جاري التجربة

    • شكراً لمرورك.
      يجدر التنويه إلى أن هذا الدرس هو للتعريف بالمفهوم فقط، ويحتاج الكثير من التطوير ليعمل في بيئة إنتاجية، إن احتجت شيئاً مشابهاً ننصحك بإضافات jQuery مثل Anything Slider و Easy Slider.

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *