По клику увеличение картинки

по клику увеличение картинки
по клику увеличение картинки
по клику увеличение картинки


Как увеличить картинки по клику без потери качества? — toster. Ru.

Стоит задача сделать презентацию где рассматривается сайт, на одном из слайдов представлены основные страницы сайта в.


Как увеличить изображение: варианты на css и javascript.

1 июл 2011. Ограничить высоту картинки с помощью свойства css max-width. Использование css3: увеличение фотографии при клике.


Увеличение картинки по клику, в виджете "карточка" и "товар.

5 апр 2018. В конструкторе ukit, в виджете «товар» нет плавного увеличения картинок, но для многих разработчиков сайтов эта функция.


Как сделать увеличение изображения по клику в каталоге файлов?

12 мар 2015. Нужно сделать кликабельные картинки в каталоге файлов, какой скрипт и куда добавить что бы не. Редактировать каждый фильм не.


Sp thumbnail плагин увеличения изображений для joomla 2. 5/3. 0.

14 апр 2012. Изображения могли увеличиваться при клике, кроме указанного. Плагин увеличение изображений при клике для joomla 2. 5 и 3. 0. Sigplus image gallery plus фотогалерея для joomla 1. 5/2. 5/3. 0 · imagesizer для.

по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки по клику увеличение картинки
По запросу «по клику увеличение картинки» нашлось 95149 фото

По Клику Увеличение Картинки

Как сделать плавное увеличение картинки при клике.

Автор: андрей краснокутский. Дата: 2011-08-06. Кликаем по картинке и она плавно увеличивается в размерах. Одно из коленно локтевая позиция фото новшеств современного веб-дизайна – это применение на сайте модальных окон, наверняка вы уже неоднократно видели такой эффект: картинка (фотография, изображение, рисунок и т. Д. ) при клике по ней, открывается в отдельном окне, на затененном фоне. Смотрится очень эффектно. Поэтому и называется такой эффект – модальные окна. Ниже приведен пример использования модального окна. Кликните по картинке ниже. Реализуется подобный эффект с помощью javascript, а точнее с помощью jquery. Поэтому для правильного отображения модальных окон, в ваших браузерах обязательно должна быть включена поддержка сценариев "javascript" обязательно это проверьте.
В ie javascript включается здесь: сервис / свойства обозревателя / далее кнопка: другой / выполнять сценарии приложения java / включить. Модальное окно для изображения. Для реализации модального окна, нам понадобится изображения одной картинки, но 2-х разных размеров (уменьшенное и большое, то которое будет открыться в модальном окне). О подготовке графических файлов, я уже рассказывал ранее в статье: как подготовить изображение для сайта. Считаем что эти графические файлы у вас уже есть. У меня это два разных файла: sait180. Jpg и sait600. Jpg, размеры этих файлов соответственно: 180x113 и 600x375 пикселей. Размеры взяты примерные и у вас эти размеры могут отличаться.
Картинка взята случайным образом (первая попавшаяся), чисто для примера. Положите эти файлы в папку, в которой у вас на сайте лежат все изображения на сайте, обычно это папка images или img. Для ясности считаем что это папка images. Теперь скачайте архив со скриптами. После распаковки архива папку с названием "fancybox" скопируйте и положите в «корневую» папку сайта. Открываем html-документ, в который мы будем монтировать модальные окна и вставляем между тегами и следующий код листинг 1: Листинг 1. . Хотя этот код не привередлив и его можно прописать и в другом месте web-страницы, работать будет, но всетаки, лучше между и . Первая строка: это подключение таблицы стилей css, которая лежит в папке "fancybox".
Три последующие это "яваскрипты". Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно. В этом уроке мы научимся делать модальные окна из одной картинки и из группы картинок. А в следующих уроках разберемся как втавлять в модальные окна видео и контент. Поэтому сильно не заморачивайтесь, а вставляйте код листинга 1 в код web-страницы между и и идем дальше. Опускаемся ниже по коду и в то место web-страницы, где вы хотите вставить маленькое изображение, при нажатии на которое будет открываться модальное окно, прописываем следующий код листинг 2. Листинг 2.
. Не забудьте изменить параметры title и прописать путь до своих реальных файлов.

Вот собственного говоря и все.

Обновляем web-страничку на сервере и радуемся полученным результатам. Еще раз смотрим, что у нас получилось: Конечно картинки здесь будут ваши. С одиночной картинкой разобрались, теперь разберемся с группой изображений. Модальные окна для нескольких изображений. Давайте сначала посмотрим конечный результат, который у нас должен получиться. Кликайте по изображениям: Процесс подготовки изображений, такой же как и одиночном примере, т. Е. Каждое изображение должно быть 2-х размеров: маленького формата фото блокадного ленинграда дети и большого формата. Все эти изображения тоже ложим в папку images. С подключением скриптов мы разобрались выше, смотрите листинг 1.
В том месте web-страницы, где вы хотите вывести группу изображений, вставляем код листинга 3. Листинг 3.
.
И вот что получаем в итоге, еще раз смотрим на результат: Согласитесь, симпатично получилось. И как вы убедились, сделать такие окна совсем не сложно. Кстати в открытых модальных окнах по бокам появляются стрелочки (при наведении мышки) для перехода к следующей картинке. P. S. В листинге 3 прописано три картинки, но как вы наверное уже поняли, прописать таких картинок можно сколько угодно, просто добавляя новую строчку кода: для каждой новой картинки. И конечно же нужно указать реальный путь до картинки и имя графических файлов.

