|
|
|
|
Как сделать плавное увеличение картинки при клике. Автор: Андрей Краснокутский Дата: 2011-08-06 Кликаем по картинке и она плавно увеличивается в размерах.Одно из новшеств современного веб-дизайна – это применение на сайте модальных окон, наверняка Вы уже неоднократно видели такой эффект: картинка (фотография, изображение, рисунок и т.д.) при клике по ней, открывается в отдельном окне, на затененном фоне. Смотрится очень эффектно. Поэтому и называется такой эффект – модальные окна. Ниже приведен пример использования Модального окна. Кликните по картинке ниже.  Реализуется подобный эффект с помощью JavaScript , а точнее с помощью jQuery . Поэтому для правильного отображения модальных окон, в Ваших браузерах обязательно должна быть включена поддержка сценариев "JavaScript" - обязательно это проверьте. В IE JavaScript включается здесь: Сервис / Свойства обозревателя / далее Кнопка: Другой / Выполнять сценарии приложения Java / Включить.
Модальное окно для изображения.Для реализации модального окна, нам понадобится изображения одной картинки, но 2-х разных размеров (уменьшенное и большое, то которое будет открыться в модальном окне). О подготовке графических файлов, я уже рассказывал ранее в статье: Как подготовить изображение для сайта. Считаем что эти графические файлы у Вас уже есть. У меня это два разных файла: sait180.jpg и sait600.jpg , размеры этих файлов соответственно: 180x113 и 600x375 пикселей. Размеры взяты примерные и у Вас эти размеры могут отличаться. Картинка взята случайным образом (первая попавшаяся), чисто для примера. Положите эти файлы в папку, в которой у Вас на сайте лежат все изображения на сайте, обычно это папка images или img. Для ясности считаем что это папка images. Теперь скачайте архив со скриптами. После распаковки архива папку с названием "fancybox" скопируйте и положите в «корневую» папку сайта. Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами <head> и </head> следующий код Листинг 1: Листинг 1.
Хотя этот код не привередлив и его можно прописать и в другом месте web-страницы, работать будет, но всетаки, лучше между <head> и </head>. Три последующие - это "яваскрипты". Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно. В этом уроке мы научимся делать модальные окна из одной картинки и из группы картинок. А в следующих уроках разберемся как втавлять в модальные окна видео и контент. Поэтому сильно не заморачивайтесь, а вставляйте код Листинга 1 в код web-страницы между <head> и </head> и идем дальше. Опускаемся ниже по коду и в то место web-страницы, где Вы хотите вставить маленькое изображение, при нажатии на которое будет открываться модальное окно, прописываем следующий код Листинг 2. Листинг 2.
Не забудьте изменить параметры title и прописать путь до своих реальных файлов. Вот собственного говоря и все. Обновляем web-страничку на сервере и радуемся полученным результатам. Еще раз смотрим, что у нас получилось: Конечно картинки здесь будут Ваши. С одиночной картинкой разобрались, теперь разберемся с группой изображений.
Модальные окна для нескольких изображений.Давайте сначала посмотрим конечный результат, который у нас должен получиться. Кликайте по изображениям: 
 Процесс подготовки изображений, такой же как и одиночном примере, т.е. каждое изображение должно быть 2-х размеров: маленького формата и большого формата. Все эти изображения тоже ложим в папку images. С подключением Скриптов мы разобрались выше, смотрите Листинг 1. В том месте web-страницы, где Вы хотите вывести группу изображений, вставляем код Листинга 3. Листинг 3.
