Jquery FancyBox cible ID DIV spécifique?

Question

Comment puis-je obtenir une boîte de fantaisie pour cibler un DIV ID spécifique sur une page et ne pas demander la page entière dans la fancybox.? Ce mon code ainsi le prix

$(function() { 

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

    $(".style_image a").find("#show_style").fancybox();  

}); 
}); 

Cela ne fonctionne pas?

Je l'origine essayé ce qui suit:

$(function() { 

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

     $(this.href + " #show_style").fancybox();  

    }); 
    }); 

Je ne sais pas comment cela fait, ou s'il est encore possible?

here are the doc's

Answer 1

Vous avez juste besoin ce sélecteur:

$("#show_style").fancybox(); 

Le ID selector (puisque les ID doivent être uniques) est juste #IDGoesHere

Je pense ce que vous êtes après le chargement Si vous voulez charger <div id="content"></div> depuis la page vers laquelle pointe le href, faites-le en utilisant .load():

$(".style_image a").on('click', function(event) { 
    $('#show_style').load(this.href + " #content").fancybox();  
}); 

.load() a une option pour url selector qui charge seulement une partie de la page de destination.

Answer 2

Si vous voulez fancybox d'ouvrir un certain div vous utilisez simplement les étapes simples suivantes:

vous devez d'abord un lien pour accrocher FancyBox à:

<a href="#myDivID" id="fancyBoxLink">Click me to show this awesome div</a> 

Notez le div id à côté l'ancre.

Deuxièmement, vous avez besoin d'un div qui sera affiché à l'intérieur du FancyBox:

<!-- Wrap it inside a hidden div so it won't show on load --> 
<div style="display:none"> 
    <div id="myDivID"> 
     <span>Hey this is what is shown inside fancybox.</span> 
     <span>Apparently I can show all kinds of stuff here!</span> 
     <img src="../images/unicorn.png" alt="" /> 
     <input type="text" value="Add some text here" /> 
    </div> 
</div> 

Et troisième javascript très facile à accrocher tous ensemble

<script type="text/javascript"> 
    $("a#fancyBoxLink").fancybox({ 
     'href' : '#myDivID', 
     'titleShow' : false, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic' 
    }); 
</script>