Панорамное увеличении картинки при наведении курсора, для Блогспот, Блоггер


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Сегодня я отложил некоторые дела, что бы опубликовать этот замечательный скрипт. Уж больно мне не терпелось! Этот эффект применяют в основном серьезные интернет магазины для лучшего показа товаров.

Ну и мы не лыком шиты и можем легко и просто внедрить это достижение веб-дизайна, на наши Блогспот-Блоггер блоги!
А для начала, наведите и поводите курсором по картинке. (я извиняюсь, у меня работают на картинку два скрипта. Не обращайте внимание, речь идет о картинке на заднем плане).
Таким образом, вы можете публиковать панорамные фотографии, скриншоты таблиц, карты и другие наглядные пособия. (Кстати, на фото Зимний дворец, С. Питербург, вид со стороны Невы)

Если эффект вам понравился, то установка очень проста. Или в Дизайн - Добавить гаджет - HTML/JavaScript или в редактор сообщения необходимо добавить следующий код:

<style>#easy_zoom{
width:450px;
height:350px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:45%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}</style>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js"></script>
<script type="text/javascript"> 
$().ready(function() { 
$('a.zoom').each(function(i) { 
$(this).easyZoom();
}); 
}); 
</script>

Если у вас, еще нет "двигающихся" виджетов, а значит нету (для простоты назовем это) скрипта jquery,  то к коду нужно добавить, лучше на самый верх:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/></script>

И последний шаг, что бы скрип узнавал какую картинку нужно обрабатывать,  а какую нет, необходимо прикрепить идентификатор class="zoom". Делается это просто. Нажимаем на HTML в текстовом редакторе Блогспота ваших статей и находим такой код картинки:

<a href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a>

В самом начале сразу после <a вставляем class="zoom" и должно получится так:

<a class="zoom" href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" style="cursor: pointer;" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a>

Все, скрипт должен заработать!

33 коммент.:

Сергей
Ольга Ватутина
Ольга Ватутина
Justus
Justus
Светлана Шестопалова
Justus
Сергей Устинов
KrediT
Justus
Ольга Ватутина
Justus
Ирина Пархоменко
Justus
Ирина Пархоменко
larrka
Константин Дашевский
Justus
моби
Александра Артюхова
Justus
Александра Артюхова
Justus
Александра Артюхова
Justus
Александра Артюхова
Justus
Яна Торяник
Андрей Кучеренко
Justus
Admin :)
mila alves
Вася Петров

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!