Скрипт для увеличения масштаба на html. Скрипт для увеличения картинок на WordPress. Увеличение изображения при клике

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

Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью 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.

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

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

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

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

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

Увеличение картинки при нажатии с Highslide JS

При помощи скрипта Highslide JS разработанного норвежской компанией Highsoft AS помимо увеличения изображения при нажатии, можно создавать медиагалереи, всплывающие окна, работающие на html, ajax, Iframe и flash. Приступим к действиям. Идём на страницу загрузки скрипта http://highslide.com , скачиваем свежий архив, и распаковываем его.

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

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

В комментарии под цифрой один говорится о том, что нужно указать пути к файлам js и css, и они должны непременно быть расположены на нашем сервере. Удаляем комментарии, прописываем путь, где будет находиться каталог с файлами скрипта. Все двоеточия заменяем на название скачанного каталога - highslide-4.1.13. И файл highslide.js заменим на более функциональный highslide-full.js. Вдруг в будущем захочется использовать еще какие-нибудь плюшки Highslide JS. Во втором комментарии говорится о том, что важно указать путь к каталогу с графикой скрипта. И что здесь можно производить изменение настроек. Получится должно примерно так.

hs.graphicsDir = "/highslide-4.1.13/highslide/graphics/"; hs.wrapperClassName = "wide-border";

< ! -- Highslide JS -- > < link rel = "stylesheet" type = "text/css" href = "/highslide-4.1.13/highslide/highslide.css" / > hs . graphicsDir = "/highslide-4.1.13/highslide/graphics/" ; hs . wrapperClassName = "wide-border" ;

Теперь готовый код нужно разместить в секции head перед закрывающимся тегом. У себя на блоге, работающем на WordPress, я его разместил в файле footer.php используемой темы, перед закрывающимся тегом .

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

Добавляем текст к всплывающей картинке

Теперь выкинем все лишнее из каталога highslide-4.1.13.

Находим папку highslide, открываем ее и удаляем все кроме папки graphics, и подключаемых файлов highslide-full.js, highslide.css, highslide-ie6.css. Размещаем highslide-4.1.13 в корневом каталоге своего сайта. Скрипт готов к работе. Можно заливать картинки, размещать код скрипта на странице, и наслаждаться эффектом увеличения картинки при нажатии.

Для корректной работы скрипта Highslide JS в WordPress надо предварительно разрешить одну проблему. При переходе из html редактора в визуальный исчезает часть кода скрипта - onclick="return hs.expand(this)" .
Открываем файл functions.php используемой темы и добавляем следующий код внизу, перед?>.

// фильтр function change_mce_options($initArray) { $initArray["verify_html"] = false; $initArray["cleanup_on_startup"] = false; $initArray["cleanup"] = false; $initArray["forced_root_block"] = false; $initArray["validate_children"] = false; $initArray["remove_redundant_brs"] = false; $initArray["remove_linebreaks"] = false; $initArray["force_p_newlines"] = false; $initArray["force_br_newlines"] = false; $initArray["fix_table_elements"] = false; $initArray["entities"] = "160,nbsp,38,amp,60,lt,62,gt"; return $initArray; } add_filter("tiny_mce_before_init", "change_mce_options");

// фильтр function change_mce_options ($ initArray ) { $ initArray [ "verify_html" ] = false ; $ initArray [ "cleanup_on_startup" ] = false ; $ initArray [ "cleanup" ] = false ; $ initArray [ "forced_root_block" ] = false ; $ initArray [ "validate_children" ] = false ; $ initArray [ "remove_redundant_brs" ] = false ; $ initArray [ "remove_linebreaks" ] = false ; $ initArray [ "force_p_newlines" ] = false ; $ initArray [ "force_br_newlines" ] = false ; $ initArray [ "fix_table_elements" ] = false ; $ initArray [ "entities" ] = "160,nbsp,38,amp,60,lt,62,gt" ; return $ initArray ; add_filter ("tiny_mce_before_init" , "change_mce_options" ) ;

Сохраняем изменения, проблема решена.

Для удобства использования скрипта увеличения картинок при нажатии можно добавить дополнительные кнопки в html редактор WordPress.

Дополнительные кнопки в html редакторе для Highslide JS

Снова открываем файл functions.php используемой темы и вставляем следующий код, в самом низу, перед?>.

// Дополнительные кнопки html-редактор add_action("admin_print_footer_scripts", "add_sheens_quicktags"); function add_sheens_quicktags() { ?> if (QTags) { // QTags.addButton(id, display, arg1, arg2, access_key, title, priority, instance); QTags.addButton("add_div", "div", "", "", "d", "Тег div", 1); QTags.addButton("add_mo1", "mo1", "" , "", "m", "Увеличение картинки", 2); QTags.addButton("add_mo2", "mo2", "" , "", "m", "Подпись к картинке", 3); QTags.addButton("add_float-r", "float-r", "" , "", "f", "Обтекание картинки справа", 4); QTags.addButton("add_float-l", "float-l", "" , "", "f", "Обтекание картинки слева", 5); }