Оригинальное увеличение картинки в Blogger

пятница, 22 марта 2013 г.
В последнее время Blogger как-то не сильно радует нас обновленным функционалом, поэтому рассказать о чем-то "новеньком" не получится. Хотя время от времени попадаются интересные скрипты, которые могут улучшить блог и внести некую изюминку - об этом можно говорить много. Сегодня затрону тему картинок в блоге и достаточно оригинального способа их увеличения. Вообще про изображения писал неоднократно - из последнего вспоминается Эффектная и простая вставка картинок в Blogger а также более старая статья про Эффект lightbox2.
Скрипт, о котором пойдет речь сегодня достаточно необычный. Суть его работы заключается в следующем: при наведении на картинку-миниатюру сбоку появляться некая область, где отображается часть изображения в полном размере. Область меньше реальной картинки, поэтому в определенный момент времени вы можете видеть только часть изображения. Такой эффект иногда можно увидеть в интернет магазинах, где при наведении на товар пользователю показывается его увеличенная версия. Но дабы не нарушать общий дизайн это увеличение заключается в ограниченную область. Вот как это приблизительно выглядит.
увеличение картинки в Blogger
Изображение справа (уменьшенное) просто показывается в блоге, но как только курсор мышки на него попадает, пользователь увидит увеличенную версию.
Реализовать это, кстати, намного проще, чем кажется. Для установки скрипта сделаем следующее:
1. Заходим в админку Блоггера в раздел "Шаблон". Кликаем по кнопке "Изменить HTML".
2. Находим в шаблоне строку ]]></b:skin> и прямо перед ней вставляем код:
#easy_zoom{
width:600px;
height:400px;
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;
}
Здесь с помощью CSS стилей задается размер, оформление и расположение всплывающего окна. Можете уточнить каждый из параметров, погуглив из значение. Если вкратце, то width и height это ширина и высота. Расположение окна фиксированное с верхним отступом в 35 пикселей и 45% слева от начала экрана. Все это можно менять.
3. Дальше находим в шаблоне строку </head> и перед ней вставляем код скрипта.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'
type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});
});
</script>
После этого сохраняем шаблон. Положительным моментом является то, что сам скрипт находится на хостинге googlecode.com и риск его удаления оттуда очень мал. С большой долей вероятности все это будет работать и через год, и через два и т.п.
Чтобы добавить для картинки оригинальный эффект увеличения вы должны прописать для нее class="zoom". То есть вы сначала вставляете в текстовом редакторе изображение обычным методом, после чего переключаетесь в режим редактирования HTML и добавляете в ссылку нужный класс:
<a class="zoom" href=".../s1600/blog2.jpg" imageanchor="1">
<img src=".../s320/blog2.jpg" width="320" />
</a>
Сохраняем и смотрим что получилось. Если все сделали правильно, скрипт будет работать как часы. Для начала рекомендую установить все параметры, как указано в примерах, а потом уже менять те или иные значения. За подсказку в реализации данной фишки спасибо автору этой статьи.
Единственное хочу рассказать о двух небольших уточнениях/наблюдениях в работе скрипта. Во-первых, на картинку нажимать нельзя, так как сработает классическое увеличение на весь экран - оно может и хорошо, только слегка "дестабилизирует" пользователя. Во-вторых, если превью и миниатюра изображения пересекаются между собой, то это вызовет определенный глюк. Поэтому нужно располагать их вдали друг от друга. 
P.S. Тематический портал о Виннице содержит много полезного: карту map.vn.ua, службы такси в Виннице а также описание достопримечательностей и последние новости города.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Эффектный темный шаблон с большим слайдером

пятница, 8 марта 2013 г.
Иногда встречаются такие дизайны, по которым сразу не скажешь что за CMS на них установлена - для того же wordpress или blogger можно найти сотни классических стандартных дизайнов. И вот когда попадаешь на реально оригинальный макет, то мягко говоря приятно поражаешься. Шаблон Especial хороший тому пример. Этому дизайну могли позавидовать даже многие WP блоги (хотя не исключено, что именно с него он был "срисован"). Как бы там ни было, данная темная тема для blogger однозначно заслуживает внимания.
Сочетание черного, серого и розового цветов создают впечатление весьма стильного макета. Еще бОльший "wow эффект" производит слайдер в шапке блога. Скрипт достаточно функциональный: здесь задается большая иллюстрация, заголовок, краткое описание, а также есть навигация избранных постов в виде миниатюр. Вероятно, вам придется потратить некоторое время на настройку данного элемента, и все это делается вручную через шаблон, но поверьте, оно того стоит - впечатление крутые.
эффектный шаблон Especial
Кроме слайдера в шапке найдете симпатичный стильный логотип, жаль нет PSD исходников для его редактирования. Также здесь имеется поиск и выпадающее горизонтальное меню. Подпункты выводятся с некоторым запозданием, что вместе с цветовым оформлением отлично смотрится в макете.
Основная часть шаблона Especial состоит из двух колонок: слева находится сайдбар, справа - тексты блога. В боковом сайдбаре присутствует список тегов (визуально смахивает на еще одно меню), популярные посты с миниматюрами, блок группы социальной сети и последние комментарии. На удивление все весьма функционально, да и оформление отличное. В блоке контента каждый элемент содержит заголовок, дату, ссылку "Читать далее" и метки. Есть разбиение на страницы. В одиночном отображении поста найдете также список похожих записей и форму комментирования.
Футер выполнен не менее замечательно - общая стилистика шаблона просматривается и в нем. Из функциональных элементов здесь 3 колонки, в которых отображаются категории, теги блога и список произвольных ссылок. Как только вы достигаете низа страницы в правом нижнем углу появляется иконка для прокрутки наверх. Если вы находитесь посредине, она скрывается - визуально неплохо смотрится. Вообще шаблон Especial, наверное, один из самых стильных и эффектных из всех которые я видел!
P.S. Создавая блог на своем хостинге вам нужно быть уверенным в его надежности. Сейчас Хостинг Германия является одним из самых оптимальных при выборе по соотношению цена/качество.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails