Балаковские программисты

Искал недавно какой-нибудь простой lightbox для своего сайта.Чтобы без лишних наворотов и километров кода.Увы, ничего подходящего найти не удалось.Поэтому решил написать собственноручно, тем более, что никакого особенного функционала мне не требовалось.Мне нужно было, чтобы картинка увеличивалась по клику на ней и при повторном клике уменьшалась обратно.При этом не хотелось прописывать каждой картинке свой класс или id (ну лениво мне).Вот собственно и все мои капризы.

Решил использовать JQuery а не Javascript, так как это проще.Итак, вызываем Jquery:

$(document).ready(function(){
       
      });

Теперь нам нужно найти все наши картинки.Поскольку все тексты у меня упакованы в контейнер div c классом art-post, это не составит труда:

$(document).ready(function(){
       $('.art-post img').click(function(){
           
       });
      });

$('.art-post img') - здесь мы нашли в блоке с классом art-post все изображения (img).

click(function() - повесили на найденные картинки событие: клик.Клик, в свою очередь запускает функцию, в которой будет выполняться действие.Едем дальше.

$(document).ready(function(){
       $('.art-post img').click(function(){
           $(this).toggleClass("lightbox");
       });
      });

$(this).toggleClass("lightbox") - при клике по картинке в нашем блоке ей присваивается класс "lightbox".При повторном клике, класс удаляется.

С JQuery на этом собственно все.Копируем код и помещаем его перед закрывающим тегом </body>(не забудьте заключить его в теги <script>).Теперь открываем файл .css со стилями и прописываем там:

.lightbox{

    transition-duration: .5s;
    transform:scale(2);
}

transition-duration: .5s; - это задержка действия на полсекунды, чтобы картинка увеличивалась плавно.

transform:scale(2); - увеличивает картинку в 2 раза

Теперь все должно работать.Вот результат (кликните на картинке ниже):

Надеюсь, урок был полезным.Успехов!