суббота, 27 апреля 2013 г.

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


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

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

  • уже закончилось место в 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="http://1.bp.blogspot.com/-iQ-uvdPwmkg/UEJiEU6mVNI/AAAAAAAABAo/YONWx0m1EAg/s1600/DSCF1313.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img ****** border="0" height="362" src="http://1.bp.blogspot.com/-iQ-uvdPwmkg/UEJiEU6mVNI/AAAAAAAABAo/YONWx0m1EAg/s640/DSCF1313.JPG" width="640" /></a>

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

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

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

22 комментария:

  1. Ответы
    1. Да, Ольга, для блоггеров, которые по каким-то причинам размещают маленькие фото, этот способ очень даже интересен.

      Удалить
  2. А у меня - тачпад, нету колесика(((
    Энн, а ты не знаешь, почему могут перестать приходить уведомления о комментариях на почту? Проверила в настройках все гуд...
    Наташа

    ОтветитьУдалить
    Ответы
    1. Нет, Наташ, не знаю. Может с сервисом, где почтовый ящик проблемы? У нас майл часто тупит.

      Удалить
  3. Ответы
    1. ЛЮССС, только имейте ввиду, что фото лучше размещать в левом углу, оно увеличивается, расширяясь вправо.

      Удалить
  4. Ого какая фишка классная! буду с нетерпением ждать всю статью целиком.

    ОтветитьУдалить
    Ответы
    1. Татьяна, ждать не долго. (эх, нельзя мне зарекаться, что-нибудь да случается) Мне подсказали насчет шаблона, могу дописать.

      Удалить
  5. да, слышала про изменения!
    классное увеличение фото )))

    ОтветитьУдалить
    Ответы
    1. Алина, а мне как быть и не знаю. Столько статей с инструкциями, которые частично устарели((((

      Удалить
    2. что поделать...все совершенствуется, за новинками не поспеешь))
      будем узнавать новое)

      Удалить
  6. Энн, видимо, этот эффект не работает, если фото размещено не на гугл-диске...

    ОтветитьУдалить
    Ответы
    1. Инна, а что не так с эффектом? У меня фото к гугл диску отношения не имеет и все работает. Просто чтобы посмотреть, нужно пройти по ссылке в демо блог.

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

      Удалить
  7. ОООООтличный блог, что ж я так поздно нашла его?)))Жаль сегодня уже поздно -завтра зачитаюсь))))Спасибо!!

    ОтветитьУдалить
    Ответы
    1. Анна, очень надеюсь, что Вам понравится и найдете много интересного для себя.

      Удалить
  8. Вот Вы то мне и нужны!!! Я прямо всем чайникам чайник))) я даже не могу понять как написать тут сообщение и на боковой панели закрепить картинку с активной ссылкой))))))))

    ОтветитьУдалить
  9. Как же клево что нашла Вас! прям все применить надо)))) шучу конечно, но очень многое почерпнула для своего блога
    Остаюсь. А Вам желаю в дальнейшем нас просвещать и выводить из рядов чайников)))

    ОтветитьУдалить
  10. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Внимательно прочла перевод, сходила по ссылке, почесала затылок и ...все закрыла. На мой взгляд международная база блогов Блогспот не может так ужасно выглядеть.

      Удалить

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...