`

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();
});
分享到:
评论

相关推荐

    jQuery Lightbox

    &lt;a href="image1.jpg" data-lightbox="gallery"&gt;&lt;img src="thumbnail1.jpg" alt="Image 1"&gt; &lt;a href="image2.jpg" data-lightbox="gallery"&gt;&lt;img src="thumbnail2.jpg" alt="Image 2"&gt; $(document).ready...

    bootstrap-media-lightbox:用于bootstrap3的轻巧,无边界的媒体灯箱扩展。 它支持单个图像,图像库,视频和iframe

    &lt;a href="path/to/image.jpg" data-toggle="lightbox" data-gallery="gallery"&gt; &lt;img src="thumbnail-of-image.jpg" alt="Image Title"&gt; ``` 这里,`data-toggle="lightbox"` 和 `data-gallery="gallery"` 数据...

    lytebox框架

    &lt;a href="image.jpg" class="lb-data" data-lightbox="group1" data-title="图片描述"&gt; &lt;img src="thumbnail.jpg" alt="图片预览"&gt; ``` 这将启动Lytebox,并在点击链接时显示大图。 3. **HTML内容**:要加载...

    lightGallery图片画廊demo及插件

    `lightGallery` 的基本用法是将`data-lg-src`属性添加到每张图片元素上,用来指定全屏查看时的图片源。同时,可以使用`data-sub-html`来添加图片描述。例如: ```html &lt;a href="img1.jpg" data-lg-src="img1_full...

    基于jquery实用的灯箱效果fancybox

    在`lightbox`文件夹中,可能包含了Fancybox的示例图片和HTML代码,这些可以帮助开发者快速理解Fancybox的用法。通常,一个简单的图片灯箱效果可以这样实现: ```html &lt;a href="path/to/image.jpg" class="fancybox...

    jquery图片展示

    &lt;a href="images/image1.jpg" title="Image 1"&gt;&lt;img src="images/thumb1.jpg" alt="Image 1 Thumbnail"/&gt; &lt;a href="images/image2.jpg" title="Image 2"&gt;&lt;img src="images/thumb2.jpg" alt="Image 2 Thumbnail"/&gt; ...

    JQuery弹出窗口小插件ColorBox

    由于`jQuery ColorBox`基于jQuery,因此可以与其他jQuery插件无缝集成,如用于图片预览的`lightbox`插件或用于表单验证的`validate`插件。 ## 8. 示例代码 在`colorbox-master`压缩包中,通常会包含示例代码、样式...

    jquery弹出框特效

    &lt;a class="fancybox" href="image.jpg"&gt;&lt;img src="thumbnail.jpg" alt="Image Title"&gt; ``` - 初始化fancybox:在文档加载完成后,使用jQuery的`.fancybox()`方法初始化。 ```javascript $(document).ready(function...

    jquery jqzoom插件制作图片放大镜图片窗口放大显示

    &lt;img id="imgZoom" src="small-image.jpg" alt="产品图片" class="jqzoom" rel="gal1"&gt; &lt;a href="large-image.jpg" title="产品大图" style="display:none;"&gt; ``` 四、初始化jqZoom 在文档加载完成后,通过...

    使用JQuery FancyBox插件实现图片展示特效

    对于单张图片的展示,文章中展示了一个简单的用法,即通过给&lt;img&gt;标签的父级标签添加id属性,并通过FancyBox的方法调用,可以实现对单张图片的特效展示。此外,FancyBox还可以通过title属性来展示图片的标题信息,...

Global site tag (gtag.js) - Google Analytics