JoryAbdallah
سوبر الإبداع
عدد المساهمات : 126400 نقاط النشاط : 142121 السٌّمعَة : 3010 بلد العضو : العمر : 38
| موضوع: javascript + css عمل نافذة منبثقة للصور بالمساهمات بشكل احترافي الأربعاء ديسمبر 21, 2016 4: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); }
انتهى دمتم بخير |
|