`
Richard.wei
  • 浏览: 23989 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

用jqueyr插件做的一个不图片类子 jquery-lightbox-0.5

    博客分类:
  • web
阅读更多
这两天在网上看了那个图片效果,觉得挺帅的,就照着做了,有很多图片的插件,我选择的是这个:jquery-lightbox-0.5,觉得还挺好的,其实看到例子,你就知道应该会怎么做了,
挺简单的一个,只要把JS所及相关的CSS放到工程下面,就可以了...

核心代码就是这个:

<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

一定要放到UL--LI中,不然好像没效果,我今天试的
分享到:
评论

相关推荐

    jquery-lightbox-0.5

    "jQuery-lightbox-0.5" 是一个基于JavaScript库jQuery的轻量级图片灯箱插件,主要用于在网页上展示图片,提供优雅的过渡效果和简单的用户交互。这个压缩包包含的是该插件的源代码和其他相关资源,适用于网页设计师和...

    jquery-lightbox-0.5 仿腾讯空间相册 弹出层显示原始图片

    jQuery Lightbox 0.5 是基于流行的JavaScript库jQuery开发的一款图片查看器插件。它的核心功能是当用户点击一个包含图片链接的缩略图时,会在当前页面上弹出一个透明的遮罩层,展示原图,同时提供导航按钮以便用户...

    jquery-lightbox-0.5 图片查看特效代码

    &lt;link rel="stylesheet" href="jquery.lightbox-0.5.css"&gt; 载入 JavaScript 文件 &lt;script src="jquery.js"&gt;&lt;/script&gt; &lt;script src="jquery.lightbox-0.5.js"&gt;&lt;/script&gt; DOM 结构 &lt;div id="element_id"&gt; 文字说明...

    jquery-lightbox

    《jQuery Lightbox:一款强大的图片弹出框插件》 jQuery Lightbox是一款广泛使用的JavaScript库,专门用于在网页上创建优雅的、响应式的图片和媒体查看器。它以轻量级、可定制和用户友好而著称,是网页设计师和...

    jquery.lightbox-0.5 修正版

    此版本为jquery.lightbox-0.5修正版,解决图片源文件太大,占满屏幕问题。 使用方法,参数定义与原版相同

    jQuery Lightbox Plugin--缩图查看插件,图片查看器

    jQuery Lightbox Plugin就是这样一款专为网页图片展示而设计的插件,它基于流行的JavaScript库jQuery,实现了轻量级、优雅的图片查看器功能,使用户可以在不离开当前页面的情况下,享受全屏浏览大图的体验。...

    Jquery-lightbox

    **jQuery Lightbox** 是一个基于JavaScript库jQuery的轻量级弹出图像查看器插件,它使得在网页上展示图片和多媒体内容变得简单且优雅。Lightbox效果在用户点击一个链接后,会在当前页面上创建一个半透明的背景层,并...

    jQuery的lightbox插件

    Lightbox插件的核心是jQuery库,这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互等任务。通过jQuery,开发者可以轻松实现复杂的交互效果,而无需编写大量的JavaScript代码。 在提供的...

    jquery.lightbox.js遮罩层图片幻灯片自适应图片

    jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片

    ekko-lightbox | 基于Bootstrap3的lightBox图片画廊插件

    ekko-lightbox.js是一款基于Bootstrap3的jQuery lightBox图片画廊插件。该lightBox插件基于Bootstrap的模态窗口插件来制作,可以显示图片,HTML内容,视频等,也可以远程加载内容。

    Lightbox插件(图片大小调节)

    Lightbox插件是一种广泛应用于网页设计中的图片展示工具,它允许用户在点击缩略图后,在当前页面上弹出一个半透明的黑色背景层,中间显示全尺寸的图片。这种设计既保持了网页的整洁性,又提供了良好的用户体验,使得...

    jQuery图片预览插件

    例如,jQuery lightbox插件就是这样的工具,它能够创建一个带导航按钮的画廊,用户可以通过点击按钮或者滑动鼠标在多张图片间切换。 特别地,当数据源是JSON格式时,图片预览插件需要解析JSON数据,并动态生成预览...

    前端项目-nivo-lightbox.zip

    Nivo Lightbox不仅限于基本的图片展示,还可以与其他jQuery插件或库结合使用,例如搭配Isotope进行网格布局,或者与Ajax技术一起实现无刷新内容加载,提升用户体验。 总之,Nivo Lightbox是一个强大且易于使用的...

    javascript经典特效---jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载.rar

    jQuery UI.ariaLightbox是一款基于jQuery的插件,它模仿了经典的Lightbox效果,提供了易于使用的API和良好的可访问性。 首先,让我们了解jQuery UI.ariaLightbox的核心功能。这款插件能够检测网页中的图片链接,当...

    jquery灯箱插件Lightbox

    jQuery Lightbox是一款广泛使用的JavaScript插件,专为网页上的图片展示设计,它能够在用户点击图片链接时,弹出一个半透明的遮罩层,上面显示大图,提供了一种优雅的方式来展示网页中的图片。这款插件自发布以来,...

    jQuery实现的简单带有关闭按钮的lightbox高亮图片展示效果

    "jQuery实现的简单带有关闭按钮的lightbox高亮图片展示效果"这个项目是利用jQuery这一流行的JavaScript库来创建一个具有基本功能的Lightbox效果,包括显示高亮的图片以及添加一个关闭按钮,使得用户体验更加友好。...

    javascript经典特效---jquery实现LightBox图片点击放大效果的图片盒子插件.rar

    本教程将深入探讨如何使用jQuery实现LightBox图片点击放大效果的图片盒子插件,这是一种常见的网页图像展示技术,能够让用户在不离开当前页面的情况下查看大图。 LightBox效果的基本原理是:当用户点击缩略图时,大...

    sexy-lightbox-2.3_jQuery

    Sexy Lightbox 2.3是一款基于jQuery库的轻量级图片弹出插件,它旨在为网页中的图像提供优雅、简洁的展示方式,使得用户在点击图片链接后,能够在一个全屏的、具有阴影效果的蒙版中查看大图,提升用户体验。这款插件...

    jQuery响应式LightBox插件.zip

    jQuery响应式LightBox插件是一种广泛应用于网页设计中的JavaScript组件,它主要用于创建具有现代感的、响应式的图片查看器。这个插件利用了jQuery库的强大功能,为用户提供了一种优雅的方式来展示图片,尤其是在...

    jquery lightbox (图片效果)

    总的来说,jQuery Lightbox是一个简单易用的工具,能够快速地为网站添加专业级别的图片展示功能。通过其强大的定制能力和对各种浏览器的良好支持,使得它在Web开发中备受青睐。无论你是初学者还是经验丰富的开发者,...

Global site tag (gtag.js) - Google Analytics