Javascript 一个用于图像、视频和文本的灯箱按钮

我有图像、视频和文本

我想在灯箱中放置一个相应的（图像、视频和文本）
单击图像、视频和文本时

这些项目有一个ID

#prw-item-2

图像

id=#图像预览

<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>

<iframe id='videoPreview' height='180' width='310' 
src='http://www.youtube.com/embed/XGSy3_Czz8k'></iframe>

<textarea id='textPreview' class='form-control' rows='20' 
maxlength='500'>500 limit</textarea>

图像

id=#文本预览

<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>

<iframe id='videoPreview' height='180' width='310' 
src='http://www.youtube.com/embed/XGSy3_Czz8k'></iframe>

<textarea id='textPreview' class='form-control' rows='20' 
maxlength='500'>500 limit</textarea>

灯箱按钮（？？？）：

任何帮助都将不胜感激。

可能是这样：

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

---

您如何知道一个按钮（预览按钮）显示的内容？或者在需要选择之前？我有一个项目列表，这些项目是图像、视频或文本，但只有一个灯箱按钮。这正是我试图实现的！谢谢