Изменить размер изображения прокруткой колесика мыши



Приветствую всех друзей, читателей и гостей блога. В предыдущем посте я писала как Увеличить изображение при клике мышью. Сегодня еще одна фишка, научимся изменять размер картинки, прокручивая колесико мыши. 

Пример можно посмотреть в тестовом блоге. Наведите курсор на картинку и прокручивайте колесико мыши, правда здорово!

Чтобы воспользоваться такой фишкой на страницах блога, нужно вставить скрипт в шаблон-изменить шаблон выше закрывающего тэга </head>. Посмотрите скриншот:

Как вставить код скрипта для прокрутки картинок колесиком мыши в шаблон блога 

Скопируйте скрипт


<script type='text/javascript'>
(function(){

var zooming=function(e){
e=window.event ||e;
var o=this,data=e.wheelDelta || -e.detail*40,zoom,size;
if(!+&#39;\v1&#39;){//IE
zoom = parseInt(o.style.zoom) || 100;
zoom += data / 12;
if(zoom &gt; zooming.min)
o.style.zoom = zoom + &#39;%&#39;;
e.returnValue=false;
}else {
size=o.getAttribute(&quot;_zoomsize&quot;).split(&quot;,&quot;);
zoom=parseInt(o.getAttribute(&quot;_zoom&quot;)) ||100;
zoom+=data/12;
if(zoom&gt;zooming.min){
o.setAttribute(&quot;_zoom&quot;,zoom);
o.style.width=size[0]*zoom/100+&quot;px&quot;;
o.style.height=size[1]*zoom/100+&quot;px&quot;;
}
e.preventDefault();
e.stopPropagation();//for firefox3.6
}
};
zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50
zooming.min=min || 50;
obj.onmousewheel=zooming;
if(/Firefox/.test(navigator.userAgent))//if Firefox
obj.addEventListener(&quot;DOMMouseScroll&quot;,zooming,false);
if(-[1,]){//if not IE
obj.setAttribute(&quot;_zoomsize&quot;,obj.offsetWidth+&quot;,&quot;+obj.offsetHeight);
}
};
window.onload=function(){//must be onload , in order to get the image size
zooming.add(document.getElementById(&quot;test&quot;));
}
})()
</script>


Далее, когда в редакторе blogger загрузите фото или картинку, перейдите по вкладке HTML, перед src url адресом надо вставить строку id="test" 

Вот адрес изображения

<img border="0" height="279" id="test" src="url адрес картинки" width="320" /> 

Теперь Вы можете предлагать своим посетителям свои интересные фотки или какие-то особые картинки просмотреть в увеличенном размере.

На все вопросы отвечу в комментариях или воспользуйтесь контактной формой для связи. Всего доброго.


TEXT.RU - 100.00%




Автор статьи ✎ Olga Protasova Выпуск ✹ 7/08/2015 Ярлыки ►


Открыть комментарии →

7 коммент. :

  1. Привет, Ольга. В моем блоге увеличивается только первое изображение в публикации, а другие не увеличиваются. Где может быть проблема? Пожалуйста, посмотрите www.thelibrary-bg.com
    Поздравляем с вашим отличным блогом!

    ОтветитьУдалить
  2. Пепа Табакова здравствуйте. У Вас в блоге два эффекта для картинок, поэтому скрипты конфликтуют. Пробуйте другой вариант, еще проще, в статье:

    http://www.bdblogov.ru/2016/04/Enlarge-image-on-page-messages-when-hover-using-CSS.html

    Или ищите статью в меню "содержание" ярлык "Изображения", статья 31.

    Вставите CSS в HTML код страницы и все картинки при наведении мыши будут увеличиваться.

    ОтветитьУдалить
    Ответы
    1. Спасибо, я попробую.

      Удалить
    2. Спасибо, Ольга, сделала все как Вы писали в статье, и получилось именно то, что хотела.

      Удалить
    3. Пепа Табакова, посмотрела в Вашем блоге, теперь все нормально, даже лучше.

      Удалить
    4. Пепа Табакова, удалите скрипт "увеличить картинку прокруткой колесика мыши", выше закрывающего тэга head, если он Вам не нужен. Подчищайте шаблон.

      Удалить
    5. Спасибо за совет, дорогая Ольга, я сделала.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *