<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>
Спасибо за ранее!! Как грамотно реализовать галерею изображений
Здравствуйте! Благодаря вашему сайту создал себе на сайт галерею изображений такую какую мне хотелось, с вкладками и прочее. Но хочется улучшить а как знаний не хватает прошу вашей помощи! Вот такая сейчас она http://asan-pro.ru/galery.php Есть вкладки под разные категории, есть большое изображение, а под ним миниатюры. Что я хочу, что бы при нажатии на большое изображение оно открывалась на всё окно и можно было бы листать с миниатюры одной группы, второе что бы миниатюры были реально миниатюры а то они весят как большие фото и долго загружается страничка и третье что бы как то кода было поменьше на страничке может скрипки какой что бы он изображение из папки доставал, ну это так мечты) Вот сам код моей галереи
Комментарии: 2
Здравствуйте, Сергей. Для решения первого вопроса можно подключить и использовать плагин fancybox. Второй момент можно разрешить путём перевода картинок в формат jpg. Использовать формат png оправдано только для простых изображений с небольших количеством цветов. После этого подготовленные изображения jpg можно дополнительно ещё сжать через сервис compressjpeg.com. Можно также сделать миниатюры (например, посредством добавления к концу имени .min), а потом при клике на них или элементы перелистывания их удалять. Например, с помощью метода replace:
скрипт и не скрипки