ProfiPHPProfiPHP
  1. Главная
  2. jQuery
  3. Плагин imgLiquid

Плагин imgLiquid

Плагин imgLiquid - это плагин jQuery, который используется для изменения размера изображений в контейнере фиксированной ширины и высоты. Страница плагина - imgLiquid

После скачивания файлов плагина imgLiquid его необходимо подключить:
<script src="js/imgLiquid-min.js"></script>
Или загружать библиотеку из серверов CDNJS, что позволит значительно облегчить нагрузку на сервер, загрузить скрипт более быстро, поскольку CDN распространяет контент, чтобы он был ближе к пользователю, и параллельно извлекать данные браузером, что приводит к более быстрому отображению страницы. Кроме того, загрузка скриптов из серверов CDN сохраняет в кеше, что позволит не загружать их дважды:
https://cdnjs.cloudflare.com/ajax/libs/imgLiquid/0.9.944/js/imgLiquid-min.js
Можно подключить и полную версию без приставки .min, которая позволит в читабельном виде просматривать исходный код:
https://cdnjs.cloudflare.com/ajax/libs/imgLiquid/0.9.944/js/imgLiquid.js
Обязательно перед использованием необходимо подключить библиотеку jQuery.

Для использования скрипта необходимо его инициализировать, указав в настройке необходимый класс для изображения:
$(document).ready(function() {
$(".imgLiquid").imgLiquid();
});
Изображения, которые должны помещаться в рамку, должны быть обрамлены данным классом:
<div class="imgLiquid" style="width:200px; height:100px;">
<img src="images.jpg" />
</div>
Последнее, что необходимо сделать, это добавить стили:
.imgLiquid img{visibility: hidden}
После очень простых манипуляций можно добиться изменения размера изображения, которое будет точно помещаться в рамку.

Добавить комментарий

Имя:
Текст комментария: