فى تدوينه اليوم سنشرح اضافه لايت بوكس Lightbox اسمه Orangebox لبلوجر يتميز بانه قادر على احتواء الصور و الفلاش و اليوتيوب و الفرامات و مشغلات الفيديو و الجاليرى .. و الافضل من هذا هو حجمه الصغير 16kb و يحتوى على اضافه لعمل شير للمحتوى اللى المواقع الاجتماعيه المختلفه
قوم باضافه هذا الكود
<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/orangebox/css/orangebox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/orangebox/js/orangebox.js"></script>
و اضف مكتبه الجى كويرى ان لم تكن تمتلكها
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
كل هذا طبعا تضيفه فى البودى بعد الـ <body>
او فى الهيدر قبل الـ </head>
الان اذا اردت تفعيل هذه الاضافه يدويا
تعدل الكود الموجود بالاسفل
<a href="large3.jpg"><img src="small3.jpg" /></a>
و تجعله هكذا
<a data-ob_caption="الوصف" data-ob_linkText="العنوان" rel="lightbox" href="small.jpg"><img src="small.jpg" /></a>
اى انك تضيف Rel="lightbox" لتفعيل الاضافه على اى صوره تريدها
و يمكن ان تضيف data-ob_caption="وصف الصوره"
data-ob_linkText="عنوان الصوره"
و اذا اردت تطبيق اى اضافه lightbox اوتوماتيك على صور المدونه , ليس عليك الا قرائه هذا الموضوع ..
او فى الهيدر قبل الـ </head>
الان اذا اردت تفعيل هذه الاضافه يدويا
تعدل الكود الموجود بالاسفل
<a href="large3.jpg"><img src="small3.jpg" /></a>
و تجعله هكذا
<a data-ob_caption="الوصف" data-ob_linkText="العنوان" rel="lightbox" href="small.jpg"><img src="small.jpg" /></a>
اى انك تضيف Rel="lightbox" لتفعيل الاضافه على اى صوره تريدها
و يمكن ان تضيف data-ob_caption="وصف الصوره"
data-ob_linkText="عنوان الصوره"
و اذا اردت تطبيق اى اضافه lightbox اوتوماتيك على صور المدونه , ليس عليك الا قرائه هذا الموضوع ..
ليست هناك تعليقات:
إرسال تعليق