seversantana.ru » Скрипты, хаки, полезные решения » Скрипт увеличения картинки при нажатии

Скрипт увеличения картинки при нажатии

[contents]

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

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

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

Первое, что мне понравилось я нашёл на блоге АлаичЪ’а. Эффект увеличения работает на jQuery Fancybox. Все расписано, как сделать правильно и чтобы работало. После небольшого колдовства над файлами все заработает как в уже размещённых изображениях, так и планируемых. Можно под свой сайт или предпочтения настроить эффекты вывода отображений. Как выглядит визуально эффект увеличения с jQuery Fancybox, и как это настроить смотрите на блоге Александра Алаева.

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

Увеличение картинки при нажатии с 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. Во втором комментарии говорится о том, что важно указать путь к каталогу с графикой скрипта. И что здесь можно производить изменение настроек. Получится должно примерно так.

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

hs.graphicsDir = '/highslide-4.1.13/highslide/graphics/';

hs.wrapperClassName = 'wide-border';

</script>

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

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

<div>
<a href="Путь к большой картинке" class="highslide" onclick="return hs.expand(this)"><img src="Путь к миниатюре" alt="Прописываем alt" title="Прописываем тайтл" height="120" width="107"/></a><div class="highslide-caption">Добавляем текст к всплывающей картинке</div></div>

1 2	<div> <a href="Путь к большой картинке" class="highslide" onclick="return hs.expand(this)"><img src="Путь к миниатюре" alt="Прописываем alt" title="Прописываем тайтл" height="120" width="107"/></a><div class="highslide-caption">Добавляем текст к всплывающей картинке</div></div>

Теперь выкинем все лишнее из каталога 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() {
?>
    <script type="text/javascript">
      if (QTags) {  
        // QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
		QTags.addButton( 'add_div', 'div', '<div>', '</div>', 'd', 'Тег div', 1 );
		QTags.addButton( 'add_mo1', 'mo1', '<a href="Путь к картинке" title="Прописываем тайтл" class="highslide" onclick="return hs.expand(this)"><img alt="Прописываем alt" src="Путь к картинке" width="730"/></a>' , '', 'm', 'Увеличение картинки', 2 );
		QTags.addButton( 'add_mo2', 'mo2', '<div class="highslide-caption">' , '</div>', 'm', 'Подпись к картинке', 3 );
		QTags.addButton( 'add_float-r', 'float-r', '<div style="float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 5px; ">' , '</div>', 'f', 'Обтекание картинки справа', 4 );
		QTags.addButton( 'add_float-l', 'float-l', '<div style="float:right; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px; ">' , '</div>', 'f', 'Обтекание картинки слева', 5 );
      }
    </script>
<?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', '<div>', '</div>', 'd', 'Тег div', 1 );

QTags.addButton( 'add_mo1', 'mo1', '<a href="Путь к картинке" title="Прописываем тайтл" class="highslide" onclick="return hs.expand(this)"><img alt="Прописываем alt" src="Путь к картинке" width="730"/></a>' , '', 'm', 'Увеличение картинки', 2 );

QTags.addButton( 'add_mo2', 'mo2', '<div class="highslide-caption">' , '</div>', 'm', 'Подпись к картинке', 3 );

QTags.addButton( 'add_float-r', 'float-r', '<div style="float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 5px; ">' , '</div>', 'f', 'Обтекание картинки справа', 4 );

QTags.addButton( 'add_float-l', 'float-l', '<div style="float:right; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px; ">' , '</div>', 'f', 'Обтекание картинки слева', 5 );

}

</script>

<?php

}

Обратите внимание на то, что в кнопке mo1 я проставил максимально допустимую ширину отображения миниютюры для своего блога width=»730″. Если мне требуется миниатюра меньше, я просто меняю значение. Замените допустимую ширину на своё значение. Можно также проставить и высоту.

Сохраняем, идём в текстовый редактор, видим следующее.

Добавление дополнительных кнопок редактора

Используем кнопки div, mo1, mo2, float-l, float-r, нужный код скрипта Highslide JS теперь можно выводить быстро и удобно. Осталось прописать путь к картинкам, заполнить title, alt, и написать дополнительный текст к изображениям.

Можно создать собственную конфигурацию скрипта используя Highslide JS редактор. Я для своего блога именно так и поступил.

Использование редактора Highslide JS

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

Жмём на зелёную кнопку Get started!

Пошагово о том, как пользоваться редактором Highslide JS. Краткие рекомендации.

По умолчанию откроется вкладка General.

General

Language

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

Load example

