اضافة الصور المنبثقةJquery Lightbox لمدونات بلوجر

اضافة الصور المنبثقةJquery Lightbox لمدونات بلوجر.
مييزات الاضافة : عرض الصورة بالحجم الكامل فى اطار منبثق تلقايا فة نفس صفحة التدوينة عند قيلم زوار واعضاء المدونة بالضغط على الصورة,اضافة لمسة جمالية الى طريقة عرض الصور في مدونتك

مثال على الاضافة:
قم بالضغط على الصورة التالية

 الصور المنبثقة Jquery Lightbox

طريقة تركيب الاضافة:
لوحة تحكم بلوجر , تصميم , تحرير Html , قم بتوسيع القالب , وابحث عن العلامة الآتية.

 </body>

ضع قبل </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() {
$(&#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><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

مبروك تمت اضافة الخاصية بنجاح , توجه الى مدونتك لمعاينتها على الطبيعة بعد اتمام الشرح السابق.


اضافة الصور المنبثقةJquery Lightbox لمدونات بلوجر

مشاركة مع الأصدقاء