lightbox点击图片预览

首先引入：

<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

例：

var imgUrl="https://img0.baidu.com/it/u=1462702225,3884903262&fm=26&fmt=auto&gp=0.jpg"; s = "<a href='"+imgUrl+"' class='pic_a'><img src='"+imgUrl+"' style='border:solid 1px #CE8031;width:20px;height:20px;margin:0px 5px 0px 5px;' data_src='"+imgUrl+"' name= 'photo' ></img></a>";

// 列表

var lightBoxSetting = {"imageLoading": '<%=request.getContextPath()%>/jsp/images/lightbox-ico-loading.gif',"imageBtnPrev": '<%=request.getContextPath()%>/jsp/images/lightbox-btn-prev.gif',"imageBtnNext": '<%=request.getContextPath()%>/jsp/images/lightbox-btn-next.gif',"imageBtnClose": '<%=request.getContextPath()%>/jsp/images/lightbox-btn-close.gif',"imageBlank": '<%=request.getContextPath()%>/jsp/images/lightbox-blank.gif',"containerResizeSpeed" : 300
};

列表查询结束后回调函数   查询结束后默认执行
function callbackSearch(responseText, tabId){//实现点击小图时图片放大$(".pic_a").lightBox(lightBoxSetting);//$("#dia-tab-partinfo a[name='pic_a']").lightBox();
}

备注：

//jquery.lightbox-0.5.js
function _set_interface() {// Apply the HTML markup into body tag$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"/><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');// Get page sizesvar arrPageSizes = ___getPageSize();// Style overlay and show it$('#jquery-overlay').css({backgroundColor: settings.overlayBgColor,opacity:            settings.overlayOpacity,width:              arrPageSizes[0],height:             arrPageSizes[1]}).fadeIn();// Get page scrollvar arrPageScroll = ___getPageScroll();// Calculate top and left offset for the jquery-lightbox div object and show it$('#jquery-lightbox').css({top:   arrPageScroll[1] + (arrPageSizes[3] / 10),left:    arrPageScroll[0]}).show();// Assigning click events in elements to close overlay$('#jquery-overlay,#jquery-lightbox').click(function() {_finish();                                    });// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {_finish();return false;});// If window was resized, calculate the new overlay dimensions$(window).resize(function() {// Get page sizesvar arrPageSizes = ___getPageSize();// Style overlay and show it$('#jquery-overlay').css({width:      arrPageSizes[0],height:     arrPageSizes[1]});// Get page scrollvar arrPageScroll = ___getPageScroll();// Calculate top and left offset for the jquery-lightbox div object and show it$('#jquery-lightbox').css({top:    arrPageScroll[1] + (arrPageSizes[3] / 10),left:    arrPageScroll[0]});});}

一般情况下是$('body').append，如果是子页面要实现的话则这块要改子页面的选择器；

lightbox点击图片预览相关推荐

微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中- 如图所示: 实际效果图: 话不多说,直接上代码 1.html代码: <view class="img-box&q ...
微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现
在微信公众号H5里面可能会遇到点击图片预览,还可以放大缩小,微信内置有这个功能可以实现用vue写项目的话,先 cnpm install weixin-js-sdk --save 接着给图片一个点击事 ...
van-image移动端点击图片预览
van-image预览图片,点击图片预览大图效果图如下: 下面是代码: <div><van-image :src="imgTest.icon" @click=& ...
html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图
前提安装插件 npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vu ...
uni-app 点击图片预览功能
预览图片 uni.previewImage(OBJECT) https://uniapp.dcloud.io/api/media/image.html#unipreviewimageobject 一般 ...
微信小程序现实点击图片预览功能
html部分 <image bindtap="showPic"></image> js部分 showPic: function () {// 预览图片,放大 ...
vue 点击图片预览图片
https://blog.csdn.net/qq_25186543/article/details/80019983 NPM npm install --save vue-picture-previe ...
swift 点击图片预览，有放大缩小动画
//Cell的点击事件 let rect = targetCell.convert(targetCell.chatImageView.frame, to: self.listTableView) le ...
vue |实现点击图片预览浏览器满屏大图
安装插件 npm install vue-directive-image-previewer -D 在main.js 引入插件 import VueDirectiveImagePreviewer fr ...
html5 点击图片预览放大,jQuery超实用图片放大预览特效插件
大自然的自述过去,我这儿有新鲜的空气,清澈的河流,雄伟的高山,一望无际的草原,郁郁葱葱的森林.天空中,小鸟在自由自在的飞翔:水里,小鱼在快活的游来游去:森林里,动物们快乐地嬉戏,人类辛勤的种植.一切 ...

lightbox点击图片预览

lightbox点击图片预览相关推荐

最新文章

热门文章