Jquery FancyBox ID DIV specifico per target?

Question

Come posso ottenere la casella Fantasia per indirizzare un ID DIV specifico su una pagina e non richiedere l'intera pagina nella fancybox.? Questo il mio codice in modo cavano

$(function() { 

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

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

}); 
}); 

Questo non funziona?

Originariamente ho provato quanto segue:

$(function() { 

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

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

    }); 
    }); 

Non so come questo fatto, o se è ancora possibile?

here are the doc's

Answer 1

Hai solo bisogno di questo selettore:

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

Il ID selector (dal momento che gli ID devono essere unici) è solo #IDGoesHere

Io penso quello che cercate è caricando il contenuto in alcune fancybox, se vuoi caricare dire <div id="content"></div> dalla pagina a cui punta l'href, devi farlo usando .load():

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

.load() ha un'opzione per url selector che carica solo una parte della pagina di destinazione.

Answer 2

Se si desidera fancybox per aprire un certo div basta usare i seguenti semplici passi:

primo luogo è necessario un collegamento ad agganciare Fancybox a:

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

Annotare il div id accanto l'ancora.

In secondo luogo è necessario un div che verrà mostrato all'interno della 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> 

E in terzo luogo alcuni molto semplice javascript per collegare tutto insieme

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