Эффект увеличения фото.

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

Кому может пригодиться данный эффект? Тем, кто в силу каких-то причин выкладывает в блоге только небольшие фото

• уже закончилось место в Picasa и фото можно загрузить только небольшие
• ширина основной ленты не позволяет размещать крупные фото, а ситуация требует возможности что-то хорошенько рассмотреть
• автор блога считает, что небольшие изображения выглядят лучше 

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

               "На вкус и цвет все фломастеры разные"

Поэтому данный способ для многих стал бы неплохим решением. 

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

Это я не пугаю. Просто меры предосторожности, чтобы локти не кусать. Мы с вами еще не учились это делать, а давно бы пора. Рекомендуют сохранять ..раз в месяц. Все просто: нажали на кнопочку, в открывшемся окне выбрали папку (лучше создали), сохранили и запомнили куда.

Перейдем к установке кода. 

1) В панели инструментов выбрать ШАБЛОН (если до сих пор не открыли)

2) ИЗМЕНИТЬ HTML

3) Копируем у меня код (взяла здесь)

<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(!+'\v1'){//IE
zoom = parseInt(o.style.zoom) || 100;
zoom += data / 12;
if(zoom > zooming.min)
o.style.zoom = zoom + '%';
e.returnValue=false;
}else {
size=o.getAttribute("_zoomsize").split(",");
zoom=parseInt(o.getAttribute("_zoom")) ||100;
zoom+=data/12;
if(zoom>zooming.min){
o.setAttribute("_zoom",zoom);
o.style.width=size[0]*zoom/100+"px";
o.style.height=size[1]*zoom/100+"px";
}
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("DOMMouseScroll",zooming,false);
if(-[1,]){//if not IE
obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);
}
};


window.onload=function(){//must be onload , in order to get the image size
zooming.add(document.getElementById("test"));
}
})()
</script>

4) В открытом шаблоне находим </head> (для этого достаточно нажать сочетание клавиш ctrl+F , в верхнем правом углу в открывшейся строке поиска ввести этот тег </head>)

5) Нажимаем ИЗМЕНИТЬ ШАБЛОН (теперь нет галочки в РАСШИРИТЬ ...)

6) Перед/над ним вставить скопированный у меня код.

7) Нажать СОХРАНИТЬ ШАБЛОН.

Это мы сделали главную подготовительную работу. К сожалению, теперь нет кнопки ЗАКРЫТЬ. Поэтому по-началу все время будет этот шаблон открываться, что раздражает. Потом прошло. Но думаю, что разработчики учтут этот момент и глюк уберут

Теперь о самом изображении.

В сообщении, которое вы пишете вставляйте картинку привычным для вас способом.

Рекомендации: Поставьте перед картинкой какое-то условное слово (хоть КРАКОЗЯБРА), чтобы оно бросалось в глаза. Благодаря ему вы легко найдете это место в редакторе HTML

Далее нужно перейти в редактор  HTML, нажав на эти заветные кнопочки слева вверху.
Помните как выглядит в режиме HTML ссылка на картинку? Примерно так

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23n-S-EVIOhhjNqduWPT4wSIL3ORgJHzhlAb9JCVWsQVgylacotqdBpOdw_ZZVSybXTGAmVHZeA4UCq95LGphWfNuhDRmi7hr9-3bShOf4asuybYKCkFz7eMy5orL3q_Th2sxvGpInOUJ/s1600/DSCF1313.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img ****** border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23n-S-EVIOhhjNqduWPT4wSIL3ORgJHzhlAb9JCVWsQVgylacotqdBpOdw_ZZVSybXTGAmVHZeA4UCq95LGphWfNuhDRmi7hr9-3bShOf4asuybYKCkFz7eMy5orL3q_Th2sxvGpInOUJ/s640/DSCF1313.JPG" width="640" /></a>

Ссылка состоит из двух частей. Первая это ссылка на ресурс, на котором хранятся наши фото, вторая конкретно на картинку. Так вот, нам нужно во второй половинке, после первого слова-тега    <img  вместо красных звездочек  разместить вот этот коротенький код id='test' и можно смело возвращаться в привычный вид сообщения, нажав там же вверху слева на СОЗДАТЬ.

Уф! Как длинно получилось! Реально то всего чуток манипуляций. В шаблон вставить код единожды, а потом любое фото можно одарить этим эффектом, лишь разместив во второй половинке ссылки малюсенький код. Согласитесь, не очень сложно))) Зато как эффектно. 

А сейчас начну отвечать на вопросы читателей, которые еще не задали.

• Да, код вставить в шаблон только ОДИН РАЗ, потом лишь маленький код в нужное изображение.
• Да, ваши читатели могут не знать об этом эффекте, но думаю, что в посте написать строчку, что все (или конкретное) изображения увеличиваются, стоит только навести курсор и прокрутить колесико у мышки не сложно.
• Да, это не вариант для сенсорных экранов. Тут я вам не советчик. У нас с этими приблудами взаимная неприязнь, поэтому мой айпад, подаренный Любимым, месяцами не достается из чехла.
• Да, слово КРОКОЗЯБРА, после возвращения в привычный вид сообщения можно удалить, оно лишь было маячком.

На этом всё)))