Wookmark Lightbox - closing the lightbox will make the page go to top

[framelita]

I'm using filter and colorbox just like the example page. However, when I choose to close, the lightbox, the whole page will go up to beginning of the images. How do I make the page stays?

$('#tiles').imagesLoaded(function() {
  // This filter is later used as the selector for which grid items to show.
  var filter = '', handler;

  // Prepare layout options.
  var options = {
    autoResize: false, // This will auto-update the layout when the browser window is resized.
    container: $('#right'), // Optional, used for some extra CSS styling
    offset: 3, // Optional, the distance between grid items
    itemWidth: 253, // Optional, the width of a grid item
  };

  // This function filters the grid when a change is made.
  var refresh = function() {
    // This hides all grid items ("inactive" is a CSS class that sets opacity to 0).
    $('#tiles li').addClass('inactive');

    // Create a new layout selector with our filter.
    handler = $(filter);

    // This shows the items we want visible.
    handler.removeClass("inactive");

    // This updates the layout.

    handler.wookmark(options);

  }

    // Init lightbox
    $('#tiles a', handler).colorbox({
      rel: 'test'
    });

  /**
   * This function checks all filter options to see which ones are active.
   * If they have changed, it also calls a refresh (see above).
   */
  var updateFilters = function() {
    var oldFilter = filter,
        filters = [];

    // Collect filter list.
    var items = $('#filters li'),
        i = 0, length = items.length, item;

    for(; i < length; i++) {
      item = items.eq(i);
      if(item.hasClass('active')) {
        filters.push('#tiles li.' + item.attr('data-filter'));
      }
    }

    // If no filters active, set default to show all.
    if (filters.length == 0) {
      filters.push('#tiles li');
    }

    // Finalize our filter selector for jQuery.
    filter = filters.join(', ');

    // If the filter has changed, update the layout.
    if(oldFilter != filter) {
      refresh();
    }
  };

  /**
   * When a filter is clicked, toggle it's active state and refresh.
   */
  var onClickFilter = function(event) {
    $('#filters li').removeClass('active');
    $(event.currentTarget).toggleClass('active');
    updateFilters();
    $("html, body").animate({ scrollTop: 0 }, "slow");

return false;

  }

  // Capture filter click events.
  $('#filters li').click(onClickFilter);

  // Do initial update (shows all items).
  updateFilters();

});

[framelita]

i added the code in case needed.

[Sebobo]

You should use the latest version of the plugin and the integrated filter feature. See the updated example-filter samples.

[framelita]

(function ($){
  $('#tiles').imagesLoaded(function() {
    // Prepare layout options.
    var options = {
      autoResize: false, // This will auto-update the layout when the browser window is resized.
      container: $('#right'), // Optional, used for some extra CSS styling
      offset: 3, // Optional, the distance between grid items
      itemWidth: 253, // Optional, the width of a grid item
    };

    // Get a reference to your grid items.
    var handler = $('#tiles li'),
        filters = $('#filters li');

    // Call the layout function.
    handler.wookmark(options);

    $('#tiles a', handler).colorbox({
      rel: 'test'
    });
    /**
     * When a filter is clicked, toggle it's active state and refresh.
     */
    var onClickFilter = function(event) {
      var item = $(event.currentTarget),
          activeFilters = [];

      if (!item.hasClass('active')) {
        filters.removeClass('active');
      }
      item.toggleClass('active');

      // Filter by the currently selected filter
      if (item.hasClass('active')) {
        activeFilters.push(item.data('filter'));
      }

      handler.wookmarkInstance.filter(activeFilters);
    }

    // Capture filter click events.
    filters.click(onClickFilter);
  });
})(jQuery);

Now the lightbox is not working. I have colorbox applied for another thing on same page, it's still working for that.

One of the list

Do I have to put the anchor inside the list then it will work?

--edit--

It's still not working, even after i put the anchor into list

[Sebobo]

Yes the links should be inside the li-tags because links should not be wrapping block elements.

The selector for the colorbox call is the problem, use this:

$('a', handler).colorbox({
    rel: 'test'
});

In your code the resulting selector would be "#tiles li #tiles a"

[framelita]

I tried that before and it's not working. However, I realised it's because I put the link out side the li tag. After putting it inside and using the one u show, it's working now. Thanks!