قم بعمل البوم صورك فقط فى 15 سطر كود

انا احب حقا شعار الجى كويرى الذى يقول Write less do more اى اكتب قليلا واحصل على نتائج افضل . وقد قمنا سابقا فى الدروس فى الماضية بعمل البوم صور من نقطة الصفر بداية من الاتش تى ام ال والسى اس اس ولكن اليوم سوف نستخدم احد المكتبات الجاهزة التى سوف تساعدك سريعا على اتمام عملك ... بالنسبة للاتش تى ام ال فهو لن يختلف كثيرا عن ما قد ورد فى الدروس السابقة لالبوم الصور .

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

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>{/syntaxhighlighter}

ثم نقوم باستدعاء مصدر لسكريبت جاهز سوف نستخدمة لعمل الالبوم

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>{/syntaxhighlighter}

وسنقوم بعمل كود بسيط بالجى كويرى لتفعيل العمل بالالبوم

\r\n<script>\r\n$('.rotator').cycle({\r\n        fx: 'fade',\r\n        timeout: 2000\r\n});\r\n</script>\r\n

وفى النهاية سيكون شكل الكود كاملا لدينا كالتالى :

\r\n<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>\r\n<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>\r\n<script>\r\n$('.rotator').cycle({\r\n        fx: 'fade',\r\n        timeout: 2000\r\n});\r\n</script>\r\n<div class="rotator">\r\n    <img src="http://i.imgur.com/fzC0Y.jpg" alt="Car Photo 1" />\r\n    <img src="http://i.imgur.com/L1BIC.jpg" alt="Car Photo 2" />\r\n    <img src="http://i.imgur.com/SsvZd.jpg" alt="Car Photo 3" />\r\n</div>\r\n