Blogger оптимизация шаблона

Monday, March 25, 2013

Панорамное увеличении картинки при наведении курсора, blogspot-blogger

Заработок в интернете на блогах платформы blogger

tweetn

RSS blogger 2

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

Posted: 25 Mar 2013 12:04 PM PDT

Пост (в основном) для пользователей:
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 src="http://suyb.googlecode.com/files/easyzoom.js" type="text/javascript"></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'/>

И последний шаг, что бы скрип узнавал какую картинку нужно обрабатывать,  а какую нет, необходимо прикрепить идентификатор 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" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a></div>

Все, скрипт должен заработать!
http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Posted by Tanjah3 at 3:32 PM
Labels: , , , , ,

0 comments:

Post a Comment