الثلاثاء، 17 مايو 2011

إضافة ( الصور المنبثقة ) بتقنية Jquery Lightbox في بلوجر

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




إضافة جميلة للصور المرفوعة على مدونتك في بلوجر، وهي إضفاء لمسة جمالية عند الضغط على الصور في مدونتك .
http://creativeproject.files.wordpress.com/2010/05/jquery-lightbox-plugin-0-5.jpg?w=490&h=200


والطريقة سهلة وهي كالتالي :

انتقل إلى لوحة التحكم الخاصة بمدونتك ، ثم إختر "تصميم" ، ثم "تحريرHTML " وضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم ، وابحث عن الكود التالي :   وأيضاً استعن بزري لوحة المفاتيح CTRL+F 

</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>
 قم بحفظ القلب 

0 التعليقات:

إرسال تعليق

Twitter Delicious Facebook Digg Stumbleupon Favorites More