结合使用引导网格和缩略图网格以及扩展预览

Question

I'm creating a site and am using this bootstrap based theme as a starting base. I've also incorporated the very nice Thumbnail Grid with Expanding Preview as described in this Codrops tutorial .

What I'm trying to do is keep the portfolio grid that you can see in the theme where all the preview images are responsive bootstrap col-lg-4 col-sm-6 elements so that they will expand & shrink to fill the full browser width and adjust the number of elements per row depending on screen width.

The JS that drives the thumbnail grid with expanding preview effect is grid.js and I had thought that if I made the following adjustments that it would apply the same effect:

var Grid = (function() {
    // grid selector
    var $selector = '#og-grid',
    // list of items
    $grid = $( $selector ),
    // the items
    $items = $grid.children( '.grid-item' ),
    // ... etc ...

ie: I've set items to be .grid-item instead of li and updated the bootstrap divs so that they have this class too.

I've uploaded a snapshot of where I'm at right now here which basically has the thumbnail grid with expanding preview effect implemented as per the Codrops tutorial, but I'm hoping to be able to keep the responsive benefits associated with the original theme's portfolio section. Does anyone have any suggestions as to how I might be able to achieve what I'm hoping to do? Please just ask if further clarification is required on what I'm trying to figure out.

Answer 1

As suggested by @KarlDawson, I just set up some media queries and the items rendered as expected:

@media (min-width: 768px) {
  .og-grid li {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .og-grid li {
    width: 33.33333333333%;
  }
}