Как отфильтровать лайтбокс Fancybox по классу, чтобы в группу входил только определенный класс (Squarespace)?

Question

У меня есть две галереи на странице, одна из полноразмерных изображений и одна из миниатюр, которые ссылаются на другие галереи. Я использую внедрение кода на Squarespace. Я пытаюсь, чтобы в лайтбоксе в виде группы отображались только полноразмерные изображения, но независимо от того, сколько фильтров я пробую, fancybox вытягивает все изображения на странице в группу в лайтбоксе. Я также обертываю теги привязки вокруг миниатюрных изображений, потому что даже если они не обернуты вокруг них тегами привязки, миниатюры изображений все еще добавляются в галерею лайтбокса. Большие изображения являются потомками div с идентификатором "projectPages", в то время как миниатюры находятся в нижнем div как потомки div с идентификатором "projectThumbs".

Вот мой код:

$(document).ready(function() {

  //wrap anchor tags around large images and add fancybox class
  $('div#projectPages img').wrap('<a class="fancybox" data-fancybox-group="group1"  style="display:block"></a>');

  //wrap anchor tags around thumbnail images and add dontShow class
  $('div#projectThumbs img').wrap('<a class="dontShow" style="display:block"></a>');

  //give the anchor tag the same href attr as the img's src attr
  $("div#projectPages div.image a > img").each(function() {
    $(this).parent().attr("href", $(this).data('src'));
  });

});

//call fancybox on fancybox class
$(document).ready(function() {
  $(".fancybox").fancybox({

  });
});

Answer 1

Если вы хотите включить элементы только с определенным классом в причудливую рамку, можете ли вы не просто указывать этот класс в своем селекторе?

$('#projectPages .hasClass img').wrap();