Всего вам доброго. Читайте так же другие наши материалы.

Устанавливаем флеш часы на сайт. Фоновые изображения для сайта в стиле мрамор. Как сделать скриншот (снимок) с экрана монитора нужного размера? Сайт своими руками за 9 часов 45 минут! Как издать (выпустить) собственную электронную книгу? Просмотров: 120633. Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): андрей дата: 2011-08-07. А как вам такое представление картинок в мини слайд шоу http://auto-schol. By/brabus_mercedes-benz-e-class-cabriolet.
Html есть возможность увидеть все картинки в мини, при нажатии на цент картинки появляется в натуральную величину. Комментарии добавил(а): александр дата: 2011-08-07. Как всегда всё на высшем уровне, вы андрей настоящий кландайк знания! С уважением александр. Комментарии добавил(а): олег гузь дата: 2011-08-07. Здорово, андрей! Мне понравилось! Комментарии добавил(а): нина дата: 2011-08-08. Здавсвуйте. Не знаю чл получися у меня, но у вас на сайте при нажатии на картинку которую вы приводите в качестве примера ничего не происходит,кроме того что темнеет экран манитора и комп зависает. Комментарии добавил(а): александр дата: 2011-08-08.
Все отлично. Буду пробовать вставлять свои картинки. Комментарии добавил(а): антон дата: 2011-08-09. Здорово, у меня все классно работает, спасибо андрей большой вам респект и успехов. Комментарии добавил(а): нина дата: 2011-08-09. Отличая галерея для браузеров опера и фиркфокс-всё как по маслу. Но я проверила через ie-6 ie-7 и vistu. В них этот скрипт не рабоет. Я в инет всегда выхожу через ie-7, так сразу видно у кого какое качество сайта,и вижу на некоторых сайтах более сложные галереи. Комментарии добавил(а): нина дата: 2011-08-09. Как бы сделать такую галерею, как здесь http://www. Zecho.

Ru/ да что бы она работала во всех браузерах?

Комментарии добавил(а): андрейк дата: 2011-08-10. Нина вы путаете, это не скрипт галереи, а скрипт модальных окон. Это абсолютно разные вещи и выполняют они разные задачи. И конечно же реализуются тоже по разному. Комментарии добавил(а): вячеслав дата: 2011-08-15. Спасибо, андрей! Есть вопрос: изменение фона картинки не здесь ли папка: fancybox -> файл: jquery. Fancybox. Css -> строка: background-color: #666;. Комментарии добавил(а): mery дата: 2011-08-15. Супер, работает без проблем.
Спасибо за предоставленное готовое решение! Всех благ автору! Комментарии добавил(а): инга дата: 2011-08-19. Подскажите, плиз, а какой параметр затемняет экран, хочется немного темнее сделать фон за модальным окном. Комментарии добавил(а): tigerbuk дата: 2011-09-13. Приветствую! Всё чётко и понятно. Ты анонсировал что расскажешь как вставить видео в такое вот окошко. Очень хотелось бы посмотреть! Комментарии добавил(а): роман дата: 2011-10-04. Андрей, спасибо огромное за хороший урок.
Но у меня вопрос. Все картинки работают, но мне надо как то поменять код, что бы изначально картинки были не в центре экрана, а на тех заранее запланированных мной местах, куда я их расставил. Как это можно сделать? Комментарии добавил(а): роман дата: 2011-10-04. Прошу прощения за беспокойство. Все, разобрался что к чему. Огромное спасибо еще раз. Комментарии добавил(а): вячеслав дата: 2011-10-09. Великолепно!!! Комментарии добавил(а): qwinmen дата: 2011-10-12.

Спасибо. Комментарии добавил(а): юрий дата: 2011-10-18.

Доброго времени суток. Ситуация такая: мне необходимо сделать, чтобы увеличенная картинка приобретала свои истинные размеры, а не вписывалась по высоте экрана. Как это сделать? Комментарии добавил(а): nextim дата: 2011-11-16. Как увеличивать картинки не прописывая их в коде? Картинка загружается пользователем в папку через сайт и эта картинка должна увеличиваться. Комментарии добавил(а): максим дата: 2011-11-25. Автору кода респект. Отлично. И понятно без глюков. Комментарии добавил(а): андрейк дата: 2011-11-25. Максим я согласен с вами, авторам большой респект, но я не автор, а всего лишь рассказываю на доступном языке как использовать библиотеку jquery.
А про авторов здесь: http://www. Luksweb. Ru/view_post. Php? Id=274. Комментарии добавил(а): александр дата: 2011-11-26. Андрей, ну что я могу сказать:) респект и уважуха! Все работает отлично. Комментарии добавил(а): дмитрий дата: 2011-12-02. Спасибо вам огромное!
) очень выручили, все отлично работает. Комментарии добавил(а): евгений дата: 2011-12-12. Похоже я тупее всех. Знаю 3 прекрасные кнопки "сtrl+c" и "сtrl+v". Пользуюсь ими в совершенстве. При нажатии на маленькую картинку, экран темнеет появляется маленькое окошко, а в нем вместо большой картинки высвечивается опять мой сайт. Если ввести адреса картинок в браузере, они открываются. Комментарии добавил(а): юрий дата: 2011-12-13. Вопрос. Почему в ie не рабботает? Всплывающее окно просто белое картинки нет.

