The jquery.wrecker's discuss from stevenvachon

stevenvachon / jquery.wrecker Goto Github PK

View Code? Open in Web Editor NEW

wRECkeR: Responsive Equal-Height Columns and Rows

CSS 31.37% JavaScript 68.63%

jquery.wrecker's Issues

Website "How to set it up" is wrong

On your website: https://www.svachon.com/blog/wrecker-responsive-equal-height-columns-and-rows/

In the How to set it up section you give this code snippet as an example

$(function(){
    $("#container").wrecker({
        // options
        itemSelector : ".item",
        maxColumns : 4,
        responsiveColumns : {
            // windowMaxWidth : columns
            // windowMaxWidth order and values should match those in your responsive CSS
            {1024 : 3},
            {800  : 2},
            {640  : 1}
        }
    });
});

You are showing to create respnsiveColumns as an opject with curly brackets {} instead of an array with square brackets [].

If someone were to use the above code they would get an invalid property error.

Interaction w/ jquery.lazyload?

Hey this plugin is working great!

One issue, images no longer lazyloading. Any idea what's going on?

(function($) {

  $('.tw-lazyload').lazyload({
    threshold : 200,
    failure_limit : 10,
    skip_invisible : true,
    effect : 'show',
    event : 'scroll'
  });

}(jQuery));

(function($) {

  // if the page has a jquery.wrecker element
  if ( $('#wrecker-container').length ) {

    function initialize_wrecker() {

      $("#wrecker-container").wrecker({

        // options
        itemSelector : ".wrecker-item",
        maxColumns : 3,
        responsiveColumns : [
          {1080 : 3},
          {810  : 2},
          {540  : 1}
        ]

      });

    }

    // if viewport is larger than 540px
    if (matchMedia('only screen and (min-width: 540px)').matches) {

      initialize_wrecker();

    }
    // end if viewport is larger than 540px

    // initialize wrecker on resize end event
    window.addEventListener('resize:end', function(event) {

      // if viewport is larger than 540px
      if (matchMedia('only screen and (min-width: 540px)').matches) {

        initialize_wrecker();

      }
      // end if viewport is larger than 540px

    }, false);
    // end initialize wrecker on resize end event

  }
  // end if the page has a jquery.wrecker element

}(jQuery));

Recommend Projects