Question

我有图像，视频和文字

我想让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

LightBox按钮（???）：

<a href="???" class="btn btn-default btn-primary fancybox" 
data-fancybox-group="gallery" title="ImagePreviewBtn">
<span class="glyphicon glyphicon-eye-open"></span> PreviewButton</a>

任何帮助将不胜感激。

Answer 1

也许是这样的：

$(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,
    }); 
});

<强> Demo page

图像，视频和文本的一个LightBox按钮

1 个答案: