В один из осенних вечеров, поступила задача такого содержания: "Хочу чтобы все фотографии в новостях открывались в модальных окнах!". Вскрытие показало, что новостей много, фотографии вставлены прямо в контент. Редактировать каждую новость и и обрамлять изображения ссылкой, прописывая класс для открывания в модальном окне дело весьма не простое, и я бы сказал не правильное. Да бы упростить весь процесс накидал простенький скрипт, который автоматически обрамляет все изображения внутри заданного тега.
Подключаем fancybox или colorbox, или еще что либо экзотическое. Тут не про это.
и пишем вот такой код:
Подключаем fancybox или colorbox, или еще что либо экзотическое. Тут не про это.
и пишем вот такой код:
$(document).ready(function() { $('.imgcolorbox img').each(function(){ /* все изображения внутри тега с классом imgcolorbox будут открываться в модальном окне */ var href = $(this).attr("src"); $(this).wrap(''); }); /*инициализация модального окна */ $('.colorbox').colorbox( {rel:'group1'} ); });
Комментариев нет:
Отправить комментарий