Комментарии добавил(а): андрейк дата: 2011-12-13.

Работает во всех браузерах, и в ie тоже, скорее всего вы где то допустили ошибку. Комментарии добавил(а): ирина дата: 2012-01-09. Я сделала, как у вас написано, но у меня ничего не получается. Картинка открывается в в этом же окне и во весь экран и не перелистывает. Комментарии добавил(а): алена дата: 2012-01-11. У меня картинки открываются в том же фрейме, только в новом окне. А как в вашем примере не выходит. Что не так?? Комментарии добавил(а): федор дата: 2012-02-05. Крутотень класная, пять минут разобраться. Хорошо что скрипты писать не надо.
Для новичков таких как я самое то!!! Комментарии добавил(а): александр дата: 2012-02-09. Подскажите пожалуйста, почему картинка закрывается при нажатии на любое место??? И где найти урок про видео? Комментарии добавил(а): наталья дата: 2012-01-27. Огромное спасибо за скрипт!! Искала-искала, а тут все так понятно и просто! Еще раз спасибо. Комментарии добавил(а): наталья дата: 2012-01-27. "вопрос.
Почему в ie не рабботает? Всплывающее окно просто белое картинки нет. " такая же фигня была. Нужно включить все что относиться к java и еще нажать кнопочку, которая находиться справа в строке поиска и выглядит как разорванный лист. После этого все заработало. Комментарии добавил(а): ольга дата: 2013-07-16. Александру. В ie8 все работает прекрасно, ищите ошибки. Комментарии добавил(а): юрий дата: 2012-03-13. Спасибо, все работает отлично, вопрос только один, почему когда я применяю этот урок "как сделать плавное увеличение картинки при клике" и ваш урок "галерея изображений с плавно меняющимися картинками" на одной странице сайта плавное увеличение картинки не получается, работает нормально только "плавно меняющиеся картинки", не получается, чтоб работало все? Комментарии добавил(а): ольга дата: 2012-03-26. Спасибо за чудесный скрипт, только я столкнулась с небольшой проблемой, помогите, пожалуйста, ее решить.

Сделала групповые картинки (штук 6), локально все работает, но на сайте первые 2 не открываются (крутится загрузка и все), а начиная с 3-ей все нормально.

Как это исправить:(. Комментарии добавил(а): андрейк дата: 2012-03-26. Ольга, скорее всего у вас проблема с указанем места где лежат картинки, т. Е. Проверьте путь до графических файлов, имена файлов, регистры написания (верхний/нижний). Комментарии добавил(а): ольга дата: 2012-03-27. Андрейк, спасибо, что так быстро откликнулись) путь и имена файлов прописаны правильно. Эти картинки у меня в таблице, т. Е.
Таблица из 4-х колонок, в первой ячейке фотка, во второй описание, в третей фотка, в четвертой описание. Так вот, эти две фотки и не отображаются, а дальше уже нормально. Может это быть из-за таблицы? Комментарии добавил(а): ксения дата: 2012-04-08. Сууууупер!!! Мне оч понравилось. Просто класс!!! Комментарии добавил(а): ярослав дата: 2012-04-09. Спасибо. Все очень доступно описано.
У меня благодаря вам все получилось. Еще рас спасибо. Комментарии добавил(а): [email protected] Ru дата: 2012-05-26. Блин не разобрался, Комментарии добавил(а): дмитрий дата: 2012-06-17. Ваш материал рулит! Информативно, классно, доступно, а главное эффективно. +. Комментарии добавил(а): сергей дата: 2012-06-20. Спасибо огромное, для меня это первый "скрип", но нужна помощь!

На станичнике разместил несколько "модальных окон" в разных таблицах, с разным направлении и смыслом в фотографиях по 3шт.

