lightbox用法 img记得加上href

<script src="/jgds/common/js/base/jQuery.v1.4.2.js"></script>
<script src="/jgds/common/js/plugin/lightbox/js/jquery.lightbox-0.5.js"></script>
<link type="text/css" rel="StyleSheet" href="/jgds/common/js/plugin/lightbox/css/jquery.lightbox-0.5.css" media="screen" />

必须有上面三个文件,jquery版本可以换

要展示的图片标签必须加个:href='图片路径' 切记

<img src="http://www.xmccc.org:8081/jgds/upload/big/201406/渲染图2.jpg" href="http://www.xmccc.org:8081/jgds/upload/big/201406/渲染图2.jpg" style="width: 99px; height: 100px; margin-top: 0px;">

用法:
$(document).ready(function() {
$("img").lightBox();
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片(相册)展示设计</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="scene"> <!-- 展示层,这里我复制了4层,可以根据自己需要进行修改 --> <div class="img-cont left cont-1" data-helper="0" data-blocks="1"></div> <div class="img-cont right cont-1" data-helper="0" data-blocks="1"></div> <div class="content cont-1"> <h2 class="title">Lomond lake</h2> <p class="content-text">Lomond lake is the largest lake in Scotland. It is located in the south of the Scottish Highlands, 27 kilometers from Glasgow. Surrounded by mountains, the south is slightly triangular.</p> <span class="close">+</span> </div> <div class="img-cont left cont-2" data-helper="-1" data-blocks="2"></div> <div class="img-cont right cont-2" data-helper="1" data-blocks="2"></div> <div class="content cont-2"> <h2 class="title">Ardlui outdoor centre</h2> <p class="content-text">Abandoned Ardlui outdoor centre. Location: Loch Lomond, Scotland. </p> <span class="close">+</span> </div> <div class="img-cont left cont-3" data-helper="-2" data-blocks="3"></div> <div class="img-cont right cont-3" data-helper="2" data-blocks="3"></div> <div class="content cont-3"> <h2 class="title">Scottish mountain lake</h2> <p class="content-text">Drone shot of Scottish mountain lake high up in the hills overlooking Loch Lomond and the Trossachs National Park which lurks in the distant morning haze. Location: Loch Humphrey, Scotland, U.K.</p> <span class="close">+</span> </div> <div class="img-cont left cont-4" data-helper="-3" data-blocks="4"></div> <div class="img-cont right cont-4" data-helper="3" data-blocks="4"></div> <div class="content cont-4"> <h2 class="title">Mountain Valley</h2> <p class="content-text">Mountain Valley, Scotland.</p> <span class="close">+</span> </div> <h1 class="heading">BEAUTIFUL</h
最新发布
03-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值