И вот что получаем в итоге, еще раз смотрим на результат:
Согласитесь, симпатично получилось. И как Вы убедились, сделать такие окна совсем не сложно. Кстати в открытых модальных окнах по бокам появляются стрелочки (при наведении мышки) для перехода к следующей картинке. P.S. В Листинге 3 прописано три картинки, но как Вы наверное уже поняли, прописать таких картинок можно сколько угодно, просто добавляя новую строчку кода: Всего Вам доброго.
Читайте так же другие наши материалы. Устанавливаем Флеш часы на сайт. Фоновые изображения для сайта в стиле Мрамор. Как сделать Скриншот (снимок) с экрана монитора нужного размера? Сайт своими руками за 9 часов 45 минут! Как издать (выпустить) собственную электронную книгу?
Просмотров: 133483 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Андрей А как вам такое представление картинок в мини слайд шоу http://auto-schol.by/Brabus_Mercedes-Benz-E-Class-Cabriolet.html Есть возможность увидеть все картинки в мини, при нажатии на цент картинки появляется в натуральную величину... Комментарии добавил(а): Александр Как всегда всё на высшем уровне, Вы Андрей настоящий кландайк знания! С уважением Александр. Комментарии добавил(а): Олег Гузь Здорово, Андрей! Мне понравилось! Комментарии добавил(а): Нина Здавсвуйте.Не знаю чл получися у меня, но у вас на сайте при нажатии на картинку которую вы приводите в качестве примера ничего не происходит,кроме того что темнеет экран манитора и комп зависает Комментарии добавил(а): Александр Все отлично. Буду пробовать вставлять свои картинки. Комментарии добавил(а): Антон Здорово, у меня все классно работает, спасибо Андрей большой вам респект и успехов Комментарии добавил(а): Нина Отличая галерея для браузеров опера и фиркфокс-всё как по маслу. Но я проверила через IE-6 IE-7 и Vistu.В них этот скрипт не рабоет.Я в инет всегда выхожу через IE-7, так сразу видно у кого какое качество сайта,и вижу на некоторых сайтах более сложные галереи. Комментарии добавил(а): Нина Как бы сделать такую галерею, как здесь http://www.zecho.ru/ да что бы она работала во всех браузерах? Комментарии добавил(а): АндрейК Нина Вы путаете, это не скрипт галереи, а скрипт модальных окон. Это абсолютно разные вещи и выполняют они разные задачи. И конечно же реализуются тоже по разному. Комментарии добавил(а): Вячеслав Спасибо, Андрей! Есть вопрос: изменение фона картинки не здесь ли Папка: fancybox -> Файл: jquery.fancybox.css -> Строка: background-color: #666; Комментарии добавил(а): mery Супер, работает без проблем. Спасибо за предоставленное готовое решение! Всех благ автору! Комментарии добавил(а): Инга Подскажите, плиз, а какой параметр затемняет экран, хочется немного темнее сделать фон за модальным окном. Комментарии добавил(а): TigerBUK Приветствую! Всё чётко и понятно. Ты анонсировал что расскажешь как вставить ВИДЕО в такое вот окошко. Очень хотелось бы посмотреть! Комментарии добавил(а): Роман Андрей, спасибо огромное за хороший урок. но у меня вопрос. все картинки работают, но мне надо как то поменять код, что бы изначально картинки были не в центре экрана, а на тех заранее запланированных мной местах, куда я их расставил. как это можно сделать? Комментарии добавил(а): Роман прошу прощения за беспокойство. все, разобрался что к чему. огромное спасибо еще раз. Комментарии добавил(а): Вячеслав Великолепно!!! Комментарии добавил(а): qwinmen Спасибо. Комментарии добавил(а): Юрий Доброго времени суток. Ситуация такая: мне необходимо сделать, чтобы увеличенная картинка приобретала свои истинные размеры, а не вписывалась по высоте экрана. Как это сделать? Комментарии добавил(а): NextIM как увеличивать картинки не прописывая их в коде? картинка загружается пользователем в папку через сайт и эта картинка должна увеличиваться... Комментарии добавил(а): Максим Автору кода респект. отлично . и понятно без глюков Комментарии добавил(а): АндрейК Максим я согласен с Вами, авторам большой респект, но я не автор, а всего лишь рассказываю на доступном языке как использовать библиотеку jQuery. А про Авторов здесь: http://www.luksweb.ru/view_post.php?id=274 Комментарии добавил(а): Александр Андрей, ну что я могу сказать:) Респект и уважуха! Все работает отлично. Комментарии добавил(а): Дмитрий Спасибо вам огромное!) очень выручили, все отлично работает Комментарии добавил(а): Евгений Похоже я тупее всех... знаю 3 прекрасные кнопки "Сtrl+C" и "Сtrl+V". Пользуюсь ими в совершенстве... При нажатии на маленькую картинку, экран темнеет появляется маленькое окошко, а в нем вместо большой картинки высвечивается опять мой сайт. Если ввести адреса картинок в браузере, они открываются. Комментарии добавил(а): Юрий Вопрос. Почему в IE не рабботает? Всплывающее окно просто белое - картинки нет. Комментарии добавил(а): АндрейК Работает во всех браузерах, и в IE тоже, скорее всего Вы где то допустили ошибку Комментарии добавил(а): Ирина я сделала, как у Вас написано, но у меня ничего не получается. Картинка открывается в в этом же окне и во весь экран и не перелистывает Комментарии добавил(а): Алена У меня картинки открываются в том же фрейме, только в новом окне.. А как в Вашем примере - не выходит.. Что не так?? Комментарии добавил(а): Федор Крутотень класная, пять минут разобраться. Хорошо что скрипты писать не надо. Для новичков - таких как я самое то!!! Комментарии добавил(а): Александр подскажите пожалуйста , почему картинка закрывается при нажатии на любое место??? и где найти урок про видео? Комментарии добавил(а): Наталья Огромное спасибо за скрипт!! Искала-искала, а тут все так понятно и просто! Еще раз спасибо. Комментарии добавил(а): Наталья "Вопрос. Почему в IE не рабботает? Всплывающее окно просто белое - картинки нет." Такая же фигня была. Нужно включить все что относиться к Java и еще нажать кнопочку, которая находиться справа в строке поиска и выглядит как разорванный лист. После этого все заработало. Комментарии добавил(а): Ольга Александру. в IE8 все работает прекрасно, ищите ошибки Комментарии добавил(а): Юрий Спасибо, все работает отлично, вопрос только один, почему когда я применяю этот урок "Как сделать плавное увеличение картинки при клике" и ваш урок "Галерея изображений с плавно меняющимися картинками" на одной странице сайта плавное увеличение картинки не получается, работает нормально только "Плавно меняющиеся картинки", не получается, чтоб работало все? Комментарии добавил(а): Ольга Спасибо за чудесный скрипт, только я столкнулась с небольшой проблемой, помогите, пожалуйста, ее решить. Сделала групповые картинки (штук 6), локально все работает, но на сайте первые 2 не открываются (крутится загрузка и все), а начиная с 3-ей все нормально. Как это исправить :( Комментарии добавил(а): АндрейК Ольга, скорее всего у Вас проблема с указанем места где лежат картинки, т.е. проверьте путь до графических файлов, имена файлов, регистры написания (верхний/нижний). Комментарии добавил(а): Ольга АндрейК, спасибо, что так быстро откликнулись) Путь и имена файлов прописаны правильно... Эти картинки у меня в таблице, т.е. таблица из 4-х колонок, в первой ячейке фотка, во второй описание, в третей фотка, в четвертой описание. Так вот, эти две фотки и не отображаются, а дальше уже нормально. Может это быть из-за таблицы? Комментарии добавил(а): Ксения СУУУУУПЕР!!! Мне оч понравилось. просто класс!!! Комментарии добавил(а): Ярослав Спасибо. Все очень доступно описано. У меня благодаря вам все получилось. Еще рас спасибо. Комментарии добавил(а): rakegent@mail.ru блин не разобрался, Комментарии добавил(а): Дмитрий Ваш материал рулит! Информативно, классно, доступно, а главное - эффективно. + Комментарии добавил(а): Сергей Спасибо огромное, для меня это первый "скрип", но нужна помощь! На станичнике разместил несколько "Модальных окон" в разных таблицах, с разным направлении и смыслом в фотографиях по 3шт. При просмотре просматриваются не только нужные 3 фотки, но и все остальные с других "Модальных окон". Комментарии добавил(а): Татьяна Спасибо,всё получилось, только почему-то нет стрелочки,которая листает на следующее изображение... Комментарии добавил(а): Татьяна А,простите,это я не так сделала: у меня каждая картинка лежит в отдельной ячейке, поэтому и стрелочки не было. Если сделать без таблицы - всё чудесно работает. Спасибо!!! Комментарии добавил(а): Владимир Все супер, автору респект, благодаря таким людям, как Вы хочется двигаться дальше в познаниях неизвестного, спасибо! Комментарии добавил(а): 111 спасибо! все получилось только в IE не получается экран становится серым и все(((( не подскажете почему Комментарии добавил(а): генадий можно ли чтоб на увеличенной картинки вставить текст? Комментарии добавил(а): АндрейК Генадий, конкретно в этом скрипте вставить текст поверх картинки нельзя. Но кто Вам мешает нанести текст например в фотошопе на увеличенную картинку и получите тот же эффект. Комментарии добавил(а): Дмитрий А подскажите, почему не отображаются эл-ты навигации на увеличенной картинке(закрыть, пред, след) и тайтл без рамки и фона ? Комментарии добавил(а): DocSK Проверьте автоопределение кодировки в chrome. Еще плохо читается листинг кода Комментарии добавил(а): Роман Подскажите почему может не отображаться title картинок при открытии, css такой же, только вот javascript подключаю на странице где эти картинке (не между head, а в body) Комментарии добавил(а): Тема А на укоз то пойдет? поставил и не работает открывается картинка сама(( Может что не так с путями внутри архива? Комментарии добавил(а): Тимур АндрейК подскажите пожалуйста решение проблемы.Увеличенная картинка открывается не в модальном окне,а на всю страницу,без перехода к другим картинкам,заранее спасибо! Комментарии добавил(а): АндрейК Тимур, заочно трудно диагностировать проблему, тем более имея так мало информации, но одно могу сказать точно: Вы где то допустили ошибку. Обратите внимание на синтаксис, правильные пути и наличие всех файлов скрипта. Комментарии добавил(а): Владимир Андрей, просто большое спасибо, выставил в инет - все замечательно работает! По Вашим пояснениям все доходчиво понятно, даже мне пенсионеру на седьмом десятке, приходится тащить сайт организации. С уважением Владимир. Комментарии добавил(а): АндрейК Владимир, ошибка скорее всего в пути до большой картинки, заочно точнее сказать трудно, но Вы где-то ошиблись. Комментарии добавил(а): Владимир при клике на маленькую картинку выплывает пустое большое окно без картинки. В чем проблема??? Пока файлы не выставлял в инет. Комментарии добавил(а): Елена Андрей, спасибо большое за скрипт. Всё работает. Подскажите есть ли тот следующий урок, в котором Вы обещали рассказать как вставлять в модальные окна видео и контент? Комментарии добавил(а): Вальдемар К сожалению, те файлы которые Вы (автор) выложили, они не работают в IE 8.0 (отображается пустое окно, без картинки). Все пути к файлам проверены и мало того, тот же скрипт работает во всех других браузерах и там отображает картинку. Я проверил 4 популярных браузера, и только в IE 8.0 такая проблема. Но самое интересное, что пример который показан в начале этой статьи, работает. Она отображается и в IE 8.0 Автор, подскажите, в чем проблема, или выложите, пожалуйста, рабочие файлы. Комментарии добавил(а): АндрейК Вальдемар. Скрипт и все файлы выложенные выше полностью рабочие, причем абсолютно во всех браузерах, в том числе и в IE8.0. Если у вас что то не получается ознакомтесь с информацией здесь: http://www.luksweb.ru/view_post.php?id=335 Комментарии добавил(а): Вальдемар Знаете, я бы с радостью с Вами согласился. Да вот беда. Я выложил Ваши файлы (урок) полностью на чистый ФТП и домен сайта и запустил в разных браузерах. И во всех браузерах картинка увеличенная отображается, а вот в IE 8.0 - нет. Можете и сами в єтом убедиться - http://free.selcet.com.ua/ Комментарии добавил(а): АндрейК Вальдемар. Посмотрел в браузере IE8, версия 8.0.6001.18702. Все работает замечательно, кроме кодировки, но это не относится к работе скрипта. А соглашаться или нет со мной - это ваше полное право. Комментарии добавил(а): Надежда Просто супер. Редко встречаешь, когда все понятно, и главное работает))) Комментарии добавил(а): Ольга Большое спасибо за урок! в IE 8.0 всё работает, подтверждаю. Андрей, не подскажете, а можно сделать так, что бы стрелка для переключения след. картинки всегда отражалась бы на картинке, а не только когда на нее наведена мышка? Заранее спасибо! Комментарии добавил(а): Людмила Спасибо! Все работает! Поддерживаю Ольгу, неплохо былобы чтобы стрелка для переключения всегда отображалась. как это сделать? puf593@gmail.com Спасибо! Комментарии добавил(а): Борис Прикольно. Спасибо у меня все вышло здорово. Комментарии добавил(а): Олег Большое спасибо! Работает безупречно! Давно хотел такой эффект, благодаря Вам получилось! Браво!!! Комментарии добавил(а): Виктор Спасибо за скрипт, всё работает, долго искал похожее, но вот есть проблема, почему то картинка открывается в окне, а не так как у вас, поверх окна. Комментарии добавил(а): Виктор Всё получилось, пропустил скобку > Комментарии добавил(а): Виктор Подскажите, где ошибся. Картинки открываются не в всплывающем окне, а на отдельной странице. Комментарии добавил(а): Алексей Такая же проблема. Открываются в отдельном окне, а не во всплывающем. Вроде все делаю правильно, а не помогает. Несколько скриптов пробовал, но проблема остается. Получается javascript не работает, что ли.. В чем проблема, кто подскажет? Комментарии добавил(а): Алекс Большое спасибо. Все просто и понятно!!!! Комментарии добавил(а): Виктор Листинг не вставляется в шаблон, cms ругается Комментарии добавил(а): Татьяна Андрей, спасибо большое за статью- искала именно такую фотогалерею. Комментарии добавил(а): Александр Давно искал нечто подобное. Большое спасибо, Андрей. Комментарии добавил(а): Евгений Болгов В IE10 не работает...((( Комментарии добавил(а): Axe Спасибо! Комментарии добавил(а): KDSS Спасибо автору, все работает Комментарии добавил(а): Алексей Автор задумайся о совместимость библиотек работает только на 1.3 бред! данный скрипт не получится использовать если уже есть скрипты работающие на 1.7 или 1.9 Комментарии добавил(а): АндрейК Алексею. 1. Я не являюсь автором этого скрипта, я лишь стараюсь донести до Посетителей сайта в простой и доступной форме процесс установки скрипта. 2. Вы наверное не в курсе, но каждая новая версия библиотеки полностью поддерживает предыдущие. Т.е. скрипт успешно работает и со всеми новыми версиями библиотек, в том числе и с 1.7 и с 1.9. Но на момент написание статьи (обратите внимание на дату публикации) самой последней и актуальной была версия 1.3. Комментарии добавил(а): Валерий М Спасибо огромное за статью, очень выручила, искал много как увеличить миниатюры, даже придумывал на CSS, танцы с бубном (....:hover). Спасибо Комментарии добавил(а): Владимир Прошу подсказать почему может не работать способ( Вроде все сделал как написано, но картинки просто открываются в новом окне. Как будто не принимается во внимание код и ксс, хотя все прописано и пути сохранены.. Отпишитесь плз на vovikys@mail.ru буду премного благодарен! Комментарии добавил(а): Владимир Страницу забыл написать где пытаюсь повторить - http://complectprom.ru/galereya_produkcii/ Помоги пожалуйста! Комментарии добавил(а): Владимир Исправил пути - вроде все должно работать, но теперь при нажатии просто становиться серый экран, как будто открылась фото, но ничего не открылось( при повторном щелчке все возвращаеться.. Комментарии добавил(а): АндрейК Владимир, не видевши вашего кода трудно давать советы и рекомендации. Если пришлете мне по почте свои файлы - посмотрю. Комментарии добавил(а): Петр Спасибо большое. Все просто и понятно!:) Комментарии добавил(а): Михаил Спасибо,очень пригодилось. Не подскажите как увеличить размер поля для текста под картинкой? Комментарии добавил(а): Михаил изменение размеров окна для размещения контента не дает результата. Комментарии добавил(а): Сергей Спасибо!!! Респект!!! Комментарии добавил(а): Владимир Многие спрашивали, вроде бы не было ответа, может пропустил - тогда извеняюсь. Вопрос - Как сделать фон (затемнение) потемнее? строку в css #666 меняю на 555 и ничего не меняеться.. видимо не оно, подскажите где поменять затемнение. Спасибо Комментарии добавил(а): Елена Здравствуйте, у меня почему то сначала все работает отлично, но потом все слетает и фотографии увеличиваются на отдельной странице, хотя я ничего не меняла. Переделываю уже в 3 раз, все равно, сначала все хорошо, но через час опять все слетает и фотки открываются в отдельном окне. Скажите в чем может быть причина Комментарии добавил(а): Viktor Такая же петрушка - картинка открывается в НОВОМ ОКНЕ. Хотя все сделал по прописанной схеме. В ЧЕМ ПРИЧИНА КТО ЗНАЕТ ? Комментарии добавил(а): Дария При клике на картинку открывается увеличенный вариант в новом окне Я что то не так сделала? Комментарии добавил(а): Татьяна Спасибо, дорогой! Комментарии добавил(а): Галина Супер!! Все работает! Давно искала подобный скрипт. Спасибо Вам огромное!!!! Комментарии добавил(а): Андрей Автору урока большое спасибо! 2 года уже урож живет )))) Может, кому пригодится. Сделал тестовый сайт с модальными окнами, в которых отображался контент. Залил на хостинг. Потом для этого сайта сделал отдельный хостинг - и вместо букаф - иероглифы. Хотя ничего не менял, все идентично. Бился полдня. Оказалось, на страницах, которые в модальном окне открываются, кодировку надо прописать UTF. Хотя раньше работала кириллица. Комментарии добавил(а): Danielle Спасибо огромное толковому автору! Все работает, как надо. Супер!!! Комментарии добавил(а): Артур Спасибо!!!!! Комментарии добавил(а): Александр В Internet Explorer 8 не работает...((( Комментарии добавил(а): Нина Почему при клике на картинку открывается увеличенный вариант в новом окне? Как это исправить? Комментарии добавил(а): Николай Не работает в хроме, открывается в новом окне картинку Комментарии добавил(а): Сергей у меня открывается большая картинка в новом окне на белом фоне. что делать ? Комментарии добавил(а): Сергей у меня открывается большая картинка в новом окне на белом фоне. что делать ? Комментарии добавил(а): Настя У меня на сайте, когда я кликаю на изображение, появляется текст "Запрошенный контент не может быть загружен". Что мне сделать? Комментарии добавил(а): Александр Добрый день, а как убрать заголовок title у большой картинки, а то у меня края повторяются.... Комментарии добавил(а): TheVeter Всем у кого открывается в новом окне: пропишите правильно путь к скрипту, и все будет ОК. Комментарии добавил(а): Юрий Простите я это не понял: Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами <head> и </head> следующий код Листинг 1: Это в какой файл? Комментарии добавил(а): Елена Огромное спасибо! очень все просто и доступно! Комментарии добавил(а): Екатерина Уважаемый Андрей, у меня получилось воспользоваться вашим чудо-методом, но есть одна небольшая проблема( Почему-то меню сайта горизонтальное у меня оказывается сверху моей увеличенной картинки, а все остальное содержимое сайта как бы под низом и затемнено. Из-за чего это может быть? Комментарии добавил(а): АндрейК Екатерина. Это не мой чудо-метод))) , а обычный типовой скрипт. Я просто постарался доступным языком рассказать как его установить на сайт. Что касается Вашего вопроса (затемнение, съехало меню) то здесь с ходу однозначно не могу ничего сказать. Причин может быть много, нужно смотреть код web-страницы. Комментарии добавил(а): Дмитрий Андрей, галерея замечательная! Не подскажите, в чем проблема? Делаю все, как у вас на странице, но при нажатии на последнюю картинку не происходит переход на первую. Комментарии добавил(а): АндрейК Дмитрий. Данный скрипт НЕ гоняет картинки по кругу постоянно. А имеет ограниченное число просмотров в каждую сторону. Комментарии добавил(а): Карим Уважаемый Андрей, благодарю Вас от всего сердца! Большое Вам спасибо! Комментарии добавил(а): Поля Андрей, и я Вас благодарю!!! До сих пор актуально ))) Успехов и процветания! :) Комментарии добавил(а): татьяна Спасибо!!!!!!!!!!!! Класс! Все получилось;) Комментарии добавил(а): Дмитрий Всё работает хорошо Но проверив работоспособность на IE-Tester оказалось что скрипт не работает в IE8 IE9 IE10 появляется окно ошибка сценария fancybox/jquery-1.3.2.min.js Подскажите пожалуйста что делать? Комментарии добавил(а): prYns Спасибо! Перечитал множество инструкций, но эта - самая доступная и рабочая! Комментарии добавил(а): Роман Уважаемый Андрей, благодарю Вас от всего сердца! Я, бл%№, 3 дня шлялся по всевозможных сайтах, и только по Вашему рецепту смог подключить скрипт. Большое вам спасибо! Комментарии добавил(а): Анатолий спасибо, воспользовался уроком. Комментарии добавил(а): ИВАНн Подкажите у меня не работают два скрипта jquery как решить проблему? Комментарии добавил(а): ИВАНн Одновременно не работают!!! <script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jquery.cross-slide.js"></script> <script type="text/javascript"> и <script type="text/javascript" src="../fancybox/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../fancybox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="../fancybox/jquery.fancybox-1.2.1.pack.js"></script> Комментарии добавил(а): Михаил Спасибо Автору!!! Перерыл пол гугла пока что-то смог найти то что работает и без проблем внедряется. Огромное спасибо!!!!!!!!!! Комментарии добавил(а): Анна Огромное спасибо автору!!! Всё чётко расписано и работает идеально!!! Комментарии добавил(а): Аретм Добрый день! На странице показан пример о рыбках, а как сделать чтобы на 1 картинке открывались к примеру 4 картинки только этого вида рыб, при нажатии на 2 картинку только 4 картинки синих рыбок....но на странице сайта это не отображалось. Если конкретнее..... то есть таблица из 12 выполненных объектов, и я хочу сделать чтобы при нажатии на определенную картинку открылось модальное окно с картинками только определенного объекта.... Комментарии добавил(а): АндрейК Артем, если я Вас правильно понял, то Вам нужно чтобы открывалось не 3 картинки (как в примере выше), а 12 картинок. Просто в скрипте пропишите не 3 , а 12 изображений и расположите их в таблице. Комментарии добавил(а): Артем несовсем.... я хочу сделать галерею в галерее, если я сделаю в таблицу 12 картинок то все они будут видны как на странице так и в фотографиях, а я хочу чтобы на странице было 6 объектов, но при нажатии на 1 объект - открылось ну около 4 картинки которые привязаны только к 1 объекту, при нажатии на 2 объект открылись другие 4 картинки привязанные только к нему и так по всем 6 объектам Комментарии добавил(а): Саша Как внизу картинки написать большой текст Комментарии добавил(а): Антон Все хорошо! Но когда добавляешь текст под картинку более чем из трех предложений, то получается какашка! Не подскажите, как исправить? Комментарии добавил(а): Александр Зачем два изображения=) нужно всего лишь немного подумать и упростить задачу=))) задвигаешь все изображения в доп div даешь ему класс и прописываешь размер изображений в этом диве, и на этом все...т.е. <div class="foto"> <a class="two" rel="group" title="Глубоководные рыбы" href="images/okon600.jpg"><img src="images/okon600.jpg" /></a> <a class="two" rel="group" title="Пещерные рыбы" href="images/okon601.jpg"><img src="images/okon601.jpg" /></a> <a class="two" rel="group" title="Чудные рыбы" href="images/som180.jpg"><img src="images/som180.jpg" /></a> </div> а в css прописать .foto img { width: 300px } за счет класса сразу можно настроить что угодно хоть обтикание текста по картинке хоть отступы...... Комментарии добавил(а): Максим я в первые вижу сайт на табличной вёрстке - но мне очень понравился - он ! Уважение админу Комментарии добавил(а): Rash Было бы хорошо, но скрипт конфликтует с другими скриптами. Комментарии добавил(а): Денис Код отличный,да токо вот проблема в том что я его хочу запилить в DLE 10.2 для статических страниц и не как не соображу как это сделать Комментарии добавил(а): Александр Денис, могу рассказать, как запилить на ДЛЕ... напиши мне в скайп nyqpblcTuk Комментарии добавил(а): Алена а как видео добавить, подскажите Комментарии добавил(а): Александр Алена, необходимо на сайт загрузить плаейр, видео, и через бб коды зайдествовать. но это проблемотично т.к. нужно слишком много места на хостинге, поэтому просто выводят плареа ютюба и тд... Комментарии добавил(а): Ирина Андрей, добрый день. Очень понравился последний вариант открытия изображения во фрейме. Сделала ровно так, как было написано у вас. Все хорошо, кроме того, что img открывается в другом окне во весь размер окна браузера (http://mdtex.ru/dlya-suda). Подскажите, что я сделала не так. Буду очень благодарна. Комментарии добавил(а): Ник-ник Андрей, всё получилось , как у вас, только листаются картинки не слева-направо, а сверху-вниз, хотя стрелки стоят слева-направо, что может быть? Комментарии добавил(а): Наталия Спасибо! Очень выручили! Комментарии добавил(а): FR Спасибо большое Комментарии добавил(а): Александр Андрей, доброго времени суток! у меня не получилось почему-то. картинка открывается в новой вкладке, а в окне на этой же странице. не пойму почему. что может быть, подскажите пожалуйста? Комментарии добавил(а): Любовь Спасибо! Комментарии добавил(а): Николай спасибо! Комментарии добавил(а): Михаил Спасибо ОГРОМНОЕ!!! Комментарии добавил(а): Дмитрий Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 3 блока фотографий по 3 в каждой. Мне нужно, чтобы я мог просмотреть с первой по третью с 4й по 6ю и с 7й по 9ю, по факту выходит так, что я могу не закрывая окна фотографии пролистать все 9. И ещё как сделать так, чтобы вместо подписи под фотографией был МР3 плеер, чтобы можно было прослушать композицию относящуюся к этой фотографии? Большое спасибо! Комментарии добавил(а): Александр Спасибо большое. Все очень просто и симпатично) Комментарии добавил(а): Дмитрий Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 3 блока фотографий по 3 в каждой. Мне нужно, чтобы я мог просмотреть с первой по третью с 4й по 6ю и с 7й по 9ю, по факту выходит так, что я могу не закрывая окна фотографии пролистать все 9. И ещё как сделать так, чтобы вместо подписи под фотографией был МР3 плеер, чтобы можно было прослушать композицию относящуюся к этой фотографии? Большое спасибо! Комментарии добавил(а): Таня Наконец-то нашла простое решение! Огромое спасибо автору! Очень пригодилось! Комментарии добавил(а): Сергей Добрый день! Воспользовался этим способом. На просто странице всё работает. А на странице, разбитую на фреймы - не работает. Т.е. при нажатии на картинку - фрейм перезагружается с картинкой, а не всплывает окно ((( Будто класса не видит (( Что может быть не так? Комментарии добавил(а): Сергей С фреймами разобрался. в простом статическом виде фреймов всё нормально работает. Но у меня фреём пополняет через "document.write()" из другого фрейма. вот что-то у меня и не работает. уже всю голову сломал(( Комментарии добавил(а): АндрейК Сергей, фреймы это по сути дела совершенно разные html страницы, которые подгружаются в одно окно браузера. Этот скрипт не будет работать с фреймами. Комментарии добавил(а): Дмитрий-Шмитрий Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 3 блока фотографий по 3 в каждой. Мне нужно, чтобы я мог просмотреть с первой по третью с 4й по 6ю и с 7й по 9ю, по факту выходит так, что я могу не закрывая окна фотографии пролистать все 9. И ещё как сделать так, чтобы вместо подписи под фотографией был МР3 плеер, чтобы можно было прослушать композицию относящуюся к этой фотографии? Большое спасибо! Комментарии добавил(а): Наталья Здравствуте!Большое спасибо!Я всё расставила по местам всё работает,но у меня небольшая проблема мои 3 картинки располагаются по вертикали,а мне надо чтобы они располагались как у Вас на сайте .Я новичок в этом деле Комментарии добавил(а): АндрейК Здравствуйте Наталья! Напишите мне детали на почту, не видевши код, трудно что то сказать конкретное. Комментарии добавил(а): Андрей Огромное человеческое СПАСИБО! РЕСПЕКТ! Комментарии добавил(а): Павел Спс автору, единственная статья по теме во всё инете, помогло Комментарии добавил(а): Валерия Здравствуйте! все как описано по установке сделано(папка fancybox лежит в корневой директории), но картинки открываются в новом окне на белом фоне. как исправить? Комментарии добавил(а): Саша Все отлично, но можно не уменьшать картинку в фотошопе, а просто указать размеры маленькой картинки в коде и все Комментарии добавил(а): Дмитрий Спасибо! очень помогли. толковый сайт. добавил в закладки Комментарии добавил(а): Денис Спасибо, помогло! А как все картинки смотреть в папке? Комментарии добавил(а): Владислав Андрей, здравствуйте. Сделал все как написано на вашем сайте. Все вышло, все отлично. Скажу даже, что ваш вариант является одним из самых простых и доступных. за, что огромное спасибо! Но есть ОДИН ВОПРОС. Как (а точнее где именно и в каком коде) можно изменить местоположение изображения, которое увеличивается?? Что с помощью margin или padding (или какого другого способа) я мог бы его сместить в нужном направлении. У вас оно как я понимаю выставлено по центру. Заранее спасибо. Комментарии добавил(а): ваня а как его подключить к доске объявлений если нужно фото с бызы данных брать ? Комментарии добавил(а): Рамиль А как поменять стиль переключения слайдов?!Почему то отображается с компа норм а с сервера зашкварно как то Комментарии добавил(а): Александр Асманов Спасибо - единственный тиолковый скрипт на 100 страниц поиска!!! Поклон низкий! Комментарии добавил(а): Ирина Добрый вечер, огромное спасибо, крайне полезная статья. Очень Вас прошу простить мне мою привередливость, однако заменить в тексте глагол "ложим" (такого слова нет) на "кладем" или "помещаем". Комментарии добавил(а): Александр Все работает, но при добавлении скрипта страница обрезается снизу примерно на треть и заливается черным цветом. С чем это может быть связано? Комментарии добавил(а): Сергей Если размещать несколько картинок рядом, то в листинге2 не нужно использовать тег <div>. Иначе картинки размещаются друг под другом. А так все работает - огромное спасибо. Комментарии добавил(а): Оксана Все супер, все понятно!!! спасибо большое) Комментарии добавил(а): crystal задрасте, возникла проблема при открытии модального окна материнская страница на которой расположено окно скролит наверх под модальным окном? куда смотреть Комментарии добавил(а): Семён Спасибо! Комментарии добавил(а): Михаил Долго искал именно это!! Спасибо! Заработало сразу и так как надо! Очень выручили!! Добавить Ваш комментарий: |
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |