Как грамотно реализовать галерею изображений

Здравствуйте! Благодаря вашему сайту создал себе на сайт галерею изображений такую какую мне хотелось, с вкладками и прочее. Но хочется улучшить а как знаний не хватает прошу вашей помощи! Вот такая сейчас она http://asan-pro.ru/galery.php Есть вкладки под разные категории, есть большое изображение, а под ним миниатюры. Что я хочу, что бы при нажатии на большое изображение оно открывалась на всё окно и можно было бы листать с миниатюры одной группы, второе что бы миниатюры были реально миниатюры а то они весят как большие фото и долго загружается страничка и третье что бы как то кода было поменьше на страничке может скрипки какой что бы он изображение из папки доставал, ну это так мечты) Вот сам код моей галереи

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Бумага</a></li>
  <li><a data-toggle="tab" href="#panel2">Стекло</a></li>
  <li><a data-toggle="tab" href="#panel3">Металл</a></li>
  </ul>
<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Лазерная резка открыток и приглашений.</h3>
    <div class="container-fluid"> 
  <div class="row">
    <!-- Изображение -->
 <div class="col-xs-12" style="margin-bottom: 20px;">
      <img id="preview" class="img-responsive img-rounded center-block "  title="Лазерная резка бумаги" src="images/galey/bumaga_1.png">
    </div><div><i class="fa fa-backward" aria-hidden="true" id="left" ></i>
      <i class="fa fa-forward" aria-hidden="true"  id="right" style="margin-left:80%;"></i></div>
  </div>
  <div id="thumb" class="row"> 
    <!-- Миниатюры изображений -->
    <div class="col-md-2 col-sm-3 col-xs-4"> 
      <img class="img-responsive img-thumbnail" src="images/galey/bumaga_1.png">
    </div><div class="col-md-2 col-sm-3 col-xs-4"> 
      <img class="img-responsive img-thumbnail" src="images/galey/bumaga_2.png">
    </div><div class="col-md-2 col-sm-3 col-xs-4"> 
      <img class="img-responsive img-thumbnail" src="images/galey/bumaga_3.png">
    </div><div class="col-md-2 col-sm-3 col-xs-4"> 
      <img class="img-responsive img-thumbnail" src="images/galey/bumaga_4.png">
    </div>
    
   
    <!--...-->
  </div> 
</div>
  </div>
  <div id="panel2" class="tab-pane fade"> и так далее
    </div>

Спасибо за ранее!!

// image1.min.jpg -> image1.jpg
bigimage = thumb.replace('.min','');