вторник, 22 октября 2013 г.

Панорамная прокрутка изображения

Неделю назад сходил на Красноярские Столбы и, разумеется, кроме того, что зарядился бодростью и здоровьем - еще и сделал несколько классных снимков. Этот снимок (слева) пришлось склеить из нескольких фрагментов, поскольку для построения такого одного кадра просто нет точки съемки... Однако, в данном сообщении я хотел поговорить не о технике съемки и обработке изображений, а о форме представления и просмотра изображения в своем блоге. Дело в том, что, с одной стороны, хочется обозреть изображение полностью (особенно ЭТО!), а с другой - пристально рассмотреть отдельные его детали. Мне кажется, что вчера я нашел решение этой дилеммы - посмотрите на картинку и поводите по ней курсором! На мой взгляд, это достойная форма представления графической информации на любом ресурсе, не так ли?.. Если хочешь "запанорамировать" свои фотографии на Блоггере - процедура установки этого скрипта очень проста:

1. В гаджет (HTML &Java) или в HTML редакторе сообщений надо вставить этот код:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/></script>
<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)

2. Затем вставьте идентификатор class="zoom" (в HTML-редакторе сообщения) для придания эффекта панорамного просмотра только выбранному изображению. К примеру, для моего изображения это выглядит так:

<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UbsOPboWdmpzEyfLKqKd09Ahd3U-Sgn2oyRXc0Te_-FejBxWTkowQpBq83aUGgfR7_95HrALSUxPcznKZIEPI40Dg-rU_x6NQ_qBzuAVkDO2z_RJDSRSDRQ1rUuYC_WLSeYCDMqF78VR/s1600/%D0%9F%D0%B0%D0%BD%D0%BE%D1%80%D0%B0%D0%BC%D0%B001.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UbsOPboWdmpzEyfLKqKd09Ahd3U-Sgn2oyRXc0Te_-FejBxWTkowQpBq83aUGgfR7_95HrALSUxPcznKZIEPI40Dg-rU_x6NQ_qBzuAVkDO2z_RJDSRSDRQ1rUuYC_WLSeYCDMqF78VR/s200/%D0%9F%D0%B0%D0%BD%D0%BE%D1%80%D0%B0%D0%BC%D0%B001.jpg" width="200" /></a>

Вот и все дела - пробуй!..
...и, разумеется, комментируй:

Комментариев нет:

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