Выбираем вариант отображения увеличения картинки при нажатии. Жмём на кнопку со стрелочкой, во всплывающем окне появятся варианты. Останавливаемся на понравившемся. Их всего четыре идущие первыми. Остальные для других задач — отображение галереи, всплывающих окон. Я использовал No border, simple close button.

White rounded outline
White border and drop shadow
No border, simple cloze button
No outline, coloured CSS borders

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

Gallery и HTML

Эти два пункта я пропустил так как, пока они в мои задачи не входят. Меня интересует пока только увеличение картинки при нажатии.

Style

Thumbnail
Explanation label

Настройка внешнего вида и эффектов миниатюры.

Три настройки на выбор. Можно вывести подсказки под миниатюрой.

None — без подсказки, Text bellow — с поясняющим текстом, Icon and text below — с картинкой и текстом. Мне кажется, подсказки это лишнее.

Кнопка Thumbnail border

Нажав на эту кнопку можно настроить толщину и цвет бордюров миниатюры.
Loading label
Label style

Ставим галочку в предварительном просмотре, и выбираем отображение значка загрузки. Это на тот случай, если нажатие на изображение произведено, а её увеличение не спешит показываться.
Popup styles
Background

Здесь можно изменять вид всплывающего окна. Менять фон подписи изображения. Изменять ширину и цвет бордюров увеличенного изображения.
Dimming
Apply page dimming mask

Хотите чтобы при нажатии на картинку для увеличения фон страницы затемнялся, ставьте в этой настройке галочку в чекбокс. Нажав на Dimming options, настраиваем опции затемнения, выбираем цвет.

Behavior

В Behavior настраиваем поведение всплывающего окна.
Animation
Easing
Четыре варианта анимации при выводе увеличенного изображения.

Кнопка Advanced animation

Настраиваем скорость появления и исчезновения увеличенной картинки.

Hide thumbnail on expand (not gallery)

Если напротив этого пункта поставить галочку при увеличении изображения сама миниатюра будет невидимой.
Popup size and alignment
Настройка размеров увеличивающегося окна и его выравнивание.

Alignment

Выбираем вариант по умолчанию выравнивания увеличенной картинки. Я выбрал вывод увеличенного изображения на странице — avto.

Кнопка Advanced align

Нажав на эту кнопку можно выставить настройки ширины и высоты минимального, максимального и фиксированного размера изображения. Настроить отступы — top, right, bottom, left.

Overlays

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

Заголовок у меня берётся с тайтла большого изображения, подпись с текста, обёрнутого в div.

Со следующих двух пунктов я убрал галочки. Close button — отображает крестик на закрытие в правом верхнем углу. Show credits — выводит неброскую ссылку на сайт разработчиков.

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

Редактирование файлов сайта, интеграция скрипта

Подключаем собственную конфигурацию скрипта, выполнив три рекомендуемых шага.

Сначала открываем вкладку Publish в окне с примером, жмем на Yes, скачиваем архив с собственной конфигурацией на компьютер кликнув на Download a zip archive. После этого распаковываем его, и пока оставляем в покое. Копируем содержимое Step2 и Step3 в созданный текстовый файл для последующего редактирования, закрываем окно.

Для работы скрипта нам надо указать пути к файлам непосредственно на него, папку с графикой и стили CSS прописав код в секции head на страницах сайта. Это код скопированный из Step2, приступаем к его редактированию. В моем случае он выглядел так:

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

<script type="text/javascript"></script>

1	<script type="text/javascript"></script>

Далее, открываем вкладку View JavaScript копируем код расположенный вверху перед языковыми настройками, и вставляем его, перед тегом </script>.
Размещаем отредактированный код на страницах сайта в секции head. Как я уже говорил в WordPress я разместил его в файле footer.php используемой темы перед закрывающимся тегом </body>. Мой готовый код выглядит следующим образом:

<!-- Highslide JS -->
<script type="text/javascript" src="/highslide/highslide-full.packed.js"></script>
<script type="text/javascript" src="/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
	hs.graphicsDir = '/highslide/highslide/graphics/';
	hs.showCredits = false;
    hs.outlineType = null;
    hs.dimmingOpacity = 0.7;
    hs.fadeInOut = true;
    hs.headingEval = 'this.a.title';
</script>

<!--[if lt IE 7]>

<![endif]-->

hs.graphicsDir = '/highslide/highslide/graphics/';

hs.showCredits = false;

hs.outlineType = null;

hs.dimmingOpacity = 0.7;

hs.fadeInOut = true;

hs.headingEval = 'this.a.title';

</script>

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

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

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

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