一个用于图像、视频和文本的LightBox按钮
One LightBox button for Image, Video, and Text
我有一个图像、视频和文本
我想让Lightbox呈现各自的(图像、视频和文本)
单击图像、视频和文本时。
项目具有ID #prw-item-2
图像id = #imagePreview
<a id='imagePreview' class='fancybox' href='Penguins.jpg'
data-fancybox-group='gallery' title='Image01'><img src='Penguins.jpg'
alt='' height='180' width='310' style='margin: 5px'/></a>
图像id = #videoPreview
<iframe id='videoPreview' height='180' width='310'
src='http://www.youtube.com/embed/XGSy3_Czz8k'></iframe>
图像id = #textPreview
<textarea id='textPreview' class='form-control' rows='20'
maxlength='500'>500 limit</textarea>
jQuery,
我不确定,如何制作1个按钮,
在、项目ID和视频/图像/文本之间切换。
//LightBoxButtonPreview
var onClickCard = function(dst){
var t = dst.id; //(t = item-2)
var q = '#prw-' + t; //(q = prw-item-2)
//(???) #imagePreview, #videoPreview, #textPreview
灯箱按钮(??):
<a href="???" class="btn btn-default btn-primary fancybox"
data-fancybox-group="gallery" title="ImagePreviewBtn">
<span class="glyphicon glyphicon-eye-open"></span> PreviewButton</a>
任何帮助都将不胜感激。
可能是这样的:
$(document).on("click", "#preview-button", function(e) {
e.preventDefault();
var _whatShow = $("#what-show").val();
if (!_whatShow) return false;
switch(_whatShow) {
case 'image': _type ='inline'; _href='#imagePreview'; break;
case 'video': _type ='iframe'; _href=$('#videoPreview').attr('src'); break;
case 'text': _type ='inline'; _href='#textPreview'; break;
}
$.fancybox({
href: _href,
width: 730,
height: 530,
type: _type,
});
});
演示页面
相关文章:
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在响应视频上垂直居中文本
- 如何使用流播放器在视频中嵌入文本
- 如何检测和转换来自纯文本URL的URL图像和视频
- 如何在HTML5视频完成加载后使文本消失
- 视频库:单击文本,显示视频
- HTML5视频上方不可选择的文本
- 需要更改与视频相关的文本信息
- 使用Rails应用程序中的BigVideo.js插件,无法在视频背景前显示文本
- 使html视频文本音轨中的字幕越来越小
- cordova从文本区域上传带有值的视频
- 如何在背景视频上覆盖文本
- 我如何在像PayPal's这样的视频上添加文本
- 如何获得视频'html描述,而不是使用youtubeapiv3的纯文本
- 一个用于图像、视频和文本的LightBox按钮
- 从文本文件加载文件路径并将其输入为视频的源
- 显示视频中的文本跟踪.js 5.
- 如何从不同的媒体子集创建视频,如图像/文本等