جاري التحميل
أفضل 10 أعضاء في هذا الأسبوع
iliecros21
 
zizou2012
 
JoryAbdallah
 
omarpop23
 

المتواجدون الآن ؟
ككل هناك 18 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 18 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 490 عُضو.
آخر عُضو مُسجل هو iliecros21 فمرحباً به.

أعضاؤنا قدموا 9789 مساهمة في هذا المنتدى في 1846 موضوع

منتديات تقنيات :: جاليري استايلات التومبلايت والقوالب والاكواد :: 

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

avatar
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);
}

انتهى دمتم بخير


m13
avatar
انتقـآءْ رآئــع
وطرح جميــل كجمآل روحك
دآئمـآ مآنرى الإبدآع والتميز يلآمس انتقآئك
لآحرمنـآ الله من روعة اطروحآتكـ
الله يعطيك الف عافيـــــــــة وآلف شكَـر لك
ولك مني أرق وأجمل التحايا
avatar
الكود يعمل بشكل جميل ورائع تم التجربه وهذه صوره له
لدى سؤال الى اختي جرح


سؤالي هو مجرد فكره لها فائده كبيره
أضافة هذا الكود مع نص كود الجافا أو في ورقة سي سي
<a href="topic-t{TOPIC_ID}.htm">{TOPIC_TITLE}

بورك مجهودك الرائع
avatar
يعطيك العافية
على المرور
واختك ببداية تعلم جافا يعني لو عندك خلفية ضع الكود مباشره هنا كامل


m13
avatar
m5
avatar
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
avatar
مشكووووووووووووووووووووووووووووووووووووووور
مواضيع مماثلة

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول