Внимание! В материалах сайта используются несколько ссылок на посторонние ресурсы. Но из-за сегодняшней ситуации в мире, некоторые сайты по этим ссылкам могут быть заблокированы. Чтобы исключить блокировку, рекомендуем установить программное обеспечение VPN.
Увеличение по клику

 

Как увеличить изображение при клике?

Сегодня расскажу о методах увеличения картинки по клику мышкой,- при создании этого ресурса такая проблема возникала.

Так как я не нашел бесплатного плагина об увеличении изображения на Joomla 5, пришлось применить более сложный метод с применением скрипта и других вложений.

 

Для Joomla 3 и 4 существуют несколько плагинов для увеличения изображения, но все они не работают на J5.

Применял то, что под рукой.

 

Содержание:

 

  1. Метод Highslide
  2. Метод ZOOImage
  3. Заключение

 

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.

 

 


Полезное

 

Поделиться:

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

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

 

Hosting CityHost

Внимание! Это самый лучший хостинг, который я выбрал! И за приемлемую цену...
Мой сайт - Joomlasite.net появился на хостинге с середины июня 2024 года. Так как это мой первый сайт, который выложил в интернет, то опыта работы на хостинге оказалось совсем мало. Были обнаружены некоторые ошибки, как в структуре сайта, так и особенно много появилось проблем с индексацией в поиске... Но сейчас это уже в прошлом...
Очень благодарен Службе поддержки в которую обращался много раз за помощью. Все проблемы разрешались очень грамотно и оперативно в разное время суток.
Несколько слов о загрузке сайта,- сайт загружается очень быстро, без сбоев, как на компьютере, так и на мобильном устройстве.
Никаких трудностей с работой на хостинге не испытываю, и за пользование которым - оплатил двухгодичный тариф. Перед этим был бесплатный тестовый период в течение 10-и дней, и после которого - без сомнений и колебаний решил остаться на этом ресурсе.
Хочется отметить очень классную Панель управления хостингом - простая, информативная и интуитивно понятная. Все возможности настроек, как сайта, так и хостинга выполнены грамотно и профессионально.
Сервера хостинга находятся в Украине, Финляндии и Германии,- мой сайт размещен на немецком сервере.
На этом свои впечатления об этом хостинге заканчиваю, и настоятельно рекомендую всем сайтостроителям - воспользоваться лучшим украинским хостингом CityHost.