Простая фотогалерея на jQuery + Zoomimage
Часто возникают ситуации, когда создателю сайта необходимо использовать миниатюры изображений, делать ссылки на большие изображения. Многие из них используют те или иные способы сделать свой сайт привлекательнее и удобнее для пользователя. Сейчас мы рассмотрим способ, как можно создать собственную галерею картинок для сайта или любой web-страницы.
Используя jQuery плагин Zoomimage, мы привяжем наши миниатюры к большим изображениям и используем очаровательные эффекты всплывающих картинок, увеличения и пролистывания картинок, вывод их мета-данных. Простой способ сделать свой сайт удобнее, красивее и привлекательнее для пользователя. Запоминающаяся галерея фото на сайт принесет тебе новых счастливых пользователей.
Прикрепим к старице CSS для галереи фото. Если ты хочешь оптимизировать код сайта, то можешь поместить код из данного файла в свой файл CSS.
<link rel="stylesheet" media="screen" type="text/css" href="/css/zoomimage.css" />
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/eye.js"></script> <script type="text/javascript" src="/js/utils.js"></script> <script type="text/javascript" src="/js/zoomimage.js"></script>
Также мы прикрепили JavaScript файлы, которые необходимы для работы скрипта.
Следующим шагом станет изучение HTML кода:
<a href="https://f.inverser.pro/img/5/NeedFull.NET_foto-devushki-v-sportzale-chanel-preston.jpg" title="City lights" class="lightsGal11"><img src="https://f.inverser.pro/img/5/NeedFull.NET_foto-devushki-v-sportzale-chanel-preston.jpg" alt="City lights" width="150"/></a>
Здесь ты можешь видеть обычную ссылку на изображение. В теге img нужно указывать миниатюру, а в ссылке - ссылку на большое изображение. Ты можешь использовать любой класс для подключения галереи и создания многих альбомов: class="lightsGal11". Для этого используй код с указание класса:
<script>
$('a.lightsGal11').zoomimage();
</script>
Простая и незатейливая галерея. Если покопаться в её настройках, то можно увидеть следующее (файл js/zoomimage.js):
opacity: 0.3, //прозрачность описания
border: 0, // обводка вокруг изображения
shadow: 6, // размер тени
duration: 300, // длительность анимации
prevent: 14, // на сколько px передвигать мышь после развертывания картинки
controls: true, // показать управление
caption: true, // показать описание
hideSource: false,
centered: false, // центрировать
className: false,
onLoad: function(){return false}, //это и далее события после и до начала анимации
beforeZoomIn: function(){return false},
onZoomIn: function(){return false},
beforeZoomOut: function(){return false},
onZoomOut: function(){return false},
onFocus: function(){return false},
controlsTrigger: 'focus',
easing: 'linear', //тип анимации
preload: 'click' // выбор предзагрузки
