Déclenchement de FancyBox à partir d'un DIV onclick();

Question

Cette question semble avoir été beaucoup posée, mais je n'ai pas vu de réponse qui fonctionne.

j'ai donc une div qui fonctionne comme ceci:

<div onclick="location.href='http://www.abc123.com';" class="menuitem"> 
</div> 

Maintenant je dois le lien (spécifié dans location.href) pour ouvrir dans un fancybox iframe.

J'aimerais utiliser un Un élément mais cette Div détient d'autres éléments, donc je ne pense pas que je peux.

Je suis ouvert à toutes les suggestions ... même en utilisant des éléments autres que les divs, ou en utilisant une lightbox jquery iframe différente.

Merci

Tim Mohr

Answer 1

a) vous pouvez mettre d'autres éléments à l'intérieur d'une étiquette, il fonctionne, mais il est unsemantic.

b)

1. mettre votre iframe dans un div caché (ou ajax dans le clic)
2. le faire $ ('menuitem'). Cliquez sur (hiddendiv.fancyb ...() .show())

Personnellement, je serais toujours éviter d'utiliser onclick = « » il est beaucoup plus facile de maintenir votre code dans un fichier js externe

Answer 2

je faisais la même chose et je voulais appeler fancybox dynamiquement aussi Je sais que ce pourrait ne pas être idéal, mais ce que je ne (je l'utilise jquery BTW):

JS:

jQuery(document).ready(function($){ 
    $(".fancybox").fancybox(); 
    $("form").submit(function(){ 
     $(".fancybox").trigger("click"); 
     return false; 
    }); 
}); 

HTML:

<a href="#div_id" class="fancybox"></a> 
<div style="display:none;"> 
    <div id="div_id"> 
     This will show up in my fancybox 
    </div> 
</div> 

il est un moyen plus rapide plus facile; J'ai trouvé, j'espère que ça aide quelqu'un! codage heureux!

Answer 3

Ceci montre comment utiliser fancybox sans nécessiter l'élément de lien <a href>.

en ligne (1.3.4):

<div id="menuitem" class="menuitem"></div> 

<div style="display:none;"> 
    <div id="dialogContent"> 
    </div> 
</div> 

$('#menuitem').click(function() { 
    $.fancybox({ 
     'type': 'inline', 
     'content': '#dialogContent' 
    }); 
}); 

en ligne (2.1.5):

<div id="menuitem" class="menuitem"></div> 

<div style="display:none;"> 
    <div id="dialogContent"> 
    </div> 
</div> 

$('#menuitem').click(function() { 
    $.fancybox({ 
     'type': 'inline', 
     'href': '#dialogContent' 
    }); 
}); 

Iframe:

<div id="menuitem" class="menuitem"></div> 

$('#menuitem').click(function() { 
    $.fancybox({ 
     type: 'iframe', 
     href: 'http://www.abc123.com' 
    }); 
});