fancybox wrong image quantity with slick slider

Question

I'm using fancybox to display image gallery.

I have this layout:

And when I click on preview - gallery popup occurs, but it shows 4 images instead of 2. I included fancybox via data-attributes, without javascript. Tried magnific popup with gallery option - got same result. link href attribute value and internal image src attribute are the same. I don't have a thumbnail, display image cropped with css.

Hee is CSS:

.avatar {
    &.slick-dotted.slick-slider {
        margin-bottom: 0;
    }
    a.avatar-item {
        width: 146px;
        height: 146px;
        display: inline-block;
    }
    width: 146px;
    height: 146px;
    border: 4px solid #FFF;
    float: left;
    position: relative;
    overflow: hidden;
    img {
        height: 100%;
    }
}

user_12846934 · Answer

I have extended the _run function. Now duplicate images are removed from the gallery and still the correct key is returned. Furthermore I have the possibility to arrange the images in any order via data-facybox position.

So it is also possible to use the infinity version of the slick slider.

function _run(e, opts) {
  var tempItems,
    items       = [],
    newItem,
    reOrder,
    duplicates  = false,
    pos,
    index       = 0,
    $target,
    value,
    instance;

// Avoid opening multiple times
  if (e && e.isDefaultPrevented()) {
    return;
  }

  e.preventDefault();

  opts = opts || {};

  if (e && e.data) {
    opts = mergeOpts(e.data.options, opts);
  }

  $target = opts.$target || $(e.currentTarget).trigger("blur");
  instance = $.fancybox.getInstance();

  if (instance && instance.$trigger && instance.$trigger.is($target)) {
    return;
  }

  if (opts.selector) {
    tempItems = $(opts.selector);
  } else {
    // Get all related items and find index for clicked one
    value = $target.attr("data-fancybox") || "";
    if (value) {
      tempItems = e.data ? e.data.items : [];
      tempItems = tempItems.length ? tempItems.filter('[data-fancybox="' + 
      value + '"]') : $('[data-fancybox="' + value + '"]');
    } else {
      tempItems = [$target];
    }
  }

  if (tempItems.length > 1) {
    $.each(tempItems, function(key, item) {  // prevents duplicate images in the gallery
      newItem = false;
      if (typeof item !== 'undefined') {
        if (items.length > 0) {
          var found = items.filter(function (items) { return items.href == 
          item.href });
          if (found.length == 0) {
            newItem     = true;
          } else {
            duplicates  = true;
          }
        } else {
          newItem = true;
        }
      }
      if (newItem) {
        // Sort if the attribute data-fancybox-pos exists
        if ($(item).data('fancybox-pos')) {
          reOrder = true;
          pos     = $(item).data('fancybox-pos') - 1;
          if (pos in items) {
            tempItem    = items[pos];
            items[pos]  = item;
            items.push(tempItem);
          } else {
            items[pos]  = item;
          }
        } else {
          items.push(item);
        }
      }
    });
  } else {
    items = tempItems;
  }

  if (duplicates || reOrder) {
    // find correct index if there were duplicates
    $.each(items, function(key, item) {
      if (item.href == $target[0].href) {
        index = key;
      }
    });
  } else {
    index = $(items).index($target);
  }

  // Sometimes current item can not be found
  if (index < 0) {
    index = 0;
  }

  instance = $.fancybox.open(items, opts, index);

  // Save last active element
  instance.$trigger = $target;
}

fancybox wrong image quantity with slick slider

2 Answers