Fancybox берет 2 клика, чтобы открыть динамически загружаемый контент - PullRequest
Новая
       6

Fancybox берет 2 клика, чтобы открыть динамически загружаемый контент

0 голосов
/ 14 ноября 2011

Используя JQuery, я загружаю div с внешней HTML-страницы в fancybox и строю ссылку, используя переменные.Это займет два клика, чтобы открыть его.Первый, я полагаю, только инициирует это.Но я не знаю, как это исправить.Есть ли лучший способ сделать это?

HTML здесь: 

<a class="BannerVideoAwesome fancybox" id="series900" border="0"   href="/mkting/Videos/Speakers.html"><img src="/images/titles/CM/series-speakers-video.jpg" border="0"  align="left" /></a>

JQuery здесь: 

$('a.BannerVideoAwesome').live('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var grabVid = '#' + $(this).attr('id');
    vidObject = url + grabVid;
    var vidContents = vidObject.html();
    alert(vidContents);
    $.fancybox({
            //'href': url,
            'content':'vidContents'
                     });

Большое спасибо заранее за любую помощь, которую кто-то может мне оказать.Я боролся с этим в течение нескольких дней.

Ответы [ 3 ]

3 голосов
/ 17 ноября 2011

Попробуйте изменить с события click на mouseover . 

$('a.BannerVideoAwesome').live('mouseover', function(e){
...
0 голосов
/ 22 сентября 2012 
$('a.BannerVideoAwesome').live('click', function (event) {
    $.fancybox(this,{
        'autoDimensions': true,
        'autoScale': true,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'padding': 0
    });
    event.preventDefault();
});
0 голосов
/ 20 ноября 2011

Я думаю, что название вашего поста немного вводит в заблуждение.В любом случае, если я правильно понял, вы просто хотите загрузить частичный контент (DIV) из внешнего html-файла в fancybox.В вашем примере файл episodeSpeakers.html содержит DIV с ID = 'series900' 

<div id="series900">selected content</div>

Если приведенное выше верно, вам не нужно использовать jQuery live (), но привязывать fancybox кщелчок () и использование ajax и dataFilter для выбора содержимого.

С тем же html этот скрипт должен выполнить трюк: 

$("a.BannerVideoAwesome").click(function() {
var grabVid = "#"+$(this).attr('id');
$.fancybox(this,{
 'type': 'ajax',
 'ajax': {
   dataFilter: function(data) {
   var vidContents = $(data); 
   vidContents = $(grabVid, vidContents); 
   return(vidContents); 
  } // datafilter
 } // ajax
}); // fancybox
return false;
}); //click

или вы можете использовать 

$("a.BannerVideoAwesome").click(function(event) {
event.preventDefault();
.
.

вместо 

return false;

ВАЖНО : из-за некоторых кросс-браузерных проблем не используйте вышеуказанное решение dataFilter.Было бы лучше использовать встроенный метод fancybox, добавив частичное содержимое (из внешнего html-файла) в скрытый DIV внутри вашего вызывающего html-документа, а затем переместите его оттуда в fancybox.Требуется (конечно) добавить такой DIV.Например: 

<div style="display: none;">
 <div id="fancyContent"></div>
</div>

Затем используйте этот скрипт: 

$("a.BannerVideoAwesome").click(function() {
var grabVid = "#"+$(this).attr('id');
$.ajax({
 type: "GET", // default
 dataType: "html",      
 cache: false,                      
 url: this.href,
 success: function (data) {
  $("#fancyContent").html(grabVid ? $("<div>").append(data).find(grabVid) : data);
  $.fancybox({
   'href': "#fancyContent",
   'onCleanup': function() {
     var fancyContent = this.href;
     $(fancyContent).unwrap().empty();
   } // onCleanup 
  }); // fancybox
 } // success
}); //ajax
return false;
}); //click

, который работает в большинстве браузеров.Кстати, опция onCleanup исправляет эту ошибку

...