При просмотре просматриваются не только нужные 3 фотки, но и все остальные с других "модальных окон". Комментарии добавил(а): татьяна дата: 2012-06-20. Спасибо,всё получилось, только почему-то нет стрелочки,которая листает на следующее изображение. Комментарии добавил(а): татьяна дата: 2012-06-22. А,простите,это я не так сделала: у меня каждая картинка лежит в отдельной ячейке, поэтому и стрелочки не было. Если сделать без таблицы всё чудесно работает. Спасибо!!! Комментарии добавил(а): владимир дата: 2012-07-07. Все супер, автору респект, благодаря таким людям, как вы хочется двигаться дальше в познаниях неизвестного, спасибо!
Комментарии добавил(а): 111 дата: 2012-07-19. Спасибо! Все получилось только в ie не получается экран становится серым и все(((( не подскажете почему. Комментарии добавил(а): генадий дата: 2012-07-31. Можно ли чтоб на увеличенной картинки вставить текст? Комментарии добавил(а): андрейк дата: 2012-08-01. Генадий, конкретно в этом скрипте вставить текст поверх картинки нельзя. Но кто вам мешает нанести текст например в фотошопе на увеличенную картинку и получите тот же эффект. Комментарии добавил(а): дмитрий дата: 2012-11-19. А подскажите, почему не отображаются эл-ты навигации на увеличенной картинке(закрыть, пред, след) и тайтл без рамки и фона?
Комментарии добавил(а): docsk дата: 2012-08-15. Проверьте автоопределение кодировки в chrome. Еще плохо читается листинг кода. Комментарии добавил(а): роман дата: 2012-09-03. Подскажите почему может не отображаться title картинок при открытии, css такой же, только вот javascript подключаю на странице где эти картинке (не между head, а в body). Комментарии добавил(а): тема дата: 2012-09-27. А на укоз то пойдет? Поставил и не работает открывается картинка сама(( может что не так с путями внутри архива? Комментарии добавил(а): тимур дата: 2012-10-01.

Андрейк подскажите пожалуйста решение проблемы.

Увеличенная картинка открывается не в модальном окне,а на всю страницу,без перехода к другим картинкам,заранее спасибо! Комментарии добавил(а): андрейк дата: 2012-10-02. Тимур, заочно трудно диагностировать проблему, тем более имея так мало информации, но одно могу сказать точно: вы где то допустили ошибку. Обратите внимание на синтаксис, правильные пути и наличие всех файлов скрипта. Комментарии добавил(а): владимир дата: 2012-10-16. Андрей, просто большое спасибо, выставил в инет все замечательно работает! По вашим пояснениям все доходчиво понятно, даже мне пенсионеру на седьмом десятке, приходится тащить сайт организации. С уважением владимир. Комментарии добавил(а): андрейк дата: 2012-10-12. Владимир, ошибка скорее всего в пути до большой картинки, заочно точнее сказать трудно, но вы где-то ошиблись. Комментарии добавил(а): владимир дата: 2012-10-12. При клике на маленькую картинку выплывает пустое большое окно без картинки.
В чем проблема??? Пока файлы не выставлял в инет. Комментарии добавил(а): елена дата: 2012-10-13. Андрей, спасибо большое за скрипт. Всё работает. Подскажите есть ли тот следующий урок, в котором вы обещали рассказать как вставлять в модальные окна видео и контент? Комментарии добавил(а): вальдемар дата: 2012-11-01. К сожалению, те файлы которые вы (автор) выложили, они не работают в ie 8. 0 (отображается пустое окно, без картинки). Все пути к файлам проверены и мало того, тот же скрипт работает во всех других браузерах и там отображает картинку.
Я проверил 4 популярных браузера, и только в ie 8. 0 такая проблема. Но самое интересное, что пример который показан в начале этой статьи, работает. Она отображается и в ie 8. 0 автор, подскажите, в чем проблема, или выложите, пожалуйста, рабочие файлы. Комментарии добавил(а): андрейк дата: 2012-11-01. Вальдемар. Скрипт и все файлы выложенные выше полностью рабочие, причем абсолютно во всех браузерах, в том числе и в ie8. 0. Если у вас что то не получается ознакомтесь с информацией здесь: http://www. Luksweb. Ru/view_post.

Php? Id=335. Комментарии добавил(а): вальдемар дата: 2012-11-02.

Знаете, я бы с радостью с вами согласился. Да вот беда. Я выложил ваши файлы (урок) полностью на чистый фтп и домен сайта и запустил в разных браузерах. И во всех браузерах картинка увеличенная отображается, а вот в ie 8. 0 нет. Можете и сами в єтом убедиться http://free. Selcet. Com. Ua/. Комментарии добавил(а): андрейк дата: 2012-11-02. Вальдемар. Посмотрел в браузере ie8, версия 8.
0. 6001. 18702. Все работает замечательно, кроме кодировки, но это не относится к работе скрипта. А соглашаться или нет со мной это ваше полное право. Комментарии добавил(а): надежда дата: 2012-11-06. Просто супер. Редко встречаешь, когда все понятно, и главное работает))). Комментарии добавил(а): ольга дата: 2012-11-14.
Большое спасибо за урок! В ie 8. 0 всё работает, подтверждаю. Андрей, не подскажете, а можно сделать так, что бы стрелка для переключения след. Картинки всегда отражалась бы на картинке, а не только когда на нее наведена мышка? Заранее спасибо! Комментарии добавил(а): людмила дата: 2012-12-01. Спасибо! Все работает! Поддерживаю ольгу, неплохо былобы чтобы стрелка для переключения всегда отображалась. Как это сделать? [email protected]

Com спасибо! Комментарии добавил(а): борис дата: 2012-12-07.

Прикольно. Спасибо у меня все вышло здорово. Комментарии добавил(а): олег дата: 2012-12-09. Большое спасибо! Работает безупречно! Давно хотел такой эффект, благодаря вам получилось! Браво!!! Комментарии добавил(а): виктор дата: 2012-12-15. Спасибо за скрипт, всё работает, долго искал похожее, но вот есть проблема, почему то картинка открывается в окне, а не так как у вас, поверх окна. Комментарии добавил(а): виктор дата: 2012-12-15. Всё получилось, пропустил скобку >.
Комментарии добавил(а): виктор дата: 2012-12-26. Подскажите, где ошибся. Картинки открываются не в всплывающем окне, а на отдельной странице. Комментарии добавил(а): алексей дата: 2013-01-06. Такая же проблема. Открываются в отдельном окне, а не во всплывающем. Вроде все делаю правильно, а не помогает. Несколько скриптов пробовал, но проблема остается. Получается javascript не работает, что ли. В чем проблема, кто подскажет?
Комментарии добавил(а): алекс дата: 2013-01-06. Большое спасибо. Все просто и понятно!!!! Комментарии добавил(а): виктор дата: 2013-01-10. Листинг не вставляется в шаблон, cms ругается. Комментарии добавил(а): татьяна дата: 2013-01-27. Андрей, спасибо большое за статью искала именно такую фотогалерею. Комментарии добавил(а): александр дата: 2013-02-03. Давно искал нечто подобное. Большое спасибо, андрей. Комментарии добавил(а): евгений болгов дата: 2013-02-05. В ie10 не работает.

(((. Комментарии добавил(а): axe дата: 2013-03-07.

Спасибо! Комментарии добавил(а): kdss дата: 2013-03-21. Спасибо автору, все работает. Комментарии добавил(а): алексей дата: 2013-04-01. Автор задумайся о совместимость библиотек работает только на 1. 3 бред! Данный скрипт не получится использовать если уже есть скрипты работающие на 1. 7 или 1. 9.
Комментарии добавил(а): андрейк дата: 2013-04-01. Алексею. 1. Я не являюсь автором этого скрипта, я лишь стараюсь донести до посетителей сайта в простой и доступной форме процесс установки скрипта. 2. Вы наверное не в курсе, но каждая новая версия библиотеки полностью поддерживает предыдущие. Т. Е. Скрипт успешно работает и со всеми новыми версиями библиотек, в том числе и с 1. 7 и с 1. 9. Но на момент написание статьи (обратите внимание на дату публикации) самой последней и актуальной была версия 1.
3. Комментарии добавил(а): валерий м дата: 2013-04-06. Спасибо огромное за статью, очень выручила, искал много как увеличить миниатюры, даже придумывал на css, танцы с бубном (. :hover). Спасибо. Комментарии добавил(а): владимир дата: 2013-04-09. Прошу подсказать почему может не работать способ( вроде все сделал как написано, но картинки просто открываются в новом окне. Как будто не принимается во внимание код и ксс, хотя все прописано и пути сохранены. Отпишитесь плз на [email protected] Ru буду премного благодарен! Комментарии добавил(а): владимир дата: 2013-04-09.

Страницу забыл написать где пытаюсь повторить http://complectprom.

Ru/galereya_produkcii/ помоги пожалуйста! Комментарии добавил(а): владимир дата: 2013-04-09. Исправил пути вроде все должно работать, но теперь при нажатии просто становиться серый экран, как будто открылась фото, но ничего не открылось( при повторном щелчке все возвращаеться. Комментарии добавил(а): андрейк дата: 2013-04-10. Владимир, не видевши вашего кода трудно давать советы и рекомендации. Если пришлете мне по почте свои файлы посмотрю. Комментарии добавил(а): петр дата: 2013-04-17. Спасибо большое. Все просто и понятно! :). Комментарии добавил(а): михаил дата: 2013-04-18.
Спасибо,очень пригодилось. Не подскажите как увеличить размер поля для текста под картинкой? Комментарии добавил(а): михаил дата: 2013-04-18. Изменение размеров окна для размещения контента не дает результата. Комментарии добавил(а): сергей дата: 2013-04-24. Спасибо!!! Респект!!! Комментарии добавил(а): владимир дата: 2013-04-30. Многие спрашивали, вроде бы не было ответа, может пропустил тогда извеняюсь. Вопрос как сделать фон (затемнение) потемнее? Строку в css #666 меняю на 555 и ничего не меняеться.
Видимо не оно, подскажите где поменять затемнение. Спасибо. Комментарии добавил(а): елена дата: 2013-05-02. Здравствуйте, у меня почему то сначала все работает отлично, но потом все слетает и фотографии увеличиваются на отдельной странице, хотя я ничего не меняла. Переделываю уже в 3 раз, все равно, сначала все хорошо, но через час опять все слетает и фотки открываются в отдельном окне. Скажите в чем может быть причина. Комментарии добавил(а): viktor дата: 2013-05-29. Такая же петрушка картинка открывается в новом окне. Хотя все сделал по прописанной схеме. В чем причина кто знает? Комментарии добавил(а): дария дата: 2013-05-14. При клике на картинку открывается увеличенный вариант в новом окне я что то не так сделала?

Комментарии добавил(а): татьяна дата: 2013-05-20.

Спасибо, дорогой! Комментарии добавил(а): галина дата: 2013-06-13. Супер!! Все работает! Давно искала подобный скрипт. Спасибо вам огромное!!!! Комментарии добавил(а): андрей дата: 2013-07-17. Автору урока большое спасибо! 2 года уже урож живет )))) может, кому пригодится.
Сделал тестовый сайт с модальными окнами, в которых отображался контент. Залил на хостинг. Потом для этого сайта сделал отдельный хостинг и вместо букаф иероглифы. Хотя ничего не менял, все идентично. Бился полдня. Оказалось, на страницах, которые в модальном окне открываются, кодировку надо прописать utf. Хотя раньше работала кириллица. Комментарии добавил(а): danielle дата: 2013-06-17. Спасибо огромное толковому автору!
Все работает, как надо. Супер!!! Комментарии добавил(а): артур дата: 2013-08-04. Спасибо!!!!! Комментарии добавил(а): александр дата: 2013-06-25. В internet explorer 8 не работает. (((. Комментарии добавил(а): нина дата: 2013-09-24. Почему при клике на картинку открывается увеличенный вариант в новом окне? Как это исправить?

Комментарии добавил(а): николай дата: 2013-09-26.

Не работает в хроме, открывается в новом окне картинку. Комментарии добавил(а): сергей дата: 2013-10-28. У меня открывается большая картинка в новом окне на белом фоне. Что делать? Комментарии добавил(а): сергей дата: 2013-10-28. У меня открывается большая картинка в новом окне на белом фоне. Что делать? Комментарии добавил(а): настя дата: 2013-10-30. У меня на сайте, когда я кликаю на изображение, появляется текст "запрошенный контент не может быть загружен".
Что мне сделать? Комментарии добавил(а): александр дата: 2013-11-07. Добрый день, а как убрать заголовок title у большой картинки, а то у меня края повторяются. Комментарии добавил(а): theveter дата: 2013-11-29. Всем у кого открывается в новом окне: пропишите правильно путь к скрипту, и все будет ок. Комментарии добавил(а): юрий дата: 2014-01-25. Простите я это не понял: открываем html-документ, в который мы будем монтировать модальные окна и вставляем между тегами и следующий код листинг 1: это в какой файл? Комментарии добавил(а): елена дата: 2014-01-26. Огромное спасибо! Очень все просто и доступно! Комментарии добавил(а): екатерина дата: 2014-02-04.
Уважаемый андрей, у меня получилось воспользоваться вашим чудо-методом, но есть одна небольшая проблема( почему-то меню сайта горизонтальное у меня оказывается сверху моей увеличенной картинки, а все остальное содержимое сайта как бы под низом и затемнено. Из-за чего это может быть? Комментарии добавил(а): андрейк дата: 2014-02-07. Екатерина. Это не мой чудо-метод))), а обычный типовой скрипт. Я просто постарался доступным языком рассказать как его установить на сайт. Что касается вашего вопроса (затемнение, съехало меню) то здесь с ходу однозначно не могу ничего сказать. Причин может быть много, нужно смотреть код web-страницы. Комментарии добавил(а): дмитрий дата: 2014-10-18. Андрей, галерея замечательная! Не подскажите, в чем проблема? Делаю все, как у вас на странице, но при нажатии на последнюю картинку не происходит переход на первую.

Комментарии добавил(а): андрейк дата: 2014-10-18.

Дмитрий. Данный скрипт не гоняет картинки по кругу постоянно. А имеет ограниченное число просмотров в каждую сторону. Комментарии добавил(а): карим дата: 2014-03-11. Уважаемый андрей, благодарю вас от всего сердца! Большое вам спасибо! Комментарии добавил(а): поля дата: 2014-04-03. Андрей, и я вас благодарю!!! До сих пор актуально ))) успехов и процветания! :).
Комментарии добавил(а): татьяна дата: 2014-04-24. Спасибо!!!!!!!!!!!! Класс! Все получилось;). Комментарии добавил(а): дмитрий дата: 2014-04-29. Всё работает хорошо но проверив работоспособность на ie-tester оказалось что скрипт не работает в ie8 ie9 ie10 появляется окно ошибка сценария fancybox/jquery-1. 3. 2. Min.
Js подскажите пожалуйста что делать? Комментарии добавил(а): pryns дата: 2014-05-21. Спасибо! Перечитал множество инструкций, но эта самая доступная и рабочая! Комментарии добавил(а): роман дата: 2013-08-18. Уважаемый андрей, благодарю вас от всего сердца! Я, бл%№, 3 дня шлялся по всевозможных сайтах, и только по вашему рецепту смог подключить скрипт. Большое вам спасибо! Комментарии добавил(а): анатолий дата: 2014-06-07. Спасибо, воспользовался уроком.

