VenoBox

只是一个响应jQuerylightbox插件,适用于图像、内联内容iFrames,谷歌地图,Ajax请求,Vimeo和YouTube视频。

最大的区别与其他模式窗口插件VenoBox计算最大宽度的图像显示和保存它的高度如果比窗户高
(所以在小型设备可以向下滚动内容,避免垂直显微图像大小)。

例子

图片库(与键盘箭头导航的可能性)

图片:Basik,TomoZ,Burla2222

各种链接

iFrame 克地图 Vimeo YouTube Ajax 内联

使用

包括VenoBoxcss和javascript jQuery库

< ! ——添加jQuery库——>< script type = " text / javascript " src = " http://code.jquery.com/jquery-latest.min.js " > < /脚本>< ! ——添加venobox - - >< link rel = "样式表" href = " venobox / venobox。 css " type = " text / css "媒体= "屏幕" / >< script type = " text / javascript " src = " venobox / venobox.min.js " > < /脚本>

插入一个或多个链接自定义类

< class = " venobox " href = " image01-big。 > < img src = " image01-small jpg”。 jpg图像alt“alt = / > < / >

<类=“venobox_custom”数据类型= " iframe " href = " http://www.veno.es " >打开iframe < / >

谷歌地图使用iFrame href属性图的嵌入代码和设置data-type="iframe"

对于视频用视频的简单的url,比如:http://www.vimeo.com/your_video_id,或http://www.youtu.be/your_video_id

对于内联内容设置一个隐藏的元素定义id,并称之为href链接

初始化插件

$(文档)时函数(){* / / *默认设置$(' .venobox ').venobox();/ * * /自定义设置$(' .venobox_custom ').venobox({framewidth:400 px,/ /默认:“frameheight:300 px,/ /默认:“边界:10 px,/ /默认值:' 0 '背景:“# 5 dff5e ',/ /默认值:# fff”titleattr:data-title,/ /默认:“标题”numeratio:真的,/ /默认:假的infinigall:真/ /默认值:false});/ * # firstlink窗口显示在页面加载* /$(" # firstlink ").venobox().trigger(“点击”);});

数据属性

如果内容没有一个图像,你必须指定其类型通过数据属性data-type

可用值:iframe inline ajax youtube vimeo

<类=“venobox”数据类型= " iframe " href = " http://www.veno.es " >打开iframe < / ><类=“venobox”数据类型=“内联”title =“我的描述”href = " #嵌入式" >打开内联内容< / ><类=“venobox”数据类型=“ajax”href = " - call。 php " >检索数据通过Ajax < / ><类=“venobox”数据类型= " youtube " href = " http://youtu。 / d85gkOXeXG4”> Open YouYbe视频< / ><类=“venobox”数据类型= " vimeo " href = " http://vimeo.com/75976293 " >打开vimeo视频< / >

可选:设置title属性来显示一个描述

画廊

激活导航之间的所有类型的内容分配相同的数据属性data-gall每个链接,像下面的例子

< class = " venobox " data-gall = " myGallery " href = " image01-big。 > < img src = " image01-small jpg”。 jpg " / > < / >< class = " venobox " data-gall = " myGallery " href = " image02-big。 > < img src = " image02-small jpg”。 jpg " / > < / >< class = " venobox " data-gall = " myGallery " href = " image03-big。 > < img src = " image03-small jpg”。 jpg " / > < / >

选项

自定义通过JavaScript弹出窗口

infinigall:无限的画廊,从去年第一项,反之亦然——默认值:false

numeratio:显示导航条目和总数量在目前的画廊——默认值:false

border:弹出窗口的边框厚度像素——默认值:'0px'

bgcolor:弹出窗口的背景颜色(也影响边框颜色,如果有一个边界),默认值:'#ffffff'

framewidth:你可以设置一个静态窗口宽度,否则插件将保持响应的大小设置.venoframe类

frameheight:你可以设置一个静态窗口高度,否则插件将保持响应的大小设置.venoframe类

titleattr:特定的属性来显示一个标题(如。 “data-title”),默认值:'title'

新:自定义颜色叠加

例子:
颜色1 颜色2 颜色3 颜色4

只是添加一个data-overlay你链接的价值动态背景

<类= data-overlay =“venobox rgba(95164255,0.8) " href = "…" > < / >< class = " venobox " data-overlay = " # ca294b " href = "…" >…< / >

你也可以添加一个data-css添加一个自定义类.vbox-overlay

< class = " venobox " data-css = " custom-overlay " href = "…" >…< / >

注意:(不要使用这一静态定义的背景。简单地修改默认.vbox-overlay内部venobox.css)

下载

下载VenoBox 1.5

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。