شرح طريقة استخدام عارض المقالات بالصور بمكتبة jquery الرائعboxslider

[romaissa]

http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط§ط³طھط®ط¯ط§ظ… ط¹ط§ط±ط¶ ط§ظ„ظ…ظ‚ط§ظ„ط§طھ ط¨ط§ظ„طµظˆط± ط¨ظ…ظƒطھط¨ط© jquery ط§ظ„ط±ط§ط¦ط¹boxslider (http://www.dzbatna.com/t1587754/)





اقتباس
تمنع الصور النسائية

نعود معكم أخوانى الكرام زوار موقعنا الكرام , مع شرح طريقة لواحد من أجمل الاداوت البرمجية التى تستغل مكتبة الjquery الرائعه , وهذه الأداة ستتيح لك عرض المقالات وصورها على هيئة سلايد شو:

اسم الأداة : boxslider


طبعا الاداة تم برمجتها بواسطة المبرمج steven wanderski وسوف أقوم بشرح طريقة طريقة استخدامها نظرا لان استخدامها لم يوضحها المبرمج بشكل واضع خصوصا ممن لا يجيدون التعامل مع البرمجة
وأنا قمت بتعديل الأداة للتوافق مع عرض المقالات باللغة العربية ,

اولا:

شاهد مثال عملى :
[
حمل الأداه بكافة الملفات والصور بعد قمت بتجهيزها لكم مباشرة :



نبدأ على بركة الله شرح طريقة استخدام الأداه:


اولا: ملفاتنا هى عبارة عن الاتى:
1-صفحة index.html
2-ملفين js واحد لمكتبة jquery اسمه advphpjquery.js والاخر خاص بالاداة اسمه boxslider.min.js
3-ملف style.css
4-مجلد الصور images


اولا: نبدأ بملف index.html :

1-نحدد مسار الملفات اللى راح نستدعيها:

رمز Code:
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;advphpjquery.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;boxslider.min.js&quot;></script>

2-نحدد فانكشن عرض السابق والتالى للمقالات بين وسمىhead

رمز Code:
$(document).ready(function(){ $('#slides1').bxSlider({ prev_image: 'images/btn_arrow_left.jpg', next_image: 'images/btn_arrow_right.jpg', wrapper_class: 'slides1_wrap', margin: 70, auto: true, auto_controls: true }); });

3-بالنسبه لكتابة المقالات :

-سوف نستخدم لست لعرض المقالات :

مثال عليه ولاحظ مسار صورة المقال فى الوسم img واسمها pic_mgmt




رمز Code:
<ul id=&quot;slides1&quot;> <li> <img src=&quot;images/pic_mgmt.jpg&quot; width=&quot;209&quot; height=&quot;209&quot; alt=&quot;Pic Mgmt&quot; /> <div class=&quot;content&quot;> <h3>MGMT</h3> <h4>Congratulations</h4> <p>نصت المواد التي وافق عليها المجلس أن تتكون أموال الصندوق من حصيلة الاشتراكات وحصيلة استثمار أموال الصندوق ويتم استقطاع 1% من حصيلة الاشتراكات السنوية و2% من عائد استثمار أموال الصناديق لتمويل المصروفات الرأسمالية والجارية، وإذا زادت المصروفات عن هذه النسب تتحمل الخزانة العامة الزيادة.</p> </div> <div class=&quot;clear&quot;></div> </li> </ul>

لابد ان تحافظ على الclasses حتى لا تلخبطك فهى مربوطه بملف css , فقط غير العنوان ومحتوى المقال



انتهى شرح طريقة ملف index.html , وهذا الكود code ممكن تأخذه ليتم عرضه فى اى صفحه تريدها.....


ثانيا: شرح طريقة ملف css:

طبعا انا جهزت الملف لكم ليتناسب مع اللغة العربية والخطوط وطريقة العرض:
فقط راح اشير



ثالثا: شرح طريقة ملف boxslider.min.js الخاص بالأداة :
بداخل هذا الملف يمكنك التغيير على
-العرض التلقائى
-المدة الزمنيه بين عرض كل مقال ومقال
-المدة الزمنية قبل تغيير المقال والانتقال للى بعده

وهذا هو الكود code مشروحا بجانبه وظيفة كل event

رمز Code:
$(document).ready(function(){ $('ul').bxSlider({ alignment: 'horizontal', // 'horizontal', 'vertical' - لتحديد طريقة عرض المقال افقيه ام عمودية controls: true, // اتركها كما هى speed: 500, // مدة بقاء المقال قبل الانتقال للمقال اللى بعده pager: true, // اتركها كما هى pager_short: false, // اتركها كما هى pager_short_separator: ' / ', // اتركها كما هى margin: 0, // اتركها كما هى // اتركها كما هى next_text: 'next', // اتركها كما هى next_image: '', // اتركها كما هى prev_text: 'prev', // اتركها كما هى prev_image: '', // image to be used for the 'prev' control auto: false, // determines if slides will move automatically pause: 3500, // الوقت بين الانتقال للصوره التاليه auto_direction: 'next', // order in which slides will transition (auto mode only) auto_hover: true, // لتحديد اذا اردت ايقاف المقال بمرور الماوس true-false auto_controls: false, // determines if 'start'/'stop' controls are displayed (auto mode only) ticker: false, // determines if slideshow will behave as a constant ticker ticker_controls: false, // determines if 'start'/'stop' ticker controls are displayed (ticker mode only) ticker_direction: 'next', // order in which slides will transition (ticker mode only) ticker_hover: true, // true-fale لتحديد اذا اردت ايقاف المقال اذا وقفت عليه بالماوس stop_text: 'stop', // text to be displayed for the 'stop' control start_text: 'start', // text to be displayed for the 'start' control wrapper_class: 'bxslider_wrap' // class name to be used for the outer wrapper of the slideshow }); });


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


أخوكم vista-design






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©