Увеличить изображение при клике мышью



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

Информация только для блогов на платформе blogspot. Будут ли работать скрипты на других ресурсах сказать не могу. Даже в blogger работа и корректное отображение изображения может отличаться в разных шаблонах. Итак, в редакторе сообщений загружаем изображение 

Нажимаем мышью на изображение и выбираем крупный, очень крупный или исходный размер


Переходим по вкладке HTML и копируем адрес картинки


Удаляем загруженную картинку, скопированный адрес вставляем в код

<style type="text/css">
.popup {width: 150px; cursor:pointer;}
.popup:focus {width: auto;}
</style>
<img src="http://4.bp.blogspot.com/-tqsz3cg2nUs/VY8hEG--l6I/AAAAAAAAJTg/2VcpcMYFrkw/s1600/%25D0%25BA%25D0%25BE%25D0%25B4%2B22.JPG" class="popup" tabindex="1"/>

Теперь этот код нам надо вставить по вкладке HTML в нужное место страницы, смотрим результат, кликните по картинке


Второй способ увеличить изображение при клике мыши.

Первые действия те же: загрузить картинку, нажать и выбрать маленький размер, перейти по вкладке HTML и скопировать адрес. Вставить в код, обратите внимание в двух местах. Далее выбираем исходный размер, копируем адрес и так же вставляем в код. 

Удаляем изображение, а код вставляем в нужное место статьи в HTML

<script>var imgbase = "маленький размер"; function cambiarla() { document.getElementById("miniatuyra1").src = "исходный размер"; }</script>

<img id="miniatuyra1" src="маленький размер"/>
<br>
<a href="javascript: cambiarla();">Увеличить</a> &#8660; <a href="javascript:void(0);" onclick="document.getElementById('miniatuyra1').src=imgbase;">Отменить</a>

Пример


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

Самый простой способ увеличить картинку для просмотра, вставить тэг: target_blank.

<a href="http://3.bp.blogspot.com/-8jcqYqydFbY/VY8cSOcgFII/AAAAAAAAJTY/VlT13eO5Dis/s1600/2e0hhces.jpg" 
target="_blank;">
<img border="0" height="213"  src="http://3.bp.blogspot.com/-8jcqYqydFbY/VY8cSOcgFII/AAAAAAAAJTY/VlT13eO5Dis/s320/2e0hhces.jpg"
 width="320" /></a>

Пример


Вставьте тэг target_blank;-открыть в новом окне. У Вас может отличаться от моего примера. Картинка откроется в новой вкладке браузера, если отключен Lightbox. Отображение зависит от настроек Lightbox, возможно придется отключить: blogger-настройки-сообщения и комментарии-показывать отображение Lightbox-да или нет-сохранить.  У меня разрешен показ в Lightbox.

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

Источник информации по ссылке http://goo.gl/ysDVsp Будут вопросы, задавайте в комментариях или воспользуйтесь контактной формой для связи. Всего доброго.




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


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

0 коммент. :

Отправить комментарий

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

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

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

Имя

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

Сообщение *