Скрипт галереи изображений на jQuery
Вот пришла идея сделать простенький скрипт галереи изображений. При клике по изображению из галереи, оно будет плавно увеличиваться до своих истинных размеров, а при повторном клике, либо клике по другому изображению галереи, оно будет исчезать. Все это естественно будет происходить без перезагрузки странички. Т.к. изображения располагаются в разных местах странички, то при увеличении они одновременно с увеличением будет перемещаться в центр экрана. Сделано это специально для больших изображений, чтобы их края при увеличении не залезали далеко за границы экрана.
Ознакомиться с наглядной работой описанного выше скрипта галереи изображений можно на примере, располагающемся чуть ниже. Для этого покликайте по изображениям:
 |
 |
 |
 |
 |
 |
|
 |
|
Получается довольно-таки интересный вариант для размещения картинок (фото) на своем сайте, но у данного скрипта есть и свой минус - при переходе на страничку скрипту необходимо загружать сразу все изображения, что при большом количестве изображений и при их больших размерах может быть накладно.
Для работы скрипта необходимо подключать библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Чтобы получить галерею изображений, подобную той, которую мы продемонстрировали на данной страничке, Вам понадобится поместить изображения в таблицу следующим образом:
<table class="gallery">
<tr>
<td><img src="image/hit_counter.png" alt=""></td>
<td><img src="image/csssprites_com2.png" alt=""></td>
<td><img src="image/li_33.png" alt=""></td>
</tr>
<tr>
<td><img src="image/img_1.png" alt=""></td>
<td><img src="image/goqr_me.png" alt=""></td>
<td><img src="image/pingdom_2.png" alt=""></td>
</tr>
<tr>
<td><img src="image/pingdom_2.png" alt=""></td>
<td><img src="image/img_2.png" alt=""></td>
<td><img src="image/li_33.png" alt=""></td>
</tr>
</table>Для нормальной работы скрипта галереи необходимо прописать следующие стили:
<style type="text/css">
.gallery { width:100%; margin:0; padding:0; table-layout:fixed; border-spacing:7px; }
.gallery td { width:200px; height:140px; padding:5px; text-align:center;
background-color:#F0F0F0; border-radius:6px; border:1px solid #000000; }
.gallery img { max-width:100%; max-height:100%; cursor:pointer; }
.new_image { position:absolute; cursor:pointer; }
</style>Теперь остается лишь добавить JavaScript код, который будет увеличивать и центрировать изображения по клику и скрывать их при повторном клике по увеличенному изображению. Для этого скопируйте данный JavaScript код:
<script type="text/javascript">
$(document).ready(function(){
$(".gallery img").click(function(){
$(".new_image").remove();
$(this).clone().addClass("new_image").appendTo("body");
var img_width = $(".new_image").width();
var img_height = $(".new_image").height();
$(".new_image").width($(this).width()).height($(this).height());
$(".new_image").offset({top: $(this).offset().top, left: $(this).offset().left});
$(".new_image").animate({
width: img_width,
height: img_height,
top: $(window).height()/2 + $(window).scrollTop() - img_height/2,
left: $(window).width()/2 + $(window).scrollLeft() - img_width/2
}, 800);
});
$(document).on("click",".new_image",function(){ $(".new_image").remove(); });
});
</script>Данный скрипт галереи изображений может быть применена взамен скрипта спойлера, когда необходимо разместить несколько изображений, но при этом неплохо было бы чтобы их было видно (хоть и в уменьшенном размере).
Плюсом данного скрипта является то, что один раз добавив CSS стили и JavaScript код, потом очень легко добавлять новые изображения, т.к. не требуется для каждого из них прописывать стили, а также размеры до и после увеличения.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.