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

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

avatar
بصمة خالدة
الجنس : انثى

السمك

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

نقاط النشاط : 140920

السٌّمعَة : 2952

بلد العضو :

العمر : 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
بصمة خالدة
الجنس : ذكر

الجدي

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

نقاط النشاط : 6895

السٌّمعَة : 62

بلد العضو :

العمر : 100



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


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

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



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

avatar
بصمة خالدة
الجنس : انثى

السمك

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

نقاط النشاط : 140920

السٌّمعَة : 2952

بلد العضو :

العمر : 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
بصمة خالدة
الجنس : انثى

السمك

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

نقاط النشاط : 140920

السٌّمعَة : 2952

بلد العضو :

العمر : 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
عضو نشيط
الجنس : ذكر

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

نقاط النشاط : 487

السٌّمعَة : 1

بلد العضو :

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