شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

avatar
عضو التميز
الجنس : انثى

السمك

عدد المساهمات : 125609

نقاط النشاط : 141194

السٌّمعَة : 2957

بلد العضو :

العمر : 31

معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
تمت المشاركة في الأربعاء ديسمبر 21, 2016 3:58 pm
javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي
السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
اقدم لكم كود javascript يعمل على نافذة منبثقة للصور بالمساهمات
باطار وجودة عالية بحجمها الاصلي
صورة للعمل الكود

طريقة التركيب
اذهب إلى. لوحة الادارة. عناصر اضافية. HTML و JAVASCRIPT
.اكواد javascript تفعيل اكواد javascript اختار نعم
وسجل ثم انشاء كود الاسم اي شئ اختار المواضيع .
وضع الكود جافا الاتي
ضع رد لرؤية الكود:


وسجل
ثم اضافة كود css
اذهب إلى لوحة الإدارة. مظهر المنتدى. صور والوان. الوان. ورقة css
وضع الكود الاتي
الكود:

 
a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}
 
.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}
 
.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}
 
.fancybox-opened {
  z-index: 930;
}
 
.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
 
.fancybox-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}
 
.fancybox-inner {
  overflow: hidden;
}
 
.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}
 
.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 10px;
}
 
.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}
 
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}
 
#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}
 
#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}
 
.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}
 
.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}
 
.fancybox-prev {
  left: 0;
}
 
.fancybox-next {
  right: 0;
}
 
.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}
 
.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}
 
.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}
 
.fancybox-nav:hover span {
  visibility: visible;
}
 
.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}
 
/* Overlay helper */
 
#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}
 
#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* Title helper */
 
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}
 
.fancybox-opened .fancybox-title {
  visibility: visible;
}
 
.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}
 
.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
          border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}
 
.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}
 
.fancybox-title-inside-wrap {
  margin-top: 10px;
}
 
.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

انتهى دمتم بخير
التوقــيـــــــــــــــــــــع


رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

avatar
عضو محترف
الجنس : ذكر

الاسد

عدد المساهمات : 3784

نقاط النشاط : 4266

السٌّمعَة : 14

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الأربعاء ديسمبر 21, 2016 4:05 pm
شكرا جرح
التوقــيـــــــــــــــــــــع

رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

avatar
بصمة خالدة
  •  

  • الجنس : ذكر

    الجدي

    عدد المساهمات : 6241

    نقاط النشاط : 7087

    السٌّمعَة : 65

    بلد العضو :

    العمر : 101

    معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
    تمت المشاركة في الأربعاء ديسمبر 21, 2016 4:15 pm
    جميييييييلل =)
    التوقــيـــــــــــــــــــــع


    سبحان الله وبحمده ..
              سبحان الله العظيم ...

    اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين



    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    عضو التميز
    الجنس : انثى

    السمك

    عدد المساهمات : 125609

    نقاط النشاط : 141194

    السٌّمعَة : 2957

    بلد العضو :

    العمر : 31

    معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
    تمت المشاركة في الأربعاء ديسمبر 21, 2016 4:20 pm
    الجميل والرائع مروركما
    دمتم بخير
    التوقــيـــــــــــــــــــــع


    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    عضو جديد
    الجنس : انثى

    عدد المساهمات : 7

    نقاط النشاط : 7

    السٌّمعَة : 1

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الأحد ديسمبر 25, 2016 12:03 pm
    شكرا

    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    عضو جديد
    الجنس : ذكر

    عدد المساهمات : 66

    نقاط النشاط : 122

    السٌّمعَة : 3

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الأحد يناير 01, 2017 8:55 am
    كود رائع جداااا شكرا على هذا الكود
    التوقــيـــــــــــــــــــــع


    لا اله الا الله 
    محمد رسول الله
    أستغفر الله 
    أستغفر الله
    سبحان الله 
    سبحان الله
    ----------------------------------------------

    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    عضو التميز
    الجنس : انثى

    السمك

    عدد المساهمات : 125609

    نقاط النشاط : 141194

    السٌّمعَة : 2957

    بلد العضو :

    العمر : 31

    معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
    تمت المشاركة في الإثنين يناير 02, 2017 12:08 pm
    الجميل والرائع مروركما
    دمتم بخير
    التوقــيـــــــــــــــــــــع


    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    عضو نشيط
    الجنس : ذكر

    عدد المساهمات : 119

    نقاط النشاط : 168

    السٌّمعَة : 2

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضوhttp://www.ultrawb.com
    تمت المشاركة في السبت يونيو 24, 2017 10:44 am
    يسلمو ننتظر منك المزيد من الابداع
    التوقــيـــــــــــــــــــــع


    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    عضو نشيط
    الجنس : ذكر

    عدد المساهمات : 478

    نقاط النشاط : 496

    السٌّمعَة : 1

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الخميس أغسطس 03, 2017 3:05 pm
    أإسـ عٍ ـد الله أإأوٍقـآتَكُـ بكُـل خَ ـيرٍ دآإئمـاَ تَـبهَـرٍوٍنآآ بَمَ ـوٍآضيعكـ أإلتي تَفُـوٍح مِنهآ عَ ـطرٍ أإلآبدآع وٍأإلـتَمـيُزٍ

    رد: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    عدد المساهمات : 2268

    نقاط النشاط : 4223

    السٌّمعَة : 92

    بلد العضو :





    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الإثنين ديسمبر 11, 2017 2:14 pm
    يعطيك العافيه طرح رائع وانت دائما رائع في طرحك .
    أنتظر جديدك بكل الشوق والود ,,,
    تقبل مروري المتواضع
    التوقــيـــــــــــــــــــــع
    استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
    صلاحيات هذا المنتدى:
    لاتستطيع الرد على المواضيع في هذا المنتدى
    Propellerads                                                                           Propellerads
    Top