الثلاثاء، 11 سبتمبر 2012

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

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

jquery-lightboxالسلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم أحباءنا الكرام في تدوينة جديدة بعد هذا الغياب عن تقديم كل ما هو جديد في عالم التدوين ،تلقيت عدة رسائل تسألني عن طريقة تركيب خاصية الصور المنبثقة 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() {

$(&#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.pergola-aluminium.org/ "></a></font>

هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا مع متمنياتي لكم بمتابعة ممتعة .

  ... نهاية الشرح ...

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلfaseel

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل





ضع تعليقك

0 التعليقات:

next prev home

البحــث

UK FR DE ES IT NL

RU PT JP KR EG CN

المتابعون

استثمارا للخبرات العالية والإمكانات التقنية المتميزة والطاقات البشرية الكبيرة التي تتميز بها "ابداع" أنشأت المؤسسة إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية تتمكن الشركات والمتاجر من ترويج منتجاتها في كافة أنحاء العالم وتزويد مواقعها بإمكانية البيع عبر الإنترنت وتشمل خدمة بناء مواقع الإنترنت عدة مراحل بدأ من عملية التصميم المبدئي للموقع، وحتى الانتهاء منه، والقيام بتحديث الموقع كلما تطلب الأمر كما تتميز مؤسسة "ابداع" بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة في العمل لذلك نحمد الله العلي العظيم على منحنا تلك القدرة