Jquery Dynamic boîte de fantaisie

Question

Chargement de fancybox à partir de Jquery comment puis-je récupérer le contenu d'un ID div sur une page et non la page entière. Ceci est mon code pour prix qui me fait la page entière:

L'index (ce lien à la vue du spectacle de styel):

<div class="style_image"> <%=link_to (image_tag style.cover.pic.url(:normal)), style %></div> 

La vue du spectacle (je veux apparaître dans le fancybox):

<div id="show_style"> 

    ALL THE CONTENT! 

</div> 

application.js:

$(function() { 

$(".style_image a").live('click', function(event) { 

    $(".style_image a").fancybox(); 
    return false;  

}); 
}); 

J'ai aussi essayé ce qui suit sans succès:

$(function() { 

$(".style_image a").live('click', function(event) { 

    $(".style_image a" + "#show_style").fancybox(); 
    return false;  

}); 
}); 

Je ne sais pas comment cela se fait comme il y a peu d'informations sur le fancy box docs. Je souhaite que cela soit fait dynamiquement pas en ligne.

Answer 1

Je ne suis pas sûr que je sais ce que vous voulez dire, mais si vous voulez appeler fancybox() sur tout l'élément cliqué essayez ceci:

$(function() { 

$(".style_image a").live('click', function(event) { 

    $('this').fancybox(); 
    return false;  

}); 
}); 

Answer 2

Ok, basé sur de l'information nouvelle que vous avez fourni I Croyez ce que vous essayez de faire est de prendre tout le contenu de l'intérieur de l'élément show_style et le mettre dans la fancybox. Voici le javascript.

$(function() { 
    $("a#linkEle").fancybox({ 
     'hideOnContentClick': true 
    }); 
}); 

Et votre code html pointera vers le contenu intérieur de l'élément show_style

<a id="linkEle" href="#show_style"></a> 
<div style="display:none"><div id="show_style">ALL CONTENT TO BE SHOWN</div></div> 

Voyez comment les points d'ancrage href à la div avec un id de show_style. Si vous essayez d'obtenir tout le contenu à l'intérieur de show_style et le mettre dans la boîte de fantaisie, je crois que c'est ainsi que vous le feriez.

Metropolis

Answer 3

Selon le Fancybox documentation, vous voulez que votre tag <a> avoir #show_style comme élément href.

<div class="style_image"><a href="#show_style">Click here to show fancybox</a></div> 

Ensuite, votre premier code devrait fonctionner:

$(function() { 

$(".style_image a").live('click', function(event) { 

    $(".style_image a").fancybox(); 
    return false;  

}); 
}); 

Answer 4

J'ai ce problème aussi.

maintenant il a été résolu.

voici la réponse:

function view(url){ 

    $.fancybox(
      url, 
      { 
       type: 'iframe', 
       width   : '35%', 
       height   : '50%', 
       showCloseButton: true, 
       opacity: true, 
       overlayOpacity: 0, 
       transitionIn: 'none', 
       transitionOut: 'none', 
       enableEscapeButton: true 
      } 
    ); 
} 




<a onclick="view('ViewFacility?rid=2');return false;" >click</a>