На хабре появилась интересная статья о модификации изображений для сайта: организация preview для картинок, типы модификаций, например, как правильно настроить автоуменьшение изображений с людьми - в общем, почитать полезно. А из комментариев я вытащил парочку интересных скриптов на jQuery, реализующих модуль создания image thumbnail в визуальном режиме:
jCrop - несложный плагин к jQuery, позволяющий мышкой выделить участок изображения на исходной картинке, который будет вырезан и уменьшен для создания preview заданного размера:
Если с этим плагином почему-то не получится найти общий язык - не переживаем, есть функциональный аналог: imgAreaSelect, работающий, как нетрудно догадаться, тоже в связке с jQuery:
Если же вы твердо решили не мелочиться с визуальным форматированием размеров картинки и отдать всё в могучие руки скрипта, чтобы он делал всё на автомате - то их тоже есть: например, class.upload.php.
С видео вышла накладочка - очень хотел порекомендовать Open Standart Media Player (osmplayer, который нещадно глючил у меня в FF под Ubuntu). Однако, запустив его под виндой в FF 3.6.3 обнаружил те же грабли: при переключении видеороликов предыдущий не останавливается, а продолжает играть в фоне, загрузка обоих ядер процессора подскакивает до 90% - в общем, сырой пока продукт. Работа неплохая на самом деле, jquery для начинающих разработчикам читать не стоит, пожалуй, но стоило бы сначала протестировать перед запуском, рановато анонсировали =(
Очень зрелищный и эффектный плагин к jQuery: jsPlumb. Название можно перевести и как "отвес" и как "грузило", плагин вместе с jQuery UI позволяет "подвешивать" визуально связанные блоки в пространстве, причем расположение их динамическое - пользователь может произвольно перемещать их мышкой, сохраняя их связи. Несколько демонстраций показывают, как можно красиво оформить любую логическую схему со связями между элементами: от алгоритма программы до технологической схемы производства.
Дизайн блоков и внешний вид коннекторов полностью настраиваемый, я уже придумал с полдюжины применений для этого плагина: от детских интерактивных игрушек, до визуального моделирования интерфейсов.
Уверен, что jsPlumb - гарантированный кандидат в TOP10 jQuery plugins 2010, обязательно приложу к этому усилия!
И да, работает со всеми браузерами (IE6-8 и остальные), протестирован в 1.3.2 и 1.4.2 версиях jQuery, для поддержки canvas в IE использует Google′s ExplorerCanvas script.
Полку лайтбоксов прибыло: встречаем jQuery.popeye - inline lightbox, то есть эдакий всепогодный просмотрщик галереи изображений, гибрид лайтбокса и слайдера.
jQuery.popeye предлагает самое аскетичное решение для галерей - все картинки галереи больше не занимают драгоценное место на странице, а просматриваются в выделенном боксе в режиме слайдера. Картинки можно снабжать описаниями (caption), которые появляются во выдвигающемся слое при наведении курсора на изображение (в caption можно использовать html), ну а просмотр полноразмерного фото производится в привычном всплывающем окне - как с эффектами (затемнение бэкграунда, например), так и без оных.
В общем, штука получилась замечательная (см. демо), особенно уместно будет смотреться при оформлении новостных блоков на главных страницах сайтов, где и места мало и товар лицом показать хочется. Удачным, думается, ходом будет попробовать скрипт на витринах интернет-магазинов.
Скрипт снабжен подробной документацией, работает во всех современных браузерах, поддерживающих CSS3.
Nivo Slider - новый слайдер изображений с 9 эффектами, которые можно настраивать, а можно пустить в случайном порядке - изображения будут сменяться причудливо и неожиданно. Слайды проигрываются в автоматическом режиме до появления курсора в фокусе, после этого пользователь сам управляет прокруткой. Разработчики гарантируют работоспособность в Internet Explorer v7+, Firefox v3+, Google Chrome v4 и Safari v4, про Opera ничего не сказано, я протестировал работу скрипта в версии 10.10 - работает превосходно.
eLRTE - это свободный WYSIWYG редактор для сайтов и систем управления контентом (CMS), написанный на JavaScript с использованием jQuery UI. Российские разработчики Студия 42 создали полностью кросс-браузерный продукт, работающий под всеми современными версиями популярных браузеров, мне результат понравился. Есть Wiki-документация, кастомизация тулбара пока не такая продвинутая, как в TinyMCE, на выбор предлагаются несколько пресетов, если сделают тулбар полностью настраиваемым - с удовольствием буду использовать продукт во всех своих проектах.
elFinder - это файловый менеджер для веб-приложений, написанный на JavaScript с использованием jQuery UI. Продукт той же студии, что и eLRTE, естественно, что встраивается в него как родной, впрочем вполне пригоден и для самостоятельного использования. Демо выглядит привлекательно, нужно потестировать.
yox-view - Lightbox-style просмотрщик изображения для веб-страниц. Отличительными чертами является грамотное масштабирование просматриваемых изображений и фоновая загрузка соседних с просматриваемой картинок для сокращения времени ожидания загрузки.
Загрузка файлов на сервер через форму на веб-странице всегда сопряжена с некоторой неуверенностью - а тот ли документ отправлен? Небольшой скрипт от Zurb.com позволит избавиться от неуверенности по крайней мере при загрузке изображений - уменьшенное изображение выбранного файла вы увидите на странице еще до загрузки:
Ну и на сладкое: tiny-tips - еще один tooltip на jQuery - маленький, неглючный, теперь с прозрачностью и картинками в теле:
Довольно простой слайдер изображений на jQuery, в автоматическом режиме прокручивает (в прямом смысле - справа налево, а потом резко всё возвращает взад!) изображения в заданном окне, на панели индикации имеются ссылки на конкретную картинку для ручного переключения. Источник, демо.
Animate Panning Slideshow with jQuery - интересное решение, хотя и менее гибкое: ровно 4 изображения участвуют в слайдшоу, не больше и не меньше. Зато перемещаются картинки в рабочем пространстве довольно затейливо (на скриншоте как раз пойман момент перехода), что радует глаз и вносит новизну. Источник, демо.
Еще одно компактное применение jQuery для построения красивого текстового меню с анимированными эффектами. Источник, демо.
Easy way to Slide Images with Overlay Caption - ещё один скрипт, организующий набор картинок в слайд-шоу, но теперь осмысленное - с заголовками, см. демо.
Caption часто переводят как "титры", также можно прочитать это слово как "подпись" или "заголовок", в вебе же обычно это слово упоминается в значении "подпись под картинкой". 10 интересных использований caption для оформления изображений, с помощью jQuery разумеется, собрано в заметке 10 Stylish jQuery caption plugins, мне лениво тут всё перепечатывать, просто отметим - способов много, есть из чего выбирать!