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


Пост (в основном) для пользователей:
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
stromanta
Justus
Аптека "Похудей-ка"
KrediT
Justus
Ольга
Justus
Ирина Пархоменко
Justus
Ирина Пархоменко
larrka
Игорь
Justus
моби
Unknown
Justus
Unknown
Justus
Unknown
Justus
Unknown
Justus
СлавЯночка
Unknown
Justus
Admin :)
Lady Magic4
Unknown

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

Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

Доска почета

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