عند إنشاء صفحات ويب من نوع المقالة ، غالبًا ما تواجه الحاجة إلى النقر لمشاهدة صور كبيرة. Lightbox2 هو مكون من نوع jQuery ممتاز نسبيًا بين العديد من المنتجات. لن أخوض في تفاصيل حول التكوين. أرغب اليوم بشكل أساسي في المشاركة: كيفية تكبير الصورة من خلال عجلة التمرير الماوس بعد النقر على الصورة الكبيرة.
1. قم بتعديل رمز مصدر Lightbox لدعم تحجيم عجلة التمرير
تدعم عجلات الماوس بشكل أساسي المربع المنبثق بأكمله لحدث mousewheel ، Open Lightbox.js ، وابحث عن lightbox.prototype.build = function () {...}. يمكنك ربط حدث عجلة التمرير المطلوبة هنا (عند تهيئة Lightbox) ، على سبيل المثال ، إضافة الكود التالي في نهاية الوظيفة:
نسخة الكود كما يلي:
// صورة عجلة التصغير
this.img = this. $ container.find ('. lb-image') ؛
this.label = this. $ lightbox.find ('. lb-dataContainer') ؛
$ ([هذا. $ overlay [0] ، هذا. $ lightbox [0]]).
var flag = e.originalevent.wheeldelta <0 ؛
var imgh = self.img.height () ؛
var imgw = self.img.width () ؛
var nw = math.round (20*imgw/imgh) ؛
var cth = self. $ outerContainer.Height () ؛
var ctw = self. $ outerContainer.width () ؛
var layh = self. $ overlay.Height ()-20 ؛
var layw = self. $ overlay.width ()-20 ؛
// تحت
if (flag && imgh> 20 && imgw> 20) {
self.img.css ('height' ، imgh - 20) ؛
self.img.css ('width' ، imgw - nw) ؛
Self. $ OuterContainer.css ('height' ، cth - 20) ؛
Self. $ OuterContainer.css ('width' ، ctw - nw) ؛
if (ctw-nw> 240) {
self.label.css ('width' ، ctw - nw) ؛
}
} آخر إذا (! flag && imgh <layh && imgw <layw) {
self.img.css ('height' ، imgh + 20) ؛
self.img.css ('width' ، imgw + nw) ؛
Self. $ OuterContainer.css ('height' ، cth + 20) ؛
Self. $ OuterContainer.css ('width' ، ctw + nw) ؛
self.label.css ('width' ، ctw + nw) ؛
}
E.StopPropagation () ؛
العودة كاذبة
}) ؛
من الأسهل فهم الكود ، وهو إضافة مراقبة عجلة الماوس إلى الخلفية والصورة الأمامية ، ثم قم بتوسيع نطاق الارتفاع والعرض بشكل متناسب (قم بالتكبير ، ثم قم بالتمرير لأسفل للتصغير). قمت بتعيين تغيير الارتفاع إلى 20 بكسل في كل مرة ، ثم يتغير العرض بشكل متناسب. ما تجدر الإشارة إليه هو أن الحد الأدنى لحجم الصورة يجب تقليله ، ولا يمكن أن يتجاوز تكبير الصورة حد نطاق الشاشة. في الوقت نفسه ، لتجربة أفضل ، يجب عليك إضافة estoppropagation () والعودة كاذبة لمنع المتصفح من التمرير.
2. قم بتعديل رمز مصدر Lightbox لدعم صور Base64
قد يكون من المزعج أكثر أن نتحدث عنه هنا. دعونا أولاً نلقي نظرة على متطلبات تنسيق رمز HTML عند استخدام Lightbox الأصلي:
نسخة الكود كما يلي:
<a href = "img/image.jpg" data-lightbox = "test"> Image #1 </a>
هذه هي أسهل صورة منبثقة. عند النقر فوق الصورة #1 ، ستظهر Lightbox لعرض محتوى IMG/Image.jpg (عنصر <img src = "img/image.jpg"/>).
الآن دعونا نفكر في هذا الموقف ، إذا تم ترميز الصورة في Base64 على الخادم ويتم تخزينها في قاعدة البيانات؟ يجب أن يكون هكذا:
نسخة الكود كما يلي:
<a href = "data: image/png ؛ base64 ، ivborw ..." data-lightbox = "test"> Image #1 </a>
المشكلة هي أن طول HREF محدود تحت IE. لا يمكن وضع صورة كبيرة في حقل HREF ، وسيتم غسل الصورة (يتم عرض الجزء العلوي فقط).
هناك موقف شائع آخر. إذا قمت أولاً بعرض الصورة الصغيرة وانقر على الصورة الصغيرة لرؤية الصورة الكبيرة ، فيجب أن يكون الأمر مثل هذا:
نسخة الكود كما يلي:
<a href = "data: image/png ؛ base64 ، ivborw ..." data-lightbox = "test">
<img src = "البيانات: Image /png ؛ base64 ، ivborw ..." />
</a>
حسنًا ، هناك نوعان من بيانات BASE64 مكررة ، ويتم إرسالها جميعًا من جانب الخادم ، والتي تستهلك الوقت وعرض النطاق الترددي.
لذلك قمت بتعديله وفقًا لاحتياجاتي ، الرمز بسيط للغاية ، ويعدل الوظيفة الفرعية في Lightbox.prototy.Start = Function ($ Link) {...} addtoalbum:
نسخة الكود كما يلي:
وظيفة addtoalbum ($ link) {
self.album.push ({
// الرابط: $ link.attr ('href') ،
الرابط: $ link.children (). attr ("SRC") ،
العنوان: $ link.attr ('data-title') || $ link.attr ('title')
}) ؛
}
الجزء الذي تم التعليق عليه هو الأصل. رابط $ هو علامة في رمز HTML السابق. بعد التعديل ، تكون وظيفة وظيفة addtoalbum هي: عند تعيين SRC لتفجير الصورة ، لم تعد تأخذ أحرفًا من HREF الأصلي كـ SRC لظهر علامة IMG ، ولكنها تجد مباشرة سمة SRC من عناصر الطفل في العلامة A. نظرًا لأن طول سمة SRC غير محدود ، فلن يواجه مشكلة اقتطاع الصورة.
3. تطبيق Lightbox على المقالات الموجودة
تحدث القسم 2 بالفعل عن حقيقة أن HTML لديه تنسيق معين عند استخدام Lightbox. إذا كانت الصور الموجودة في المقالة الموجودة <img src = "img/image.jpg" ، فيجب أن تكون مغلفة في طبقة واحدة:
نسخة الكود كما يلي:
وظيفة initLightbox () {
var imgs = $ (". lightbox-container"). البحث ('img') ؛
$. EECH (IMGS ، وظيفة (i) {
var img = $ (imgs [i]) ؛
img.wrap ("<a href = '' 'data-lightbox =' test '> </a>") ؛
}) ؛
}
من بينها ، "Lightbox-Container" هو فئة الحاوية التي توجد بها المقالة. يجب وضع وظيفة initLightbox عند تحميل الصفحة جاهزة ، ستغلف جميع علامات IMG في المقالة في تنسيق Lightbox.
هذا كل شيء لهذا المقال. النقطتين 2 و 3: يمكنك استخدامه في سيناريوهات الاستخدام الخاصة بك. يركز تغييرات Lightbox على دعم تحجيم عجلة التمرير.
إرفاق Lightbox المعدل http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar