JQuery FancyBox предназначен для определения целевого идентификатора DIV?

Как мне получить поле Fancy для таргетинга определенного идентификатора DIV на странице и не запрашивать всю страницу в fancybox.? Этот мой код так платит

$(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();       

    });
    });

Не знаете, как это сделать, или если это возможно?

вот документ

Ответы

Ответ 1

Если вы хотите, чтобы fancybox открывал определенный div, вы просто используете следующие простые шаги:

Сначала вам нужна ссылка для подключения FancyBox к:

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

Обратите внимание на div id рядом с якорем.

Второй вам нужен div, который будет показан внутри 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>

И третий очень простой javascript, чтобы связать все это вместе

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

Ответ 2

Вам просто нужен этот селектор:

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

идентификатор селектора (поскольку идентификаторы должны быть уникальными) просто #IDGoesHere

Я думаю, что вы после этого загружаете контент в некоторый fancybox, если вы хотите загрузить say <div id="content"></div> со страницы, на которую указывает href, вы сделаете это, используя .load():

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

.load() имеет возможность для url selector, которая загружает только часть целевой страницы.