إضافة فتح صورة الموضوع بصندوق LightBox

إضافة فتح صورة الموضوع بصندوق LightBox

يوجد الآن مشاهدة التعليقات : 12

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

السلام عليكم إخواني الكرام هذه التدوينة مخصصة للجميع أو بالأحرى من لا تتواجد لديهم خاصية تكبير الصورة التي تكون بداخل الموضوع بمعنى عند الضغط على الصورة تظهر بصندوق وبحجمها الطبيعي أيضا تتيح لك إظهار صور أخرى ضمن الموضوع

العديد من القوالب لا تتوفر لديهم هاته الخاصية وتوجد قليل من الشروحات لكن معقدة وفي الأغلبية لا تعمل، والطريقة التي سأقدمها لكم هي سهلة وفعالة 100%
شرح طريقة التركيب
1. اتجه إلى الإعدادات >> مشاركات وتعليقات ثم في عرض الصورة في المبسط إختر نعم وقم بحفظ الإعدادات




2. حرر القالب وابحث باستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي فوقه
/* CSS Image Lightbox Ar1web */
#jquery-overlay{position:absolute;top:0;left:0;z-index:95;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;max-width:100%!important;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{display:none!important;}
#lightbox-nav{position:absolute;top:25%;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;transition:All 0.2s ease;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block;transition:All 0.2s ease;}
#lightbox-nav-btnPrev{left:10%;float:left;transition:All 0.2s ease;}
#lightbox-nav-btnNext{right:10%;float:right;transition:All 0.2s ease;}
#lightbox-container-image-data-box{font-size:10px;font-family: 'Open Sans',Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:hidden;max-width:100%!important;padding:0 10px;}
#lightbox-container-image-data{padding:0 10px;color:#818d99}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:normal}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
4. ابحث عن </body> ثم ضع الكود التالي فوقه
<script src='https://ar1web-com.googlecode.com/svn/Hm/previewimg.js' type='text/javascript'/> 
5. قم بحفظ العمل واذهب لتجرب الإضافة
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. يعطيك العافية أخوي حسام شرح جميل .. | + ممكن شرح كيف اضع اعلانات داخل الموضوع زي مدونتك . ؟
    اانا لدي القالب لكن لا اعرف كيف اضيف الاعلانات ارجو شرح الطريقة .

    ردحذف
    الردود
    1. تفضل : http://www.ar1web.com/2014/10/ads-unit-inside-posts.html

      حذف
  2. شكرا لك اخي الحبيب على الموضوع
    انا اريد طريقة وضعك انت للاعلانات كما في مدونتك اخي الكريم بمقياس 728*90 يعني يوجد موضوع وضعته انت لكن لم يعجبني شكلها اريدها هكذا الله يحفظك مثل هذه
    http://im56.gulfup.com/W1Aozd.png
    و شكرا

    ردحذف
  3. يعطيك عافية اخي بس كيف اضيف هذه الى مدونتي
    http://im79.gulfup.com/nUtFH3.png

    ردحذف
    الردود
    1. ستكون تدوينة لطريقة الإضافة في القريب العاجل

      حذف
    2. شكرا لك اخي انت من افضل اشخاص الذين عرفتهم

      حذف
  4. السلام عليكم ورحمة الله وبركة يا اخي ممكن طلب
    ماهو الموقع المسخدم لعمل هذة الصورة
    http://im85.gulfup.com/2au5AH.png
    ارجو الرد علي سؤالي :)

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

    ردحذف
  6. غير معرف2/29/2016

    شكرا اخي ولكن ارجو نشر موضوع عن مواقع المعاينه مع الشرح وشرح مثل لملعاينه التي عملتها للي الي 19 اضافه انتظار التحميل التي عملت المعاينه مع بعضها

    ردحذف
  7. غير معرف12/24/2016

    شكرا جزيلا لك أخي في الله

    ردحذف
  8. عذراً اخي فالكود لم يعد يعمل .. رجاء اعطنا حل

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم