Скрипт для увеличения картинок на WordPress. Cкрипт увеличения картинки при нажатии

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

Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.

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

Увеличение изображения на сайте 1 способ – увеличение изображения на сайте при наведении курсора

Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:

Onmouseover="this.style.width="значение ширины большого изображения px"" onmouseout="this.style.width="значение ширины маленького изображения px""

При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.

2 способ – увеличение картинки на сайте при клике мыши

Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:

Style="width: "значение ширины маленького изображения px; border:2px solid black;" onclick="this.style.width=значение ширины большого изображения px "" onmouseout="this.style.width="значение ширины маленького изображения px""

Полностью это будет выглядеть так

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

Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.

Вообще, я считаю, многое веб-мастера не ограничиваются просто использованием какого-либо движка и применяют html-коды на своих сайтах.

Читайте также:

2015-10-27T16:07:59+00:00 Надежда Скрипты и коды увеличение изображения на сайте,увеличение картинки на сайте

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

Надежда Трофимова [email protected] Administrator Блог сайт Возможно Вас также заинтересует:

Убираем с главной страницы и RSS записи рубрики

Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.

Хлебные крошки на сайте wordpress

Хлебные крошки на сайте - что это и как сделать?

Как сделать тень у текста за 5 минут

Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста.

Как сделать кнопку скачать с помощью кода css

Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css.

Как сделать кнопки вверх вниз для сайта

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

Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.

1. Увеличение изображения через ссылку адрес-изображения-или-меньшей-копии "/>

Пояснение к примеру:

• - для того, чтобы ссылка не передавала вес изображению;
• target="_blank" - изображение откроется в новой вкладке.

Последний параметр довольно важен, поскольку зачастую из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. Прописав последний параметр, мы его подстраховываем от такого случая, ведь у него останется открыта начальная страница.

Пример работы:

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

2. Автоматическое увеличение изображение при наведении курсора

Название способа четко отражает его суть: при наведении курсора мышки на изображение оно автоматически зуммируется. Реализация метода элементарная, но опять-таки этот способ мне не нравится тем, что невозможно просто провести курсор через изображение. Ведь оно всегда будет увеличиваться - это может начать раздражать пользователя.

Следующий код реализует возможность автоматического зуммирования при наведении курсора:

img.zoom { cursor : pointer ; max-width : 150px ; } img.zoom:hover { max-width : none ; }

Пояснения к примеру:

• img.zoom {max-width: 150px } - задает ширину изображения до увеличения;
• img.zoom:hover {max-width: none } - задает ширину изображения после увеличения (параметр none означает, что ограничение на максимальный размер отсутствует);

3. Увеличение изображения при клике

Это самый распространенный и удобный метод увеличения изображений. Причем здесь существует множество способов и вариантов реализации. Рассмотрим несколько самых популярных вариантов:

3.1. Увеличение при активном фокусе

После клика мышкой на изображение оно увеличивается, однако из-за этого съезжает текст вниз, поэтому этот способ далеко не лучший. Приведем пример кода:

.foc { width : 150px ; cursor :pointer ; display :inline ; } .foc:focus { width : auto ; z-index : 100 ; }

Как это выглядит на странице:

3.2. Увеличение изображения поверх страницы

Ниже приведен код для реализации этого метода

.blokimg { position : relative ; } .overlay { display : none ; height : auto ; left : -15% ; position : absolute ; top : -50% ; width : auto ; z-index : 999 ; } .overlay .overlay_container { display : table-cell ; vertical-align : middle ; } .overlay_container img { background-color : #AB5 ; padding : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; } .overlay:target { display : table ; } большое_изображение "/> маленькое_изображение " id ="imagenM1 " />

Как это выглядит на странице:

Варианты 3.1 и 3.2 полностью основаны на возможностях CSS, а значит являются "лайт" способами, т.к. не нагружают страницу лишними скриптами. Есть и другие варианты, которые также основаны на CSS, однако, они уже более экзотические. Я не буду рассматривать их в рамках этой статьи, поскольку некоторые браузеры не поддерживаются подобные вещи.

3.3. Красивое увеличение

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

В архиве будет одна папка содержащая изображение, два файла.js и один.css.

2) Добавьте эти файлы к себе на сайт так, как они есть в архиве (т.е. папка imgs должна лежать в директории где будут файлы.js и.css).

3) На каждой странице сайта, где будет использоваться увеличение изображения, необходимо подключить метод и стиль simplebox:

(function(){ var boxes=,els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Box.getScripts("simplebox_js","simplebox.js",function(){ simplebox.init(); for(i=0,l=els.length;i адрес_меньшей_копии_изображения ">

Примечание
Вместо адреса меньшей копии изображения можно прописать адрес основного изображения, но при этом применить атрибут width, в котором указать небольшую ширину (читайте подробнее о ).

Всем привет дорогие друзья читатели! В этом уроке я поговорю с вами о том как сделать на сайте wordpress увеличение картинки при нажатии курсора на нее.

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

Соответственно будет две части.

Дело в том, что при добавлении картинок на сайт, особенно если они большие, WordPress при нажатии мышкой на них, открывает каждую из них в новой вкладке. Это, откровенно говоря, не очень удобно и не правильно. Поскольку вы создаете под названием attachments (вложения). Т.е каждая картинка – это отдельная страница вложения, которая индексируется. У нас они и так хорошо сканируются поисковыми роботами, поскольку папка uploads для у нас открыта в файле . Сегодня мы разберемся с этим вопросом и подскажем, как правильно организовать на сайте увеличение картинки при нажатии на блоге вордпресс.

Давайте прямо сейчас приступим к освоению урока на практике. Предлагаю посмотреть содержание данной заметки.

Установка скрипта для увеличения картинок

Начнем с выполнения первого шага – установки скрипта на сайт. Он очень легкий практически ничего не весит и не создаст нагрузку на ваш блог. Скачать вы его может по этой ссылке.

После того как скачали, вам нужно загрузить его к себе на блог. Зайти вы можете двумя способами как по фтп доступу, так и через панель . Я предпочту второй вариант. Загружать файлы скрипта мы будем в специально созданную папку lib (библиотека – library сокр., примечание автора). Создадим ее по самому ближайшему пути, т.е после public_html или www (в зависимости от вашего хостинга).

Отлично заходим в нее и копируем туда все файлы из архива.

С этим шагом разобрались и сейчас переходим к следующему этапу.

Добавление кода скрипта на блог

Чтобы наш скрипт увеличения картинки при нажатии заработал, нам нужно подключить небольшой фрагмент кода в шаблон блога. Для этих целей я рекомендую воспользоваться шаблоном подвала сайта (footer . php ). Вот этот код вам нужно подключить к себе на сайт:

(function(){ var boxes=,els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","http://local..css"); Box.getScripts("simplebox_js","http://local..js",function(){ simplebox.init(); for(i=0,l=els.length;i

А вот, что получилось у меня:

(Кликабельно)

А теперь самое интересное .

Чтобы скрипт увеличивал картинки без потери качества нужно:

1. После закачки изображения в статью необходимо открыть "Параметры изображения " и в пункте "Ссылка " выбрать "Медиафайл " .