web-dev-qa-db-ja.com

JqueryFancyBoxは特定のDIVIDをターゲットにしますか？

ファンシーボックスで特定のDIVIDをターゲットにし、ファンシーボックスのページ全体をリクエストしないようにするにはどうすればよいですか？これは私のコードです

$(function() {

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

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

});
});

これは機能しませんか？

私はもともと次のことを試しました：

 $(function() {

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

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

    });
    });

これがどのように行われたのか、あるいはそれが可能かどうかさえわかりませんか？

ここにドキュメントがあります

jqueryfancybox
12
MrThomas

Fancyboxで特定のdivを開きたい場合は、次の簡単な手順を使用するだけです。

まず、FancyBoxをフックするためのリンクが必要です。

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

アンカーの横にあるdiv idに注意してください。

次に、FancyBox内に表示されるdivが必要です。

<!-- 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>

そして3番目にそれをすべて一緒にフックするためのいくつかの非常に簡単なJavaScript

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

必要なのは次のセレクターだけです。

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

IDセレクター （IDは一意である必要があるため）は_#IDGoesHere_です

私はthinkあなたが求めているのは、いくつかのファンシーボックスにコンテンツをロードすることです。ページから_<div id="content"></div>_をロードしたい場合は、hrefポイントに、 .load() を使用してこれを行います：

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

.load()には、宛先ページの一部のみをロードする_url selector_のオプションがあります。

7
Nick Craver