Увеличение изображение при нажатии html. Скрипт для увеличения картинок на WordPress. Установка скрипта для увеличения картинок
Здравствуйте уважаемые начинающие оптимизаторы.
В WordPress, по умолчанию, при клике на картинку, пользователь переводится на страницу картинки. Согласитесь — это очень неудобно, когда тебя вдруг перекидывает на другую страницу.
Для того, чтоб изображение увеличивалось прямо на той странице, на которой и находиться, на сайт нужно установить специальный скрипт.
Как он работает, можно посмотреть на картинке выше или на картинках в сайдбаре.
Найти его в интернете не проблема, но к сожалению у всех предложений есть один изъян. Код скрипта, при проверке в валидаторе, выдаёт ошибку.
Пришлось немного напрячься, и исправить эту ситуацию, так что дальше речь пойдёт о прекрасно работающем на всех шаблонах, и валидном скрипте.
Способ его установки, доступен даже для тех, кто ничего не знает о скриптах, и вообще о языках программирования.
Вместе с тем, он при отличном результате, позволяет обойтись без плагина, и предполагает обязательное заполнение тега alt , соответствующим текстом, а это очень хорошо скажется на оптимизации сайта.
Не секрет, что плагины тормозят скорость загрузки, так как многие из них размещают свои скрипты в блоке head .
А заполнять тег alt , зачастую просто недосуг. Тут же, хочешь не хочешь, а придётся вписать подходящий текст, так как он отобразится в виде подписи под увеличенной картинкой.
Можно просто задать нумерацию по странице, если изображений много.
Ещё одна фишка заключается в том, что скрипт увеличивает не всё подряд, а только те изображения на которые Вы укажете.
Удобно? Удобно. Ведь если картинка в оригинальном размере прекрасно умещается на странице, то зачем её увеличивать.
Переходим к установке.
Получить zip со скриптом можно совершенно бесплатно, просто скачав его с моего Яндекс Диска. Скачать
После этого его нужно закинуть в корень сайта. Коревая папка — это папка в которой находятся wp-admin, wp-content, и так далее.
Через FTP загружаем zip, распаковываем, после чего в директории появляются три файла, и одна папка.
Папку с zip нужно удалить. Так же, теперь нужно удалить, если был, плагин увеличивающий изображения.
Следующее действие, нужно сделать в файле footer.php . можно, не выходя с сервера, пройти wp-content — themes — Ваша тема — footer.php .
А можно зайти в консоль сайта, затем Внешний вид — Редактор — footer.php , или Подвал. И так и так можно.
В этом файле, в самом конце, перед тегом , нужно вставить следующий код:
(function(){
var boxes=,els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll("a");
Box..css");
Box..js",function(){
simplebox.init();
for(i=0,l=els.length;i
< 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);
}