한 라이트 박스 버튼 및 텍스트

Question

나는
때 이미지를

는 내가 라이트 박스가 각각 제시하고 싶은 이미지, 비디오 및 텍스트를 (이미지, 동영상, 텍스트) , 비디오 및 텍스트를 클릭합니다.

항목은 식별자를 갖고 #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를, 01,235
확실하지 않습니다, 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> 

. 어쩌면이 같은

Answer 1

:

하나 개의 버튼 (PreviewButton)와 함께 무엇을 보여 당신이 알고 어떻게

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