Комментарии добавил(а): иванн дата: 2014-06-12.

Подкажите у меня не работают два скрипта jquery как решить проблему? Комментарии добавил(а): иванн дата: 2014-06-12. Одновременно не работают!!! . Комментарии добавил(а): михаил дата: 2014-06-22. Спасибо автору!!!

Перерыл пол гугла пока что-то смог найти то что работает и без проблем внедряется.

Огромное спасибо!!!!!!!!!! Комментарии добавил(а): анна дата: 2014-08-18. Огромное спасибо автору!!! Всё чётко расписано и работает идеально!!! Комментарии добавил(а): аретм дата: 2014-09-30. Добрый день! На странице показан пример о рыбках, а как сделать чтобы на 1 картинке открывались к примеру 4 картинки только этого вида рыб, при нажатии на 2 картинку только 4 картинки синих рыбок. Но на странице сайта это не отображалось. Если конкретнее. То есть таблица из 12 выполненных объектов, и я хочу сделать чтобы при нажатии на определенную картинку открылось модальное окно с картинками только определенного объекта. Комментарии добавил(а): андрейк дата: 2014-09-30. Артем, если я вас правильно понял, то вам нужно чтобы открывалось не 3 картинки (как в примере выше), а 12 картинок.
Просто в скрипте пропишите не 3, а 12 изображений и расположите их в таблице. Комментарии добавил(а): артем дата: 2014-10-02. Несовсем. Я хочу сделать галерею в галерее, если я сделаю в таблицу 12 картинок то все они будут видны как на странице так и в фотографиях, а я хочу чтобы на странице было 6 объектов, но при нажатии на 1 объект открылось ну около 4 картинки которые привязаны только к 1 объекту, при нажатии на 2 объект открылись другие 4 картинки привязанные только к нему и так по всем 6 объектам. Комментарии добавил(а): саша дата: 2014-12-22. Как внизу картинки написать большой текст. Комментарии добавил(а): антон дата: 2015-03-10. Все хорошо! Но когда добавляешь текст под картинку более чем из трех предложений, то получается какашка! Не подскажите, как исправить?
Комментарии добавил(а): александр дата: 2015-03-19. Зачем два изображения=) нужно всего лишь немного подумать и упростить задачу=))) задвигаешь все изображения в доп div даешь ему класс и прописываешь размер изображений в этом диве, и на этом все. Т. Е.
а в css прописать.

