Вопрос № 163156: Здравствуйте..наверное все уже знают что такое lightbox (скрипт. который при клике на изображении выдает его полноразмерную версию с визуальными эффектами)<img src="http://rusfaq.ru/images/Forum/5.gif" border="0"> ..так вот, я хочу написать свой, но ...
Вопрос № 163.156
Здравствуйте..наверное все уже знают что такое lightbox (скрипт. который при клике на изображении выдает его полноразмерную версию с визуальными эффектами) ..так вот, я хочу написать свой, но только заточенный немного под себя..не знаю с чего и как начать Прошу кто знает помочь в этом вопросе...Я так понимаю тут нужно выделить следующие моменты: 1)сделать ссылку на полноразмерную версию 2)анимацию
при открытии (плавный показ полноразмерной версии) 3)затемнение всего что находится за картинкой 4)закрытие полноразмерного изображения при клике Может что то еще есть...Заранее благодарен за ответы..Прошу не советовать использовать готовый lightbox..хочу сделать сам
Отправлен: 24.03.2009, 17:43
Вопрос задал: psevdo (статус: 1-й класс)
Всего ответов: 1 Мини-форум вопроса >>> (сообщений: 0)
Отвечает: BahuL
Здравствуйте, psevdo! Ну для начала могу коротко описать метод работы лайтбокса... Создается набор маленьких картинок(превьюшек), каждая заключена в свой тег а с определенным параметром rel = "lightbox" и href который указывает на большую картинку. В подключаемой библиотеке lightbox.js в низу есть функция которая вешает включение лайтбокса после того как страница полностью загрузится, а точнее он вешает себя на window.onload. В своей функции инициализации он на все теги <a> с rel
= "lightbox" вешает свою онклик функцию var anchors = document.getElementsByTagName("a");
// loop through all anchor tags for (var i=0; i<anchors.length; i++){ var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ anchor.onclick = function () {showLightbox(this); return false;} } }
стоит отметить что эта онклик функция
кроме вызова затемнения и показа картинок, еще и запрещает браузеру перейти по ссылке вернув по онклик значение false. Теперь про затемнение. Для этого они создают с помощью яваскрипта див с абсолютным позиционированием и размерами равными размерам веб страницы. при нажатии на маленькую картинки Див выводится поверх всех элементов страницы(прозрачность достигается с помощью Для всех браузеров #overlay{ background-image: url(overlay.png); } Для эксплорера * html #overlay{ background-color:
#000; background-color: transparent; background-image: url(blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); } ).
В центре этого дива находится другой див в котором и рисуется большая картинка и элементы управления типа туда, сюда, закрыть. Это основное... Думаю написанное мною выше поможет Вам определиться с чего начать писать.
Ответ отправил: BahuL (статус: 3-й класс)
Ответ отправлен: 24.03.2009, 18:19
Как сказать этому эксперту "спасибо"?
Отправить SMS
#thank 245971 на номер 1151 (Россия) | Еще номера >>
Вам помогли? Пожалуйста, поблагодарите эксперта за это!
Скажите "спасибо" эксперту, который помог Вам!
Отправьте СМС-сообщение с тестом #thank НОМЕР_ОТВЕТА
на короткий номер 1151 (Россия)
Номер ответа и конкретный текст СМС указан внизу каждого ответа.
* Стоимость одного СМС-сообщения от 7.15 руб. и зависит от оператора сотовой связи.
(полный список тарифов)
** При ошибочном вводе номера ответа или текста #thank услуга считается оказанной, денежные средства не возвращаются.
*** Сумма выплаты эксперту-автору ответа расчитывается из суммы перечислений на портал от биллинговой компании.