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

Человеческая глупость безгранична, не стала приятным исключением в этом и моя натура. Причин недоступности блога несколько, как ситуационно-вынужденных, так и по моей халатности. Да, я балбес.

Однако теперь блог и я, как его автор, снова в строю бесчисленных множеств подобных и непонятных скоплений во вселенной, а посему смело могу утверждать, что вместе мы полны как новых идей, так и новых публикаций на их основе, мы обновляемся и мы искренне просим прощения. Мы снова будем рады видеть тебя на своих страницах, дорогой и верный читатель.

Тем не менее, приступим, собственно, к теме сегодняшнего поста. Заключается она в описании и интегрировании в блог одного из проявлений чудесных возможностей jQuery - оригинальном плагине jquery.hoverpulse.js. Суть его заключается в плавном увеличении изображений при наведении на них курсора мыши. А именно в эффекте, когда картинка очаровательно выезжает на передний план, увеличиваясь в заданных ранее размерах и не тревожа соседние элементы, а после увода курсора мыши принимает первоначальный вид. Выглядит все это весьма аккуратно и симпатично.

Помимо прочего, каждое такое изображение вполне возможно сделать ссылающимся на определенную страницу блога. Таким образом, с помощью данного плагина jQuery вполне актуально выделить и оформить любой элемент с изображением в блоге, заставив обратить на него внимание читателя, вплоть до последующего создания меню в картинках.


Демо-пример этого эффекта Zoom у изображений при наведении вы можете увидеть в моем тестовом блоге.

Остается только воспользоваться всей красотой плагина jquery.hoverpulse.js, выразив ее в виде самобытного виджета с галереей небольших изображений, и установить в блог.

Установка плагина jQuery и подключение Zoom-эффекта к выбранным изображениям.

<!--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() {
    $(&#39;div.thumb img&#39;).hoverpulse();
});
</script>
<!--end Zoom Image-->

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 {}, дабы задать свой персональный дизайн оформлению изображений.

<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>