<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();
});
分享到:
相关推荐
<a href="image1.jpg" data-lightbox="gallery"><img src="thumbnail1.jpg" alt="Image 1"> <a href="image2.jpg" data-lightbox="gallery"><img src="thumbnail2.jpg" alt="Image 2"> $(document).ready...
<a href="path/to/image.jpg" data-toggle="lightbox" data-gallery="gallery"> <img src="thumbnail-of-image.jpg" alt="Image Title"> ``` 这里,`data-toggle="lightbox"` 和 `data-gallery="gallery"` 数据...
<a href="image.jpg" class="lb-data" data-lightbox="group1" data-title="图片描述"> <img src="thumbnail.jpg" alt="图片预览"> ``` 这将启动Lytebox,并在点击链接时显示大图。 3. **HTML内容**:要加载...
`lightGallery` 的基本用法是将`data-lg-src`属性添加到每张图片元素上,用来指定全屏查看时的图片源。同时,可以使用`data-sub-html`来添加图片描述。例如: ```html <a href="img1.jpg" data-lg-src="img1_full...
在`lightbox`文件夹中,可能包含了Fancybox的示例图片和HTML代码,这些可以帮助开发者快速理解Fancybox的用法。通常,一个简单的图片灯箱效果可以这样实现: ```html <a href="path/to/image.jpg" class="fancybox...
<a href="images/image1.jpg" title="Image 1"><img src="images/thumb1.jpg" alt="Image 1 Thumbnail"/> <a href="images/image2.jpg" title="Image 2"><img src="images/thumb2.jpg" alt="Image 2 Thumbnail"/> ...
由于`jQuery ColorBox`基于jQuery,因此可以与其他jQuery插件无缝集成,如用于图片预览的`lightbox`插件或用于表单验证的`validate`插件。 ## 8. 示例代码 在`colorbox-master`压缩包中,通常会包含示例代码、样式...
<a class="fancybox" href="image.jpg"><img src="thumbnail.jpg" alt="Image Title"> ``` - 初始化fancybox:在文档加载完成后,使用jQuery的`.fancybox()`方法初始化。 ```javascript $(document).ready(function...
<img id="imgZoom" src="small-image.jpg" alt="产品图片" class="jqzoom" rel="gal1"> <a href="large-image.jpg" title="产品大图" style="display:none;"> ``` 四、初始化jqZoom 在文档加载完成后,通过...
对于单张图片的展示,文章中展示了一个简单的用法,即通过给<img>标签的父级标签添加id属性,并通过FancyBox的方法调用,可以实现对单张图片的特效展示。此外,FancyBox还可以通过title属性来展示图片的标题信息,...