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

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

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

HTML:

1	<div id="gallery-wrap">

2	<ul id="gallery">

3	<li><a href="image1.jpg"><img src="thumb1.jpg" alt=""/></a></li>

4	<li><a href="image2.jpg"><img src="thumb2.jpg" alt=""/></a></li>

5

</ul>

6

</div>

7	<div id="gallery-controls">

8	<a href="#" id="gallery-prev"><img src="images/prev.png"alt="" /></a<

9	<a href="#" id="gallery-next"><img src="images/next.png"alt="" /></a>

10

</div>

• gallery-wrap: المكان الذي سوف تظهر فيه العناصر، لنسمه المساحة المرئية (Visible Area).
• gallery: لائحة غير مرتبة من العناصر (الصور) المكونة للسلايدر. عرض هذا العنصر يساوي مجموع عرض الصور كلها.
• gallery-controls: العنصر الذي سوف يحوي مقابض التحكم بالعرض.

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

CSS:

1	#gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px;position: relative;}

2	#gallery{position: relative; left: 0; top: 0; list-style-type:none;}

3	#gallery li{float: right; margin: 0 20px 15px 0;}

4	#gallery li a img{ height: 175px; width: 160px;}

5

6	#gallery-controls{margin: 0 auto; width: 732px;}

7	#gallery-prev{float: left;}

8	#gallery-next{float: right;}

نلاحظ هنا:

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

jQuery / JavaScript

1	$(document).ready(function(){

2

3	// Gallery

4	if(jQuery("#gallery").length){

5

6	// Declare variables

7	var totalImages = jQuery("#gallery > li").length,

8	imageWidth = jQuery("#gallery > li:first").outerWidth(true),

9	totalWidth = imageWidth * totalImages,

10	visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),

11	visibleWidth = visibleImages * imageWidth,

12	stopPosition = (visibleWidth - totalWidth);

13

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

15

16	jQuery("#gallery-prev").click(function(){

17	if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){

18	jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});

19

}

20	return false;

21

});

22

23	jQuery("#gallery-next").click(function(){

24	if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){

25	jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});

26

}

27	return false;

28

});

29

}

30

31

});

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

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

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

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

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

1	totalWidth = imageWidth * totalImages

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

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

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

1	visibleWidth = visibleImages * imageWidth

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

1	stopPosition = (visibleWidth – totalWidth)

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

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

المصدر