`
ol_beta
  • 浏览: 289401 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

jQuery插件shadowbox体验

阅读更多

以前用的图片展示用的是mootools的一个工具,感觉不错,不过mootools跟jquery有冲突,所以找了个jquery的插件,感觉还不错。

shadowbox支持图片,视频,html,frame,ajax还是很强大的。

根据官网demo,写了几个例子:

1.简单的图片展示

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<link rel="stylesheet" type="text/css" href="js/shadowbox-3.0.3/shadowbox.css" _href="js/shadowbox-3.0.3/shadowbox.css">
		<script type="text/javascript" src="js/jquery/jquery-1.4.2.js" _src="js/jquery/jquery-1.4.2.js"></:script>
		<script type="text/javascript" src="js/shadowbox-3.0.3/shadowbox.js" _src="js/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
//初始化	
Shadowbox.init({});
</script>
    </head>
    <body>
    	<!--rel="shadowbox" 关联shadowbox-->
		<a href="images/1.jpg" _href="images/1.jpg" rel="shadowbox">图片1</a>
		<a href="images/2.jpg" _href="images/2.jpg" rel="shadowbox">图片2</a>
		<a href="images/3.jpg" _href="images/3.jpg" rel="shadowbox">图片3</a>
		<a href="images/4.jpg" _href="images/4.jpg" rel="shadowbox">图片4</a>
		<a href="images/5.jpg" _href="images/5.jpg" rel="shadowbox">图片5</a>
    </body>
</html>
 

2.一些参数设置

3.图片组,幻灯片效果

4.视频(在线视频地址选择flv的地址,或者swf的)

5.混合,幻灯片效果,有图片,视频,html

还有就是ajax的,这个是高级功能,首先要了解shadowbox的函数,才能写出来

本人技术有限,等学好jQuery和ajax再研究。

总的来说还不错,够用了。

分享到:
评论

相关推荐

    jQuery弹出层插件大全

    5. **DOM window**: DOM window是由Cody Lindley开发的一个jQuery插件,用于创建浮动窗口或模态对话框。它提供了基本的窗口功能,如拖动、调整大小和关闭按钮。你可以通过官方网站获取源代码并查看演示来了解其工作...

    jquery 弹出层插件收藏

    本文将深入探讨jQuery弹出层插件,包括thickbox、colorbox、facebox、jqueryalert和shadowbox,这些都是用于创建美观、交互性强的弹出窗口的优秀工具。 首先,我们来看thickbox。Thickbox是一款基于jQuery的全屏弹...

    jquery弹出层插件

    其次,colorbox是另一个受欢迎的jQuery插件,它提供了更多的定制选项,如预加载图像指示器、内置的滑动导航和全屏模式。Colorbox支持各种类型的内容,如图片、iframe、inline HTML和Ajax。要使用colorbox,你需要在...

    10个最佳jQuery Lightbox效果插件收集

    在网页设计中,jQuery Lightbox效果插件是用于创建引人入胜的图像、视频和多媒体展示的重要工具。这些插件通常提供一个简洁且优雅的方式来显示全屏或弹出式的媒体内容,允许用户在不离开当前页面的情况下进行浏览。...

    30个最好的jQuery 灯箱插件分享

    jQuery Lightbox插件是网页开发中的重要工具,用于在用户点击缩略图后以弹出窗口的形式展示全尺寸图片或多媒体内容。这类插件通常具备响应式设计,能适应各种屏幕尺寸,提供良好的用户体验。以下是关于jQuery ...

    jquery灯箱特效

    为了快速方便地实现灯箱特效,许多开发者选择使用成熟的jQuery插件。以下是一些流行的jQuery灯箱插件: 1. **Fancybox**:功能强大,支持多种内容类型,如图片、视频、iframe等,自定义选项丰富。 2. **Colorbox**...

    50款非常棒的 jQuery 插件分享

    以上这些jQuery插件覆盖了网页设计和开发的多个方面,包括导航、动画、数据展示、社交媒体集成、用户交互等,它们都是提高网站质量、提升用户体验的有效工具。根据项目需求,合理选择和定制这些插件,可以打造出功能...

    shadowbox图片展示

    "Shadowbox图片展示"是一种流行的JavaScript插件,用于在网页上创建优雅的、全屏的媒体查看体验。这个工具借鉴了Lightbox的概念,允许用户在原网页上弹出一个浮动窗口来浏览图片、视频或其他多媒体内容,从而提供一...

    分享20款美化网站的 jQuery Lightbox 灯箱插件

    【jQuery Lightbox 灯箱插件概述】 jQuery Lightbox 插件是一种常见的网页开发工具,主要用于在网页上展示图片、视频和其他内容。通过使用这种插件,可以在一个模态窗口(即弹出窗口)中以优雅的方式呈现多媒体内容...

    30个最佳jQuery Lightbox效果插件分享

    jQuery Lightbox插件是网页设计中用于展示图片和多媒体内容的一种流行方式,它通常以弹出窗口的形式出现,提供了一种优雅且用户友好的浏览体验。以下是对这些插件及其功能的详细介绍: 1. **jQuery LightBox**:...

    Jquery ThickBox插件使用心得(不建议使用)

    JQuery ThickBox插件使用心得与替代方案 ThickBox是一个基于jquery的插件,它允许开发者在页面中创建弹出层,用于展示图片、多图片轮播以及其他HTML内容。尽管它一度被认为是一个实用的工具,但现在不被jquery官方...

    视频、图片灯箱式播放/幻灯片式播放,很好!很强大!

    许多前端框架和库,如jQuery和Bootstrap,都提供了实现这种效果的插件。 在标签中提到的"shadowbox"是具体实现这种效果的工具之一。Shadowbox.js是一个开源的JavaScript库,它可以处理多种类型的媒体,包括图片、...

Global site tag (gtag.js) - Google Analytics