بعد التحميل الملفات اللازمة
وفك ضغطها ستجد ثلاث مجلدات : css ; images ; js ... لا يستوجب تركها كما هي ، و لكن من المستحسن ذلك لأنني سأضع الشرح على هذا الأساس ...
أظن من أسماءها واضح ما تحتويه و لكن لا بأس في ذكرها ...
ملفات مجلد الـ css ...
يحتوي على ملف وحيد هو " lightbox.css " و هو خاص بتنسيق العرض و سوف نتطرق له لاحقا ...
ملفات مجلد الـ images ...
و ملفاته ... ( يمكنك تغييرها بما يتناسب معك أيضا )
اللازمة : " closelabel.gif " ; " close.gif " ; " blank.gif " ; " loading.gif " ...
الإختيارية : " prevlabel.gif " ; " prev.gif " ; " nextlabel.gif " ; " next.gif " ... سنذكر لاحقا لماذا هي إختيارية ...
كما يمكن أن تضع في هذا المجلد صورك التي تريد عرضها ...
ملفات مجلد الـ js ...
و ملفاته ...
" scriptaculous.js " ; " prototype.js " ; " lightbox.js " ; " effects.js " ... هذه هي الملفات الأساسية للعمل ( لا شرح لها )
طريقة العمل ...
الجزء الأول ...
1- أدرج ملفات الجافا سكريبت في هيدر الصفحة
كود هتمل:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2- كما عليك إضافة ملف الـ css إلى الصفحة
كود هتمل:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3- تأكد من مواقع الصور ( خاصة إذا قمت ببعض التغييرات )
الجزء الثاني ...
1- أضف rel="lightbox" مع رابط للصورة في أي مكان ( مع نص ، صورة ...) ... كما يمكنك إختياريا إضافة عنوان يظهر مع الصورة و كذلك عن تقريب الفأرة إلى الصورة ، النص ...
كود هتمل:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>2- هنا نعود إلى الصورة الإختيارية و هي تستخدم عند رغبة في وضع مجموعة من الصور و تستطيع التمرير عبرها عندما تكون تشاهد إحداها ( عدد غير محدود من الصور ) ... بهذه الطريقة ...
كود هتمل:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>إنتهت طريق الإستعمال ...
يمكنك إستخدامها حتى في صفحات HTML ....
التحميل في المرفقات ... ( سأقوم عن قريب بوضع شرح لتغيير الـ CSS مع تعريب الصور )
أريد أن أرى تطبيقاتكم ....
ملاحظة هامة : يسمح نقل الدرس و لكن بشرط كتابة التالي في النهاية و بخط واضح " المصدر : منتدى بي اتش بي ... montadaphp.net "
تحياتي ...