اقسام المنجم
- اخبار تقنية (23)
- اختراعات (27)
- افتكاسات (36)
- الابراج (3)
- المواضيع الجديدة (50)
- أهم المواضيع (36)
- جديد * جديد (36)
- حكم وامثال (14)
- دورات تدريبية (5)
- رمضانيات (29)
- شخصية المنجم (3)
- صبايا (12)
- صحتك (20)
- طرائف وغرائب (22)
- فكرة عمل...... (13)
- قصة ققصيره (20)
- كتب (7)
- مشاكل وحلول (25)
- مقالات (30)
معلومة اليوم:
لماذا التكبر ؟
من تراب ، على تراب ، إلى تراب !!
جديد المنجم
اختر ما تود أن تتعلمه
أرشيف المنجم
- أبريل 2011 (121)
- مايو 2011 (65)
- يونيو 2011 (133)
- يوليو 2011 (248)
- أغسطس 2011 (110)
- سبتمبر 2011 (44)
- أكتوبر 2011 (11)
إضافة الصور المنبثقة Jquery Lightbox التلقائية
12:35 م |
مرسلة بواسطة
helly
طريقة تركيب خاصية الصور المنبثقة Jquery Lightbox والآن أتيت لكم بالجديد ،فكثير منكم من قام بتطبيق العديد من المحاولات لهذه الإضافة في مدونته لكن بدون فائدة وما يزيد الطين بلة هو يجب تعديل كودHTML لكل صورة علي حدة ووضع الجملة rel="lightbox" title="Your image Caption" بعد الوسم" a>" الذي يخص الصورة ،أما الآن مع الخاصية الجديدة التي أتيت لكم بها تقوم بتفعيل الصور المنبثقة لجميع الصور التي تحتوي عليها المدونة بصفة تلقائية ولا داعي لإضافة أي شيء على كود الصورة ,ولمعاينة هذه الإضافة قم بالضغط على الصورة أسفله .
والآن بعد أن قمت بمعاينة الإضافة سوف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :
والآن بعد أن قمت بمعاينة الإضافة سوف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :
ثم قم بلصق الكود التالي قبله مباشرة :</body>
هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>
التسميات:
تطويرBlogger
الاشتراك في:
تعليقات الرسالة (Atom)
0 التعليقات:
إرسال تعليق