Еще одна реализация вставки нескольких картинок с текстом (custom TV).

Выглядит так.

Ссылка для скачивание — MultiPhotosText
Сделано через custom TV.
Требует установленного плагина TINYMCE.
Используется jQuery и jQuery UI.
Сниппет готового нет, но трудностей с его написанием не должно быть по примеру multiphotos.
Результат сохраняется в json строке:
{«1»:{«img_url»:«путь к картинке», «text»: «сам текст»}}

Можно сортировать картинки, перетаскиваются за серое поле.
Написал для использования в карусели где есть картинки плюс текст с небольшими элементами форматирования.
Есть проблемы, после того как прикрутил возможность сортировки вылезли косяки (надеюсь исправить в следующей версии).
1) При первой попытке перетащить картинку экран дергается, пока не отследил почему.
2) При перетаскивании не видно текста, когда отпускаешь кнопку мышки текст встает на свое место. Это известная проблема с TINYMCE.
3) Не всегда картинки меняются местами, особенно это касается если хочешь поставить картинку первой или последней. В середину перемещаются легко. Если две картинки проще добавить третье поле, поменять местами и удалить пустое поле.
(Пытался исправить ситуацию с помощью параметра distance в jquery ui sortable не помогло)
4) Дизайн, не с первого взгляда понятно что можно сортировать, плюс мелкие кнопки для добавления/удаления картинки.

Манипуляций с самими картинками (изменения размера, обрезание) не происходят. Считаю что картинки для галерей необходимо готовить дизайнеру.

3 комментария

avatar
Прикольно но как по мне лучше допилить multiTV что б в него можно было вставлять tinyMCE4 ) таким боком оно перекроит функционал на все 100 )
avatar
Возможно вы правы. Когда избавлюсь от основных мелких косяков попробую наработки прикрутить к multiTV.
avatar
Подправил код, теперь одной странице можно назначать несколько TV параметров с типом MultiPhotosText
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.