<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>灯箱</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="Houyuqing"> <link rel="stylesheet" type="text/css" href="../css/yao.css"> </head> <body> <div class="bodyBox"> <div class="imgBox" id="lightbox_1"> <div class="imgLeft-2"> <img src="../images/01.jpg" alt="01.jpg" class="lightbox-pic" data-source="../images/01.jpg"> </div> <div class="imgRight-2"> <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg"> <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg"> <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg"> </div> </div> </div> <!--弹出层--> <div id="lightbox_mask"></div> <div id="lightbox_popup"> <div class="pic-view"> <img src="../images/05.jpg" alt="#" class="pic"> </div> <div class="btn-view"> <a href="#" class="btn btn-prev">←</a> <a href="#" class="btn btn-next">→</a> <a href="#" class="btn btn-close">×</a> </div>
//另一种
<div class="btn-view">-->
<!--<a href="#" class="btn btn-prev">-->
<!--<span></span>-->
<!--</a>-->
<!--<a href="#" class="btn btn-next">-->
<!--<span></span>-->
<!--</a>-->
<!--</div>
</div> <script src="../js/jquery.min.js"></script> <script src="../js/lightbox.js"></script> <script> // 初始化图片弹出框 $(function () { $('#lightbox_1').lightbox({ ifChange: true }); }); </script> </body> </html>
yao.css(一种效果)
.imgLeft-2 { width: 742px; height: 526px; float: left; margin-right: 5px; } .imgLeft-2 img { width: 742px; height: 526px; } .imgRight-2 { width: 232px; height: 551px; float: left; overflow: hidden; } .imgRight-2 img { width: 232px; display: block; height: 172px; } .imgRight-2 img:not(:last-child) { margin-bottom: 5px; }
yao.css(另一种效果)
#lightbox_mask { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); } #lightbox_popup { display: none; position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } #lightbox_popup .pic-view .pic { border-radius: 4px; } #lightbox_popup .btn-view .btn { position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 24px; text-decoration: none; border-radius: 30px; background-color: #000; color: #fff; padding: 0; border: 2px solid #fff; display: none !important; } #lightbox_popup:hover { cursor: pointer; } #lightbox_popup:hover .btn { display: block !important; } #lightbox_popup .btn-view .btn-prev { left: 10px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #lightbox_popup .btn-view .btn-next { right: 10px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #lightbox_popup .btn-view .btn-prev span { width: 6px; height: 6px; top: 50%; left: 40%; position: absolute; border-right: 3px solid #fff; border-top: 3px solid #fff; -webkit-transform: translate(0,-50%) rotate(-135deg); transform: translate(0,-50%) rotate(-135deg); } #lightbox_popup .btn-view .btn-next span { width: 6px; height: 6px; top: 50%; left: 30%; position: absolute; border-left: 3px solid #fff; border-bottom: 3px solid #fff; -webkit-transform: translate(0,-50%) rotate(-135deg); transform: translate(0,-50%) rotate(-135deg); }
lightbox.js
;(function ($, window, document, undefined) { var Lightbox = function (elem, options) { var self = this; this.$elem = elem; this.$pic_item = this.$elem.find('.lightbox-pic'); this.$popMask = $('#lightbox_mask'); this.$popWin = $('#lightbox_popup'); this.$picView = this.$popWin.find('.pic-view'); this.$pic = this.$picView.find('.pic'); this.$btn_prev = this.$popWin.find('.btn-prev'); this.$btn_next = this.$popWin.find('.btn-next'); this.$btn_close = this.$popWin.find('.btn-close'); this.$caption = this.$popWin.find('.caption-view > p'); this.groupName = null; this.groupData = []; this.index = 0; this.pic_t = 0; this.b_stop = true; this.defaults = { ifChange: false }; this.opts = $.extend({}, this.defaults, options); }; Lightbox.prototype = { changePic: function () { var self = this; this.$pic.attr('src', this.groupData[this.index].src); this.$caption.text(this.groupData[this.index].caption); }, btnSwitch: function () { var self = this; this.$btn_prev.click(function () { if (self.index <= 0) { self.index = self.groupData.length - 1; } else { self.index --; } self.changePic(); }); this.$btn_next.click(function () { if (self.index >= self.groupData.length - 1) { self.index = 0; } else { self.index ++; } self.changePic(); }); }, showPop: function (curSrc) { this.$popMask.fadeIn(); this.$popWin.fadeIn(); this.$pic.attr('src', curSrc); this.$caption.text(this.groupData[this.index].caption); this.autoTop($(window).height(), this.$pic.height()); }, initalPop: function () { var self = this; var curSrc = null; var curId = null; this.$pic_item.click(function () { var curGroup = $(this).attr('data-group'); curSrc = $(this).attr('data-source'); curId = $(this).attr('data-id'); if (self.groupName !== curGroup) { self.groupName = curGroup; self.getGroupData(); } self.index = self.getIndexOf(curId); self.showPop(curSrc); self.btnSwitch(); if (self.opts.ifChange) { self.$btn_prev.show(); self.$btn_next.show(); } else { self.$btn_prev.hide(); self.$btn_next.hide(); } }); $(window).resize(function () { self.autoTop($(window).height(), self.$pic.height()); }); this.$btn_close.click(function () { self.$popMask.fadeOut(); self.$popWin.fadeOut(); }); this.$popMask.click(function () { self.$popMask.fadeOut(); self.$popWin.fadeOut(); }); }, // 小方法 autoTop: function (win_h, pic_h) { var pic_t = (win_h - 38 - pic_h - 10) / 2; if (pic_t <= 0) { pic_t = 0; } this.$picView.css({top: pic_t}); }, getGroupData: function () { var self = this; this.groupData.length = 0; this.$pic_item.each(function () { self.groupData.push({ id: $(this).attr('data-id'), src: $(this).attr('data-source'), caption: $(this).attr('data-caption') }); }); }, getIndexOf: function (curId) { var index = 0; $(this.groupData).each(function () { if (this.id === curId) { return false; } else { index ++; } }); return index; }, constructor: Lightbox }; $.fn.lightbox = function (options) { var lightbox = new Lightbox(this, options); return lightbox.initalPop(); }; })(jQuery, window, document);