Как увеличить изображение при клике?
Сегодня расскажу о методах увеличения картинки по клику мышкой,- при создании этого ресурса такая проблема возникала.
Так как я не нашел бесплатного плагина об увеличении изображения на Joomla 5, пришлось применить более сложный метод с применением скрипта и других вложений.
Для Joomla 3 и 4 существуют несколько плагинов для увеличения изображения, но все они не работают на J5.
Применял то, что под рукой.
Содержание:
Highslide
(Он сейчас работает на сайте - см. статьи, где есть картинки для увеличения.)
Применить этот метод можно в любом шаблоне и любой CMS.
Далее, покажу методику применения увеличения изображения в дочернем шаблоне Joomla 5 этого ресурса.
Для этого, в корне сайта - в папке images, создайте подпапку highslide. Там разместите папку graphics с элементами для работы системы увеличения:
ВАШ_САЙТ/images/highslide/graphics.
В созданном вашем шаблоне создайте файл - user.js:
ВАШ_САЙТ/media/templates/site/ВАШ_ШАБЛОН/js/user.js.
В файл user.js скопируйте содержание скрипта highslide.js.
В 24 строке кода скрипта надо указать путь к папке graphics:
ВАШ_САЙТ/images/highslide/graphics/.
Здесь опубликована только часть скрипта - highslide.js (Весь скрипт находится в материале для скачивания):
// ***** Highslide JS ***** /
/**
* Name: Highslide JS
* Version: 5.0.0 (2016-05-24)
* Config: default
* Author: Torstein Hønsi
* Support: www.highslide.com/support
* License: MIT
*/
if (!hs) { var hs = {
// Language strings
lang : {
cssDirection: 'ltr',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
focusTitle : 'Click to bring to front',
fullExpandTitle : 'Expand to actual size (f)',
creditsText : 'Powered by Highslide JS',
creditsTitle : 'Go to the Highslide JS homepage',
restoreTitle : 'Кликните, чтобы закрыть изображение, или нажмите, чтобы переместить.'
},
// See http://highslide.com/ref for examples of settings - (См. http://highslide.com/ref примеры настроек).
graphicsDir : '/images/highslide/graphics/',
expandCursor : 'zoomin.cur', // null disables
restoreCursor : 'zoomout.cur', // null disables
expandDuration : 250, // milliseconds
restoreDuration : 250,
marginLeft : 15,
marginRight : 15,
marginTop : 15,
marginBottom : 15,
zIndexCounter : 1001, // adjust to other absolutely positioned elements
loadingOpacity : 0.75,
allowMultipleInstances: true,
numberOfImagesToPreload : 5,
outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
outlineStartOffset : 3, // ends at 10
padToMinWidth : false, // pad the popup width to make room for wide caption
fullExpandPosition : 'bottom right',
fullExpandOpacity : 1,
showCredits : true, // you can set this to false if you want
creditsHref : 'http://highslide.com/',
creditsTarget : '_self',
enableKeyListener : true,
openerTagNames : ['a'], // Add more to allow slideshow indexing
dragByHeading: true,
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : 'drop-shadow', // set null to disable outlines
// END OF YOUR SETTINGS
В вашем материале разместите HTML-код с картинкой для увеличения:
<figure>
<p><a class="highslide" href="/URL изображения" onclick="return hs.expand(this)">
<img title="Нажмите, для увеличения" src="/URL изображения" alt="Имя" /></a></p>
<figcaption>Рис. 1</figcaption>
</figure>
В созданном файле вашего шаблона - user.css:
ВАШ_САЙТ/media/templates/site/ВАШ_ШАБЛОН/css/user.css - определите стили блока figure с указанием размера маленькой картинки.
Важная особенность этого метода:
При создании вашего материала в визуальном редакторе, если будете использовать установленный JCE, удаляется HTML-код — onclick="return hs.expand(this)" из блока figure, что тем самым блокируется работа увеличения.
Чтобы исключить это, выберите Редактор по умолчанию: Редактор - TinyMCE - в Общих настройках Панели управления.
Пример 1 увеличения картинки:
Все нужные компоненты для этого расширение вы можете скачать в данной статьи ниже.
ZOOImage
Примечание:
При создании материала, для работы этого расширения - не надо отключать визуальный редактор в Панели управления.
Также проверьте подключение Библиотеки JQuery.
В созданные файлы вашего шаблона - user.css и user.js:
ВАШ_САЙТ/media/templates/site/ВАШ_ШАБЛОН/css/user.css,
ВАШ_САЙТ/media/templates/site/ВАШ_ШАБЛОН/js/user.js, скопируйте стили и скрипт: zooimage.css и zooimage.js - соответственно.
/* ========= Zooimage.css =========== */
/* картинка на странице */
.minimized {
cursor: pointer;
}
/* картинка на странице */
.minimized {
display: block;
width: 400px;
height: 30%;
cursor: pointer;
border: 1px solid #666;
margin: auto;
transition: all 1s ease;
}
.minimized:hover {
border: 1px solid white;
opacity: 0.7;
transition: all 1s ease;
}
/* увеличенная картинка */
#magnify {
display: none;
position: fixed;
max-width: 75%;
height: 40%;
z-index: 9999;
}
#magnify img {
max-width: 100%;
}
/* затемняющий фон */
#overlay {
display: none;
background: #000;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.5;
z-index: 9990;
}
/* кнопка закрытия */
#close-popup {
width: 30px;
height: 30px;
background: #fff;
border: 1px solid #afafaf;
border-radius: 15px;
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
z-index: 9999;
}
#close-popup i {
width: 30px;
height: 30px;
background: url(images/cross.png) no-repeat center center;
background-size: 16px 16px;
display: block;
}
@keyframes rota {
25% { transform: rotate(360deg); }
}
#close-popup:hover {
animation: rota 4s infinite normal;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@media only screen and (max-width: 610px) {
#magnify {
max-width: 98%;
}
#close-popup {
width: 15px;
height: 15px;
top: 5px;
right: 5px;
}
#close-popup i {
width: 12px;
height: 12px;
}
}
//Zooimage.js
//*************************
$(function(){
$('.minimized').click(function(event) {
var i_path = $(this).attr('src');
$('body').append('<div id="overlay"></div><div id="magnify"><img src="'+i_path+'"><div id="close-popup"><i></i></div></div>');
$('#magnify').css({
left: ($(document).width() - $('#magnify').outerWidth())/2,
// top: ($(document).height() - $('#magnify').outerHeight())/2 upd: 24.10.2016
top: ($(window).height() - $('#magnify').outerHeight())/2
});
$('#overlay, #magnify').fadeIn('fast');
});
$('body').on('click', '#close-popup, #overlay', function(event) {
event.preventDefault();
$('#overlay, #magnify').fadeOut('fast', function() {
$('#close-popup, #magnify, #overlay').remove();
});
});
});
В создаваемой статье укажите HTML-код изображения для увеличения:
<div class="center">
<img class="minimized" src="/URL вашей картинки" alt="Клик для увеличения" />
</div>
Пример 2 увеличения картинки:
Скачать материалы для увеличения картинки можно бесплатно с нашего сервера:
(Ссылки недоступны для гостей сайта.)
Вы можете пройти простую Регистрацию или Войти как Пользователь.
Заключение
Какой способ для увеличения изображения применить, если не нашли нужного плагина для этого - выбираете вы.
Мне больше приемлем первый. В нем можно не только картинку увеличить до любого установленного размера, но и перемещать в пределах размера окна браузера.
Оба варианта работают на любом движке CMS.