اضافة هاك الصور المنبثقة بتقنية Jquery

بسم الله الرحمن الرحيم كيف حالكم اخواني الكرام اليوم انشاء الله سأقدم لك درساً بسيط لكيفية اضافة هاك انبثاق الصورة في مدونة بلوجر وهي اداة من ادوات الجوكري وتسمى Jquery Lightboxدون الحاجة الى اضافة كود الى رابط الصورة والتعديل على كل رابط سيأخد منا وقتا لهدا انشاء الله سنتعرف على كيفية اضافتها الى مدونتك دون اللجوء الى تغيير القالب  والبحث عن قالب اخر بما يخص هده الاضافة فهي رائعة فهناك بعض المدونين يضعون صورا يشرحون فيها برنامج او أي شيئا,,,, لهدا يجب ان تكون الصور كبيرة,وكما نعلم فإن ادراج صورة كبيرة في مدونات بلوجر ستخرج عن جسم التدوينة مباشرة وقدقمت بنشر درس قمت فيه بشرح كيفية  عدم السماح للصور الكبيرة للخروج عن جسم التدوينة في هده الصفحة بدون ان اطيل عليك فعند الظغط على أي صورة فإن الصورة ستبثق في الصفحة نفسها للمدونة وتكون جوانب الصورة مضللة باللون الاسود الكاشف لتكون الصورة واضحة مئة بالمائة ندهب الى الدرس.

---

قبل كل شيء قم بحفظ نسخة من قالبك تفاديا لحصول اخطاء

نقوم بالبحث عن الكود التالي </body> باستعمال لوحة اختصار المفاتيح(CTRL+F)   

وقبله مباشرة قم بإضافة الرمز التالي

<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() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script>

 

جميع الحقوق محفوظة لمدونة عربي كاش2

اتمنى ان يعجبكم الموضوع في انتظار الجديد والمفيد,