Как отключить FancyBox на определенных изображениях - PullRequest
0 голосов
/ 19 марта 2011

Может ли кто-нибудь помочь мне отключить FancyBox на определенных изображениях? Я пробовал миллион различных вариантов здесь, но не достиг большого прогресса. Изображения, над которыми я работаю, находятся в баннере WowSlider здесь: http://www.freemanfoxx.com. Проблема, как вы увидите, заключается в том, что некоторые изображения не имеют href-местоположения, и при щелчке по ним появляется окно загрузки ошибки. Если бы мы могли либо динамически изменить класс, либо сделать что-то еще, чтобы остановить загрузку fancybox, это было бы чудом.

Спасибо !!!!

Изображения загружаются динамически через PHP:

if (empty($descr)){
echo "<a href='#'>";}

else {
echo "<a rel=group1 href=";
    echo $descr;
    echo " target=_blank>"; }
?><img src="<?php echo $wpimage[0]; ?>" width="<?php echo $wpimage[1]; ?>" height="<?php echo $wpimage[2]; ?>" alt="" title="" id="wows<?php echo $image->ID; ?>">
<?php
if (empty($descr)){
echo "</a>";}

else {
echo "</a>";}

FancyBox Нагрузки основаны на:

    $("a.wow-fancy").fancybox({
    'hideOnContentClick': true,
    'width': 895,
    'height': 600,
    'type': 'iframe'
}); 

Класс "cs-wowslider-images-new" добавлен к изображениям через javascript через этот файл: http://freemanfoxxrealty.com/wp-content/themes/freemanfoxx/js/2wows-squares.js


UPDATE

Я думаю, что мог бы добиться этого, динамически удаляя класс, но, похоже, он не работает ... какие-нибудь мысли?

    if(("a.wow-fancy").attr('href') = "#"){
    $(this).removeClass("wow-fancy");
    alert('hi');
}

Ответы [ 3 ]

1 голос
/ 19 марта 2011

Один из вариантов:

Измените PHP, чтобы вообще не включать тег href, если $descr пуст (если это работает для вас).Тогда:

$('a[href].cs-wowslider-images-new').fancybox({...

Вроде как: http://jsfiddle.net/q9Tpd/

1 голос
/ 19 марта 2011

Если вы можете редактировать HTML, вы всегда можете добавить имя класса к изображениям, на которых вы не хотите использовать fancybox, и использовать селектор:

    $("a.cs-wowslider-images-new:not('.noFancyBoxOnThisClassName')").fancybox({
    'hideOnContentClick': true,
    'width': 895,
    'height': 600,
    'type': 'iframe'
});

<ч /> Отредактировано в ответ на вопрос, отредактированный OP.

Чтобы проверить, является ли href просто '#', и, если это так, удалите класс wow-fancy:

$('a.wow-fancy').each(
    function(){
        if (this.href == '#') {
            $(this).removeClass('wow-fancy');
        }
    });
0 голосов
/ 27 апреля 2018

В моем состоянии:

$('.content img')
  .not('[hidden]')
  .not('.group-picture img, .post-gallery img')
  .not('.no-fancybox')
  .each(function () {
    var $image = $(this);
    var imageTitle = $image.attr('title');
    var $imageWrapLink = $image.parent('a');

    if ($imageWrapLink.size() < 1) {
        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');
      $imageWrapLink = $image.wrap('<a href="' + imageLink + '"></a>').parent('a');
    }

    $imageWrapLink.addClass('fancybox fancybox.image');
    $imageWrapLink.attr('rel', 'group');

    if (imageTitle) {
      $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');

      //make sure img title tag will show correctly in fancybox
      $imageWrapLink.attr('title', imageTitle);
    }
  });

$('.fancybox').fancybox({
  helpers: {
    overlay: {
      locked: false
    }
  }
});

Просто добавьте это .not('.no-fancybox'), а затем добавьте класс no-fancybox к тегу <img>, который вам не нужен. Fancybox может быть в порядке.

На самом деле этот кусок кода взят из темы блога Hexo NexT (themes/next/source/js/src/utils.js)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...