Foto img { width: 300px } за счет класса сразу можно настроить что угодно хоть обтикание текста по картинке хоть отступы.

Комментарии добавил(а): максим дата: 2015-03-24. Я в первые вижу сайт на табличной вёрстке но мне очень понравился он! Уважение админу. Комментарии добавил(а): rash дата: 2015-03-31. Было бы хорошо, но скрипт конфликтует с другими скриптами. Комментарии добавил(а): денис дата: 2015-04-22. Код отличный,да токо вот проблема в том что я его хочу запилить в dle 10. 2 для статических страниц и не как не соображу как это сделать. Комментарии добавил(а): александр дата: 2015-04-24. Денис, могу рассказать, как запилить на дле. Напиши мне в скайп nyqpblctuk. Комментарии добавил(а): алена дата: 2015-05-04.
А как видео добавить, подскажите. Комментарии добавил(а): александр дата: 2015-05-09. Алена, необходимо на сайт загрузить плаейр, видео, и через бб коды зайдествовать. Но это проблемотично т. К. Нужно слишком много места на хостинге, поэтому просто выводят плареа ютюба и тд. Комментарии добавил(а): ирина дата: 2015-06-11. Андрей, добрый день. Очень понравился последний вариант открытия изображения во фрейме. Сделала ровно так, как было написано у вас. Все хорошо, кроме того, что img открывается в другом окне во весь размер окна браузера (http://mdtex. Ru/dlya-suda).
Подскажите, что я сделала не так. Буду очень благодарна. Комментарии добавил(а): ник-ник дата: 2015-10-14. Андрей, всё получилось, как у вас, только листаются картинки не слева-направо, а сверху-вниз, хотя стрелки стоят слева-направо, что может быть? Комментарии добавил(а): наталия дата: 2015-07-26. Спасибо! Очень выручили! Комментарии добавил(а): fr дата: 2015-10-23. Спасибо большое. Комментарии добавил(а): александр дата: 2015-11-16.

Андрей, доброго времени суток!

У меня не получилось почему-то. Картинка открывается в новой вкладке, а в окне на этой же странице. Не пойму почему. Что может быть, подскажите пожалуйста? Комментарии добавил(а): любовь дата: 2015-11-27. Спасибо! Комментарии добавил(а): николай дата: 2015-10-13. Спасибо! Комментарии добавил(а): михаил дата: 2015-10-07.
Спасибо огромное!!! Комментарии добавил(а): дмитрий дата: 2016-02-19. Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 3 блока фотографий по 3 в каждой. Мне нужно, чтобы я мог просмотреть с первой по третью с 4й по 6ю и с 7й по 9ю, по факту выходит так, что я могу не закрывая окна фотографии пролистать все 9. И ещё как сделать так, чтобы вместо подписи под фотографией был мр3 плеер, чтобы можно было прослушать композицию относящуюся к этой фотографии? Большое спасибо! Комментарии добавил(а): александр дата: 2015-12-29. Спасибо большое. Все очень просто и симпатично).
Комментарии добавил(а): дмитрий дата: 2016-02-19. Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 3 блока фотографий по 3 в каждой. Мне нужно, чтобы я мог просмотреть с первой по третью с 4й по 6ю и с 7й по 9ю, по факту выходит так, что я могу не закрывая окна фотографии пролистать все 9. И ещё как сделать так, чтобы вместо подписи под фотографией был мр3 плеер, чтобы можно было прослушать композицию относящуюся к этой фотографии? Большое спасибо! Комментарии добавил(а): таня дата: 2016-02-09. Наконец-то нашла простое решение! Огромое спасибо автору!

Очень пригодилось! Комментарии добавил(а): сергей дата: 2016-02-15.

Добрый день! Воспользовался этим способом. На просто странице всё работает. А на странице, разбитую на фреймы не работает. Т. Е. При нажатии на картинку фрейм перезагружается с картинкой, а не всплывает окно ((( будто класса не видит (( что может быть не так? Комментарии добавил(а): сергей дата: 2016-02-15. С фреймами разобрался.
В простом статическом виде фреймов всё нормально работает. Но у меня фреём пополняет через "document. Write()" из другого фрейма. Вот что-то у меня и не работает. Уже всю голову сломал((. Комментарии добавил(а): андрейк дата: 2016-02-16. Сергей, фреймы это по сути дела совершенно разные html страницы, которые подгружаются в одно окно браузера. Этот скрипт не будет работать с фреймами. Комментарии добавил(а): дмитрий-шмитрий дата: 2016-02-19. Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 3 блока фотографий по 3 в каждой. Мне нужно, чтобы я мог просмотреть с первой по третью с 4й по 6ю и с 7й по 9ю, по факту выходит так, что я могу не закрывая окна фотографии пролистать все 9.
И ещё как сделать так, чтобы вместо подписи под фотографией был мр3 плеер, чтобы можно было прослушать композицию относящуюся к этой фотографии? Большое спасибо! Комментарии добавил(а): наталья дата: 2016-03-26. Здравствуте! Большое спасибо! Я всё расставила по местам всё работает,но у меня небольшая проблема мои 3 картинки располагаются по вертикали,а мне надо чтобы они располагались как у вас на сайте. Я новичок в этом деле. Комментарии добавил(а): андрейк дата: 2016-03-27. Здравствуйте наталья! Напишите мне детали на почту, не видевши код, трудно что то сказать конкретное.

Комментарии добавил(а): андрей дата: 2016-03-29.

Огромное человеческое спасибо! Респект! Комментарии добавил(а): павел дата: 2016-05-24. Спс автору, единственная статья по теме во всё инете, помогло. Комментарии добавил(а): валерия дата: 2016-04-02. Здравствуйте! Все как описано по установке сделано(папка fancybox лежит в корневой директории), но картинки открываются в новом окне на белом фоне. Как исправить? Комментарии добавил(а): саша дата: 2016-04-07. Все отлично, но можно не уменьшать картинку в фотошопе, а просто указать размеры маленькой картинки в коде и все.
Комментарии добавил(а): дмитрий дата: 2016-08-20. Спасибо! Очень помогли. Толковый сайт. Добавил в закладки. Комментарии добавил(а): денис дата: 2016-08-26. Спасибо, помогло! А как все картинки смотреть в папке? Комментарии добавил(а): владислав дата: 2016-10-12. Андрей, здравствуйте.
Сделал все как написано на вашем сайте. Все вышло, все отлично. Скажу даже, что ваш вариант является одним из самых простых и доступных. За, что огромное спасибо! Но есть один вопрос. Как (а точнее где именно и в каком коде) можно изменить местоположение изображения, которое увеличивается?? Что с помощью margin или padding (или какого другого способа) я мог бы его сместить в нужном направлении. У вас оно как я понимаю выставлено по центру. Заранее спасибо. Комментарии добавил(а): ваня дата: 2016-12-12.

А как его подключить к доске объявлений если нужно фото с бызы данных брать?

Комментарии добавил(а): рамиль дата: 2016-12-20. А как поменять стиль переключения слайдов?! Почему то отображается с компа норм а с сервера зашкварно как то. Комментарии добавил(а): александр асманов дата: 2017-04-07. Спасибо единственный тиолковый скрипт на 100 страниц поиска!!! Поклон низкий! Комментарии добавил(а): ирина дата: 2017-02-26. Добрый вечер, огромное спасибо, крайне полезная статья. Очень вас прошу простить мне мою привередливость, однако заменить в тексте глагол "ложим" (такого слова нет) на "кладем" или "помещаем". Комментарии добавил(а): александр дата: 2017-05-03. Все работает, но при добавлении скрипта страница обрезается снизу примерно на треть и заливается черным цветом.
С чем это может быть связано? Комментарии добавил(а): сергей дата: 2017-05-16. Если размещать несколько картинок рядом, то в листинге2 не нужно использовать тег
. Иначе картинки размещаются друг под другом. А так все работает огромное спасибо. Комментарии добавил(а): оксана дата: 2018-02-22. Все супер, все понятно!!! Спасибо большое). Комментарии добавил(а): crystal дата: 2017-10-18. Задрасте, возникла проблема при открытии модального окна материнская страница на которой расположено окно скролит наверх под модальным окном? Куда смотреть.
Комментарии добавил(а): семён дата: 2018-02-27. Спасибо! Комментарии добавил(а): михаил дата: 2018-03-29. Долго искал именно это!! Спасибо! Заработало сразу и так как надо! Очень выручили!! Добавить ваш комментарий: Ваше имя: Текст комментария: Введите сумму чисел с картинки: Разработка полного пакета документов по охране труда под "ключ" с учетом специфики работы вашей организации. Суот. Дистанционное сопровождение организаций по охране труда. Проведение специальной оценки условий труда (соут).