2009

23
ноября

jqery на службе блоггера. Как увеличить картинку при наведении

Автор статьи: admin | Просмотров: 4,822 | Комментарий: 1

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

Закат

Закат

Сам я в языках программирования для вэб, таких как php, Java Script не разбираюсь, поэтому обратился за помощью к специалисту по вэб – программированию.

Авторские права на предоставленный материал принадлежат автору сайта http://extremallife.ru

Он посоветовал мне для этой цели использовать скрипты jquery.js, которые как раз таки предназначены для подобных вещей.

Так же он сказал, что более грамотно было бы загружать на страницу маленькие изображения, и их большие копии, при отображении страницы загружаются маленькие картинки, а при наведении уже подгружаются их большие копии с помощью технологии ajax. Но так как мой блог «крутится» на wordpress, то здесь не получится так сделать с минимальным вмешательством, поэтому грузятся изображения, отображаются в уменьшенном масштабе, а при наведении всплывают окна с изображением в натуральную величину.

Как же сделать чтобы при наведении на картинку всплывало окно с увеличенным изображением?

Можно сделать по разному. Я же сделал это с помощью java скриптов.

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

Сами скрипты я скачал из нета и мне их переделали под мои нужды. Скачать скрипты можно по ссылке.

Редактор тем wordpress

Редактор тем wordpress

Для подключения скриптов заходим в админку wordpress, Внешний вид, Редактор. Ищем в установленной теме файл, в котором прописаны теги <head> и <body>. В моем случае это – header.php,  и прописываем строки:

header.php

header.php

В HEAD

<script type=»text/javascript» src=»/wp-content/jquery.js»></script>

В BODY
<script type=»text/javascript» src=»/wp-content/js/jquery.zimage.js»></script>

Предварительно необходимо скопировать файлы скриптов в папку wp-content/js или в любую другую, на которую прописан путь.

Вот в принципе и все. Далее остается при добавлении изображения прописывать ему дополнительный класс – zimage

устанавливаем класс zimage

устанавливаем класс zimage

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

Рубрики: Вопросы и ответы, Новости


Комментарии

Один комментарий в “jqery на службе блоггера. Как увеличить картинку при наведении”

  1. 1
    игорь пишет:
    сентября 7, 2011 at 11:59

    файлы с депозита удалены… перезалей их или вышли из мне на почту…заранее спасибо

Выскажи свое мнение