إضافة الصور المنبثقة 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>
هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا مع متمنياتي لكم بمتابعة ممتعة  .

هناك 55 تعليقًا:

  1. جميلة جدا أخي أبو عياد
    شكرا لك على هذا المجهود وبارك الله فيك
    أستفيد معك كعادتي
    لك التحية

    ردحذف
  2. جزاك الله خير اضافة متميزة
    شكراً لمجهودكم المعتاد
    بوركت

    ردحذف
  3. لم تفلح معى حيث لم تنبثق الصور بعد تركيب الكود !!

    ردحذف
  4. رائع جدا واسمح لى باضافة طريقة أخرى
    توجه لتحرير القالب وضع هذا الكود قبل</head>



    <link href='http://sites.google.com/site/alzraiee/lightbox.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://sites.google.com/site/alzraiee/jquery.min.js' type='text/javascript'/><script src='http://sites.google.com/site/alzraiee/lightbox.min.js' type='text/javascript'/>

    ردحذف

  5. السلام عليكم:
    الاخ الفاضل ابو اياد..ممكن توضيح اكثر ؟؟
    بالضبط اين اذهب لابحث عن الوسم/body؟؟
    بحثت في صفحة تحرير الرسائل..لم اجده..
    شكرا لك مقدما..

    أخوك
    ابن الايمان

    ردحذف

  6. السلام عليكم ابا اياد..:
    شكرا على جهودك الكريمه..
    طبقت خاصة ارجحة الصور ..
    طبقت خاصية الصور المنبثقه ..لكنها:
    اولا : ليس دائما تفتح..
    ثانيا اذا فتحت تفتح في صفحة مكان صفحة المدونه يعني يتوجب الرجوع الى صفحة المدونه..
    كنت اتخيل انها ستفتح في صفحه جانبيه خاصه بها(الصوره المنبثقه).

    اتمنى سماع تعقيبك على هذه الملاحظات قريبا..
    شكرا لك على كل حال
    اخوك
    ابن الايمان

    ردحذف
  7. @ابن الإيمان
    مرحبا بك أخي بالنسبة لسبب أن الصورة لا تفتح معك في بعض الأحيان ، لأن صفحة المدونة لم تكمل عملية التحميل ،لذلك يجب أن تنتظر حتى تظهر صفحة المدونة 100% .أما بالنسبة لسؤالك الثاني : فإن هذه الإضافة تعرف ب:lightbox أي أنها تظهر فقط على الصفحة التي بها الصورة وتقوم بتضليل ما وراءها لكن إذا أردت فتح الصورة في صفحة جديدة فهذا أمر آخر لذلك راجع هذا الدرس من هنا وشكرا لك على ملاحظاتك القيمة

    ردحذف
  8. غير معرف6:16 ص

    شكرا ابو اياد

    ردحذف
  9. اخى يبدو ان الكود به مشكلة حيث عندما اضغط على الصورة تظهر اسفل الموقع وليس فى مكان الصورة

    ردحذف
  10. @sossi
    لقد كان هناك خطأ على مستوى ملف الجافا ، لقد تم تصحيح الأمر ،وهي الروابط الزرقاء في الكود ، شكرا لملاحظتك

    ردحذف
  11. طبقتها والحمد لله اشتغلت تمام جزاك الله اخى على هذا الموضوع المهم وبارك الله لك فى مدونتك المفيدة

    ردحذف
  12. غير معرف7:53 ص

    الله يجزاك كل خير اخي اضافة راااائعة

    ردحذف
  13. بجد مواضيعك كلها قيمه اشكرك اخى فى الله

    ردحذف
  14. مشكور اخ ابو اياد
    بس في صور ما بتنبثق
    ؟

    ردحذف
  15. ولا تنسى اخي ابو اياد هذه الميزة

    http://img862.imageshack.us/img862/8937/38491996.png

    ردحذف
  16. أخي أبو اياد الاضافة لا تدعم الصور بصيغة png
    كما واجهتني مشكلة الغاء بعض الاضافات كالقائمة المسندلة والسلايدشو
    أرجوا ايجاد حل للمشكلة و شكرا b-(
    مروان

    ردحذف
  17. السلام عليكم ورحمة الله وبركاتة
    تسلم إيدك يا أبو إياد
    أنا ضيفتها جميلة جميلة جدااااااااا
    علي فكرة أنا محمد السيد الملقب (أبو أياد)أيضا إبنى أسمة إياد
    أنا سعيد جدا بمعرفتك

    ردحذف
  18. http://dostor.org/politics/middle-east/11/april/14/40044

    اخ ابو اياد هل تسطيع عمل مقطع اليوتيوب بطريقة منبثة مثل هذا الموقع

    ردحذف
  19. @مدونة ابو معاذ
    تفضل أخي أبو معاذ ،هذا الشرح للأخ جاسر من هنا

    ردحذف
  20. الله يحفظك أخي الإضافة في غاية الروعة
    قمت باضافتها تعمل ميه ميه
    في انتضاء كل جديدك و السلام عليك

    ردحذف
  21. مشكور جدا جدا على هذه الاضافةالرائعة
    ارجو منك بخبرتك زيارة موقعي الاول واثاني
    http://maghlasaw.blogspot.com/
    http://mghaleskids.blogspot.com/
    والتكرم علي بملاحظاتك

    ردحذف
  22. إضافة رائعة تضفي لمس جميلة على المدونة شكرا لك ولا تحرمنا من جديدك

    ردحذف
  23. مشكووووووووووووووووووووووووووور

    ردحذف
  24. شكرا لك على الموضوع الرائع لكن انا بحط صور كبيره ف الطول والعرض ف لما اجي اكبرها الاقيها كبيره زياده عن اللزوم

    هل يوجد اضافه مثلها ؟ بس مختلفه ف التكبير او الشكل

    ردحذف
  25. ادخل على اي موضوع يوجد به صور وانظر

    http://zerogad.blogspot.com/

    ردحذف
  26. @zerogad95
    أخي هذا أمر طبيعي لأن الصور تعرض بقياساتها الأصلية

    ردحذف
  27. أزال المؤلف هذا التعليق.

    ردحذف
  28. شكرا لك اخي ابو اياد لقد استفدت منك كثيرا

    ردحذف
  29. أزال المؤلف هذا التعليق.

    ردحذف
  30. شكرا ابو اياد تم التركيب بنجاح بعد مشكله توقف تاثيرات اخرى بعد تركيب الاضافه لكن الحل انى قمت باضافه الكود بعد] ] > < / b : skin >

    ردحذف
  31. أزال المؤلف هذا التعليق.

    ردحذف
  32. السلام عليكم،
    أريد أن أسئل إن كان في الإمكان تشيلها على الفيديو ؟

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

    ردحذف
  34. @sossi
    جربتها على مدونتك وهي تعمل 100%

    ردحذف
  35. chokraan bzaaf akhhoya raak mostad tbarkalah alik f blogger

    ردحذف
  36. السلام عليكم ورحمة الله وبركاته
    ابو اياد ودي ابوووووسك على خدك مشكور على الإضافة الرائعة يا رائع

    ردحذف
  37. جزيت خيرا أخي .. بارك الله فيك

    ردحذف
  38. شكرا يا ابو اياد بس بقولك هو انا لو عايز ادرس الكلام ده هل فيه كورسات ممكن آخدها ولا مفيش ولو فيه يا ريت تقولى اسمه لحسن انا حابب الشغل ده اوى .. سلامو عليكو

    الشافعى من ام الدنياااااااا

    ردحذف
  39. بارك الله فيك ,
    دروس اكثر من رائعه ,
    لك جزيل الشكر والتقدير

    وفقك الله

    ردحذف
  40. أنا أسامة من المغرب من مدينة مكناس (: ولد البلاد.
    شكرا لك أخي الكريم أبو أياد عملت معي بنجاح وأرجو منذ منك المساعدة في مدونتي لأن أقسام المدونة لا تستغل أي عندما أضع أي موضوع يذهب ال الصفحة الرئيسة وأنا أريده أن يذهب الى الأقسام الخاصة بكل موضوع

    وهذه هي مدونتي أرجو زيارتك لها لتفهم المشكل http:///mobile4my.blogspot.com
    وشكرا لك

    ردحذف
  41. يعطيك العافيه اخوي على الاضااافه الروووووعه ^^

    ردحذف
  42. شكرا يابااااااااااااشا

    ردحذف
  43. انا عندى فى المدونه بتظهر على صور وصور لا

    ردحذف
  44. شكرا ابو اياد على الابداع المتواصل

    ردحذف
  45. اضافة جميلة وضعتها في مدونت بس المشكلة لمل اضغط على صورة يطلع حجمها كبير جدا اكبر من الشاشة
    ما ىالحل
    http://smile-maker78.blogspot.com/

    ردحذف
  46. شكرا لك على المجهود

    ردحذف
  47. شكرا لك اخي ابو اياد وارجو تقيمك لمدونتي

    ردحذف
  48. <div dir="rtl" style="text-align: right;" trbidi="on">
    <a href="http://blogg-face.blogspot.com/"></a></div>
    ها هي مدونة بلوجر فيس

    ردحذف
  49. ;) ;) ;) ;) ;) ;) ;) ;) ;) ;) ;) ;) ;)

    ردحذف
  50. السلام ممكن تشرح بالصور او الفيدو مكان التطبيق

    ردحذف
  51. شرح اكثر من رائع تسلم يداك

    ردحذف
  52. يعطيك العافيه
    http://de-ps.blogspot.com

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية