//tile
<section class="tile" id="superbox-gallery">

  //tile header
  <div class="tile-header transparent">
    <h1><strong>SuperBox</strong> Gallery</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile widget
  <div class="tile-widget color greensea">
    <ul class="tile-navbar">
      <li>
        <div class="checkbox check-transparent">
          <input type="checkbox" value="1" id="selectall">
          <label for="selectall">Select All</label>
        </div>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-envelope-o"></i> Email</a>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-download"></i> Download</a>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-pencil"></i> Edit</a>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-trash-o"></i> Delete</a>
      </li>
      <li class="filters">
        <a href="all">All</a>
        <a href="document">Documents</a>
        <a href="audio">Audio</a>
        <a href="image" class="active">Images</a>
        <a href="video">Videos</a>
      </li>
      
    </ul>
  </div>
  // /tile widget

  //tile body
  <div class="tile-body superbox">
    <div class="row">

      <div class="superbox-list img-view">
        <img src="http://lorempixel.com/640/480/people/1" data-img="http://lorempixel.com/640/480/people/1" class="superbox-img" alt>
        <div class="overlay">
          <div class="media-info">
            
            <div class="checkbox">
              <input type="checkbox" value="1" id="selectimg01" class="toggle">
              <label for="selectimg01"></label>
            </div>

            <h2>img01.jpg</h2>

            <span>Added: March 03, 2014</span>

            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
              <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
              <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
              <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
              <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
            </ul>

          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        </div>
      </div>

      ...

    </div>
  </div>
  // /tile body

  //tile footer
  <div class="tile-footer text-center">

    <ul class="pagination pagination-sm text-center">
      <li class="disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
    </ul>

  </div>
  // /tile footer

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

//initialize superbox

$('.superbox').SuperBox();

//superbox image selecting

var checkSuperboxSelected = function(){
  $('#superbox-gallery .img-view .checkbox :checkbox').each(function() {
    var el = $(this);

    if(!el.is(':checked')) {
      enableToolsSuperbox(false);
    } else {
      el.parents('.img-view').addClass('selected');
      enableToolsSuperbox(true);
    }

  });
};

$('#superbox-gallery .img-view .checkbox').click(function(){
  var el = $(this);
  if(!el.find(':checkbox').is(':checked')) {
    el.parents('.img-view').removeClass('selected');
    enableToolsSuperbox(false);
  } else {
    el.parents('.img-view').addClass('selected');
    enableToolsSuperbox(true);
  }
});

$('#superbox-gallery #selectall').click(function(){
  if($(this).prop('checked')) {
    $(this).parents('.tile').each(function(){
      $(this).find('.img-view .checkbox :checkbox').prop('checked',true);
      $(this).find('.img-view').addClass('selected');
    });
    enableToolsSuperbox(true);
  } else {
    $(this).parents('.tile').each(function(){
      $(this).find('.img-view .checkbox :checkbox').prop('checked',false);
      $(this).find('.img-view').removeClass('selected');
    });
    enableToolsSuperbox(false);
  }
});

var enableToolsSuperbox = function(enable) {
  
  if (enable) {

    $('#superbox-gallery .gallery-tool').removeClass('disabled');

  } else {

    var selected = false;

    $('#superbox-gallery .superbox .img-view').each(function(){
      if($(this).hasClass('selected')) {
        selected = true;
      }
    });
    
    if(!selected) {
      $('#superbox-gallery .gallery-tool').addClass('disabled');
    }
  }
}

checkSuperboxSelected();

$('.img-view .media-info .btn.dropdown-toggle').on('click', function(e){
  $(this).next().toggle();
  e.stopPropagation();
});

$('.img-view .media-info .dropdown-menu').on('click', function(e){
  e.stopPropagation();
  $(this).toggle();
});

$('.img-view .media-info .checkbox').on('click', function(e){
  e.stopPropagation();
});

//tile
<section class="tile" id="colorbox-gallery">

  //tile header
  <div class="tile-header transparent">
    <h1><strong>ColorBox</strong> Gallery</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile widget
  <div class="tile-widget color greensea">
    <ul class="tile-navbar">
      <li>
        <div class="checkbox check-transparent">
          <input type="checkbox" value="1" id="selectall2">
          <label for="selectall2">Select All</label>
        </div>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-envelope-o"></i> Email</a>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-download"></i> Download</a>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-pencil"></i> Edit</a>
      </li>
      <li>
        <a href="#" class="gallery-tool disabled"><i class="fa fa-trash-o"></i> Delete</a>
      </li>
      <li class="filters">
        <a href="all">All</a>
        <a href="document">Documents</a>
        <a href="audio">Audio</a>
        <a href="image" class="active">Images</a>
        <a href="video">Videos</a>
      </li>
      
    </ul>
  </div>
  // /tile widget

  //tile body
  <!-- tile body -->
  <div class="tile-body colorbox">

    <div class="colorbox-list img-view">
      <img src="http://lorempixel.com/640/480/people/1" data-img="http://lorempixel.com/640/480/people/1" class="colorbox-img" alt>
      <div class="overlay">
        <div class="media-info">
          
          <div class="checkbox">
            <input type="checkbox" value="1" id="selectimg101" class="toggle">
            <label for="selectimg101"></label>
          </div>

          <h2>img01.jpg</h2>

          <span>Added: March 03, 2014</span>

          <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#"><i class="fa fa-share"></i> Share</a></li>
            <li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
            <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="fa fa-download"></i> Download</a></li>
            <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
          </ul>

        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
    </div>

    ...
  
  </div>
  // /tile body

  //tile footer
  <div class="tile-footer text-center">

    <ul class="pagination pagination-sm text-center">
      <li class="disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
    </ul>

  </div>
  // /tile footer

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

/* initialize colorbox */

$('.colorbox .colorbox-list .overlay').colorbox({
  photo: true,
  opacity: .9, 
  rel:'group1',
  scalePhotos:true,
  scrolling:false,
  maxWidth:'100%',
  maxHeight:'100%',
  transition: 'elastic',
  href: function(){
    var url = $(this).prev().data('img');
    return url;
  },
});

//colorbox image selecting

var checkColorboxSelected = function(){
  $('#colorbox-gallery .img-view .checkbox :checkbox').each(function() {
    var el = $(this);

    if(!el.is(':checked')) {
      enableToolsColorbox(false);
    } else {
      el.parents('.img-view').addClass('selected');
      enableToolsColorbox(true);
    }

  });
};

$('#colorbox-gallery .img-view .checkbox').click(function(){
  var el = $(this);
  if(!el.find(':checkbox').is(':checked')) {
    el.parents('.img-view').removeClass('selected');
    enableToolsColorbox(false);
  } else {
    el.parents('.img-view').addClass('selected');
    enableToolsColorbox(true);
  }
});

$('#colorbox-gallery #selectall2').click(function(){
  if($(this).prop('checked')) {
    $(this).parents('.tile').each(function(){
      $(this).find('.img-view .checkbox :checkbox').prop('checked',true);
      $(this).find('.img-view').addClass('selected');
    });
    enableToolsColorbox(true);
  } else {
    $(this).parents('.tile').each(function(){
      $(this).find('.img-view .checkbox :checkbox').prop('checked',false);
      $(this).find('.img-view').removeClass('selected');
    });
    enableToolsColorbox(false);
  }
});

var enableToolsColorbox = function(enable) {
  
  if (enable) {

    $('#colorbox-gallery .gallery-tool').removeClass('disabled');

  } else {

    var selected = false;

    $('#colorbox-gallery .colorbox .img-view').each(function(){
      if($(this).hasClass('selected')) {
        selected = true;
      }
    });
    
    if(!selected) {
      $('#colorbox-gallery .gallery-tool').addClass('disabled');
    }
  }
}

checkColorboxSelected();

$('.img-view .media-info .btn.dropdown-toggle').on('click', function(e){
  $(this).next().toggle();
  e.stopPropagation();
});

$('.img-view .media-info .dropdown-menu').on('click', function(e){
  e.stopPropagation();
  $(this).toggle();
});

$('.img-view .media-info .checkbox').on('click', function(e){
  e.stopPropagation();
});