воскресенье, 5 февраля 2017 г.
Плавное увеличение изображений с помощью плагина jQuery
Я снова рад приветствовать посетителей этого блога. В первую очередь, хотелось бы извиниться перед теми терпеливыми читателями, которые все-таки дождались окончания траурно гордого молчания данного ресурса, ставшего недоступным несколько месяцев назад.
Человеческая глупость безгранична, не стала приятным исключением в этом и моя натура. Причин недоступности блога несколько, как ситуационно-вынужденных, так и по моей халатности. Да, я балбес.
Однако теперь блог и я, как его автор, снова в строю бесчисленных множеств подобных и непонятных скоплений во вселенной, а посему смело могу утверждать, что вместе мы полны как новых идей, так и новых публикаций на их основе, мы обновляемся и мы искренне просим прощения. Мы снова будем рады видеть тебя на своих страницах, дорогой и верный читатель.
Тем не менее, приступим, собственно, к теме сегодняшнего поста. Заключается она в описании и интегрировании в блог одного из проявлений чудесных возможностей jQuery - оригинальном плагине jquery.hoverpulse.js. Суть его заключается в плавном увеличении изображений при наведении на них курсора мыши. А именно в эффекте, когда картинка очаровательно выезжает на передний план, увеличиваясь в заданных ранее размерах и не тревожа соседние элементы, а после увода курсора мыши принимает первоначальный вид. Выглядит все это весьма аккуратно и симпатично.
Помимо прочего, каждое такое изображение вполне возможно сделать ссылающимся на определенную страницу блога. Таким образом, с помощью данного плагина jQuery вполне актуально выделить и оформить любой элемент с изображением в блоге, заставив обратить на него внимание читателя, вплоть до последующего создания меню в картинках.
Демо-пример этого эффекта Zoom у изображений при наведении вы можете увидеть в моем тестовом блоге.
Остается только воспользоваться всей красотой плагина jquery.hoverpulse.js, выразив ее в виде самобытного виджета с галереей небольших изображений, и установить в блог.
Установка плагина jQuery и подключение Zoom-эффекта к выбранным изображениям.
Первым делом пропишем сам плагин jQuery.hoverpulse.js.
Остается сохранить шаблон, - все действия непосредственно в нем завершены.
Ну и наконец добавим в блог сами изображения, к которым и будет применен эффект зума с помощью следующей конструкции.
Человеческая глупость безгранична, не стала приятным исключением в этом и моя натура. Причин недоступности блога несколько, как ситуационно-вынужденных, так и по моей халатности. Да, я балбес.
Однако теперь блог и я, как его автор, снова в строю бесчисленных множеств подобных и непонятных скоплений во вселенной, а посему смело могу утверждать, что вместе мы полны как новых идей, так и новых публикаций на их основе, мы обновляемся и мы искренне просим прощения. Мы снова будем рады видеть тебя на своих страницах, дорогой и верный читатель.
Тем не менее, приступим, собственно, к теме сегодняшнего поста. Заключается она в описании и интегрировании в блог одного из проявлений чудесных возможностей jQuery - оригинальном плагине jquery.hoverpulse.js. Суть его заключается в плавном увеличении изображений при наведении на них курсора мыши. А именно в эффекте, когда картинка очаровательно выезжает на передний план, увеличиваясь в заданных ранее размерах и не тревожа соседние элементы, а после увода курсора мыши принимает первоначальный вид. Выглядит все это весьма аккуратно и симпатично.
Помимо прочего, каждое такое изображение вполне возможно сделать ссылающимся на определенную страницу блога. Таким образом, с помощью данного плагина jQuery вполне актуально выделить и оформить любой элемент с изображением в блоге, заставив обратить на него внимание читателя, вплоть до последующего создания меню в картинках.
Демо-пример этого эффекта Zoom у изображений при наведении вы можете увидеть в моем тестовом блоге.
Остается только воспользоваться всей красотой плагина jquery.hoverpulse.js, выразив ее в виде самобытного виджета с галереей небольших изображений, и установить в блог.
Установка плагина jQuery и подключение Zoom-эффекта к выбранным изображениям.
Несмотря на то, что весь процесс достаточно прост и демократичен, потребуется обратиться непосредственно к шаблону блога. Для чего в админкеBlogger проследуем: Шаблон > Изменить HTML.
Первым делом пропишем сам плагин jQuery.hoverpulse.js.
Сразу следует уточнить, что для того, чтобы плагин функционировал, необходимо наличие в блоге подключенной библиотеки jQuery. То есть, в шаблоне должна присутствовать строка скрипта наподобие этой: <script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>. Если таковая отсутствует, разместите ее самостоятельно перед отрезком кода </head>.
В открывшемся поле для редактирования шаблона с помощью сочетания клавиш CTRL + F найдите строку </head>. Прямо перед ней впишите следующий скрипт:
<!--Zoom Image-->
<script src='https://sites.google.com/site/serebrock/hranitel-fajlov/jquery.hoverpulse.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('div.thumb img').hoverpulse();
});
</script>
<!--end Zoom Image-->
Упомяну, что сам плагин расположен на моем файлохостинге, однако для большей уверенности в завтрашнем дне можете перезалить его себе.
Для этого перейдите по адресу https://sites.google.com/site/serebrock/hranitel-fajlov/jquery.hoverpulse.js, скачайте скрипт и закиньте на свое собственное файловое хранилище, после чего поменяйте аналогичную строку в коде, указанном выше, на адрес, по которому теперь расположен скрипт. Это совсем необязательная процедура, однако для надежности можете ее совершить, дабы предотвратить некоторую зависимость от сторонних ресурсов. Выбрать один из бесплатных файлохостингов вы можете в этой статье либо же в этой.
Для этого перейдите по адресу https://sites.google.com/site/serebrock/hranitel-fajlov/jquery.hoverpulse.js, скачайте скрипт и закиньте на свое собственное файловое хранилище, после чего поменяйте аналогичную строку в коде, указанном выше, на адрес, по которому теперь расположен скрипт. Это совсем необязательная процедура, однако для надежности можете ее совершить, дабы предотвратить некоторую зависимость от сторонних ресурсов. Выбрать один из бесплатных файлохостингов вы можете в этой статье либо же в этой.
Далее определим стили к нашему блоку с выбранными в дальнейшем картинками, которые будут реагировать при наведении на них курсора мыши увеличением изображения.
По-прежнему не покидая редактора шаблона, теперь найдите строку ]]></b:skin> и перед нею впишите код:
div,pre {
margin:0;
padding:0
}
#thumbs {
position: relative;
width: 470px;
height: 80px;
}
div.thumb {
float: left;
padding: 7px;
width: 64px;
height: 64px;
}
div.thumb img {
background:#C77532;border:1px solid #C77532;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;padding:4px;-moz-box-shadow:0px 0px 5px #C77532;-webkit-box-shadow:0px 0px 5px #C77532;box-shadow:0px 0px 5px #C77532;}
При некоторых знаниях CSS можете поэкспериментировать со стилями на участке div.thumb img {}, дабы задать свой персональный дизайн оформлению изображений.
Помимо всего объясню несколько значений в приведенном коде.
Участок #thumbs {} отвечает за стиль самого блока с вашими изображениями, здесь можете изменить его размеры под свои нужды регулированием числовых значений у атрибутов widthи height. Однако подбирайте эти размеры с учетом количества изображений в блоке и, в свою очередь, их совокупных величин, которые прописаны на участке div.thumb {} такими же определениями - width и height.
Остается сохранить шаблон, - все действия непосредственно в нем завершены.
Ну и наконец добавим в блог сами изображения, к которым и будет применен эффект зума с помощью следующей конструкции.
Код блока:
<div id="thumbs">
<div class="thumb"><a href="#"><img alt="" title="" src="http://ссылка_на_изображение" width="64" height="64" /></a></div>
<div class="thumb"><a href="#"><img alt="" title="" src="http://ссылка_на_изображение" width="64" height="64" /></a></div>
<div class="thumb"><a href="#" ><img alt="" title="" src="http://ссылка_на_изображение" width="64" height="64" /></a></div>
<div class="thumb"><a href="#" ><img alt="" title="" src="http://ссылка_на_изображение" width="64" height="64" /></a></div>
<div class="thumb"><a href="#"><img alt="" title="" src="http://ссылка_на_изображение" width="64" height="64" /></a></div>
<div class="thumb"><a href="#"><img alt="" title="" src="http://ссылка_на_изображение" width="64" height="64" /></a></div>
</div>
Этот код следует размещать уже в том месте шаблона, где и потребуется отобразить картинки с эффетом при наведении. Например, поместить в блоге с помощью гаджета HTML/JavaScript либо прописать непосредственно в теле сообщения.
Для удобства я уже внес в конструкцию атрибуты alt и title, оптимизирующих изображения, вам остается просто разместить в них свои подписи. Также в коде каждая картинка имеет ссылку для перехода к определенной странице блога, адреса которых вам тоже нужно вписать самостоятельно. Ну и конечно, не забудьте заменить строки http://ссылка_на_изображение на собственные адреса изображений. При желании, дабы ваши картинки с эффектом зума не имели ссылок, просто удалите из кода все строки вида <a href="#"></a> (но только не содержимое между приведенными тегами!). Определения width="" иheight="" обозначают размеры картинок, которые должны совпадать с аналогичными значениями в стилях CSS, которые мы прописывали в шаблоне.
На этом мое повествование о плагине jQuery для плавного увеличения изображений закончено. Несмотря на длинное описание, которое обусловлено, скорее, моим желанием более подробно и доступно разжевать все основные пункты установки, процесс его внедрения в блог довольно прост, в чем вы сможете и убедиться на практике у себя.
0 коммент.:
Отправить комментарий