Будь в курсе событий!

24.11.2013

Виджет панорамного увеличения изображений, с прокруткой и подсветкой.

Leave a Comment
 
Привет друзья, и вот наконец я добрался до того что бы вам рассказать, о самом вкусном виджете что стоит у меня в блоге.© zarnakoom Это на этот момент окончательный виджет, увеличения картинок вашего блога. совсем недавно я публиковал несколько статей. С темой похожих на эту, но эта самая интересная в плане скрипта для виджета. И так что же умеет этот виджет что не умеют друие виджеты похожего плана, отличается он прежде всего тем что прокручивается на 360 градусов, увеличиваясь при прокрутке, а так же имеет подсветку.Всем советую потому что это красиво, так же цвет подсветки можно изменять на любой какой вашей душе угодно. У меня в блоге, есть страничка инструментов для блоггеров, на ней вы найдете инструмент Цветовое колесо, в нем можно выбрать любой цвет для вашего виджета. А сейчас собственно пришло время поговорить об установке,установить скрипт очень просто.© zarnakoom

Для его установки так же  надо   нажать  Шаблон -> Изменить HTML. Далее  жмем CTRL+F  ищем тег ]]></b:skin>  потом как нашли  вставляем этот код выше нашего тега.
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}
-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
 box-shadow: 0 0 20px #FF0000;

И как я уже писал в предедущих статьях на эту тему, если скрипт у вас не работает а такое возможно потому как у меня так. То
ищем так же через поиск   CTRL+F    тег  </body>  оборачиваем наш скрипт в теги стиля
вот так
<style>.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s                                                       ease}
                          -webkit-box-shadow: 0 0 20px #FF0000;
                           -moz-box-shadow: 0 0 20px #FF0000;
                          box-shadow: 0 0 20px #FF0000;</style>


Далее  вставляем его перед тегом   </body>  , и не забываем нажать на сохранение теперь все у вас должно работать, желаю вам легкой утановки всех моих скриптов.© zarnakoom

0 коммент. :

© 2012-2017 Cash's from program