先看看效果~~
原理:利用Fancybox弹出一个flash,这个flash正是JWPlayer,给JWPlayer设置播放视频的参数,进行播放.
很简单吧..代码也不多.看看就知道了.
<a href="${base}/mediaplayer/player.swf?file=${base}/${online.video}&autostart=true" class="online_video_a"><img
class="cursor_pointer online_video" src="${base}/outlook/player.png" alt="播放视频"
width="100" height="75" /></a>
有一个a标记,设置class为online_video_a备用.href为JWPlayer播放器地址.并在播放器后面加入视频地址.设置自动播放.a内是图片还是文字,就看你自己了.
$('a.online_video_a').fancybox({
'type' : 'swf',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
获得所有class为online_video_a的元素进行迭代,设置fancybox属性type:swf
万事俱备,刷新页面看看吧~~效果还不错..稍加美化应该能搞好.
- 大小: 191.3 KB
分享到:
相关推荐
fullCalendar+fancybox+struts2实现的日程安排效果。 前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排...
jquery+fancybox图片切换特效, ${path}/js/fancybox/css/global.css" rel="stylesheet" type="text/css"> ${path}/js/fancybox/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"> ${path}/js/...
jQuery插件FancyBox就是这样一款强大的工具,它能够帮助开发者轻松地创建出美观且功能丰富的弹窗效果,包括视频展示。本文将详细介绍如何使用FancyBox实现弹窗视频的功能。 首先,我们需要了解jQuery和FancyBox的...
这段代码将使所有带有`fancybox`类的链接使用Fancybox弹出图片。 ### 2. 多媒体支持 Fancybox不仅支持图片,还能展示HTML内容、iFrame、YouTube 视频等。例如,若要弹出一个包含HTML内容的弹出层,可以这样做: `...
Fancybox v1.3.4 是一款基于 jQuery 的流行轻量级弹出窗口插件,专用于创建引人入胜的图像、视频和其他媒体展示。这个版本发布于2011年,虽然现在可能已有更新版本,但在当时,它是许多网站进行富媒体展示的首选工具...
1. **响应式设计**:Fancybox适应不同设备的屏幕尺寸,无论是在桌面还是移动设备上都能呈现出良好的视觉效果。 2. **交互性**:用户可以通过键盘导航、触摸滑动等交互方式来浏览内容,提高用户体验。 3. **自定义...
《jQuery弹出层插件FancyBox:图片与文章的精彩呈现》 在网页设计中,弹出层(Modal)是一种常见的交互元素,用于显示详细信息或者进行特定操作,而jQuery作为JavaScript的一个强大库,提供了丰富的插件来实现这一...
Fancybox是一款基于jQuery的轻量级插件,用于创建优雅且功能丰富的弹出层效果。它主要用于展示图像、HTML内容、视频以及通过Ajax加载的远程内容。在网页设计和开发中,Fancybox提供了用户友好的界面,使得内容的展示...
在这个实例中,我们将探讨如何将ASP.NET与fancybox结合,实现弹出页面的效果。 fancybox是一款流行的JavaScript库,主要用于创建轻量级的弹出窗口,通常用于展示图片、HTML内容或IFrame。它提供了美观的过渡效果和...
《jQuery Fancybox 1.3.4:图片弹出大图技术详解》 在Web开发领域,优雅地展示图片是一项常见的需求。jQuery Fancybox插件以其简洁的API和丰富的自定义选项,成为开发者们实现图片弹出大图效果的首选工具之一。本文...
FancyBox是一款基于 jquery 开发的类 Lightbox 插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该 lightbox 除了能够展示图片之外,还可以展示 iframed 内容,通过 css 实现自定义外观
Fancybox是一款流行的JavaScript轻量级图像查看器,常用于网页中的图片展示,提供美观的弹出窗口效果,支持图片轮转、缩放、导航等多种功能。这个“fancybox.js 图片显示”主题主要涵盖以下几个核心知识点: 1. **...
jQuery Fancybox 无刷新放大图片的一个小插件,这种效果多见于一些网页相册中,看上去比较不错的效果,小图片点击后显示大图片,大图片右上角可关闭,这里使用的是一个有名的jquery插件:jquery.fancybox.js这个插件...
通过解压并研究这些文件,你可以更深入地了解Fancybox的使用和配置,以便在实际项目中灵活运用这个强大的弹出层工具。 总之,Fancybox是创建弹出层效果的理想选择,无论是简单的图片展示还是复杂的多媒体内容,它都...
2. **标记内容**:使用特定的class或者data属性标记需要弹出的元素,如`<a class="fancybox" href="image.jpg">Click me</a>`。 3. **初始化插件**:在jQuery的$(document).ready()函数中调用`.fancybox()`方法,...
**前端项目 - fancybox** ...总之,fancybox 作为一个强大的前端工具,能帮助开发者轻松创建出优雅、实用的弹出窗口,提升网站的整体质量和用户体验。在实际开发中,只需合理配置和定制,就能将其潜力充分发挥出来。
3. **设置HTML结构**:为要展示的图片或内容添加特定的HTML标记,Fancybox会识别这些标记来启动弹出窗口。 4. **初始化Fancybox**:在页面加载完成后,使用JavaScript调用Fancybox函数来初始化插件,指定要处理的...
fancyBox提供了多个可选插件,如`fancybox-buttons`用于添加按钮式导航,`fancybox-thumbs`用于显示缩略图导航,以及`fancybox-media`用于处理多媒体内容。在使用这些插件时,需要额外引入对应的CSS和JavaScript...
jQuery Fancybox 是一款广泛使用的JavaScript 图片和媒体展示插件,特别适用于网页上的图像展示。它以其简洁的API、丰富的自定义选项以及优雅的用户体验而受到开发者的青睐。在本文中,我们将深入探讨Fancybox 1.2.6...