Как сделать снимок с фотографии

Добавлено: 11.10.2018, 05:13 / Просмотров: 62593

Закрыть ... [X]

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

Автор: Андрей Краснокутский

Дата: 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.

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<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>
<script type="text/javascript">
$(document).ready(function() {
$("a.first").fancybox();
$("a.two").fancybox();
$("a.video").fancybox({"frameWidth":520,"frameHeight":400});
$("a.content").fancybox({"frameWidth":600,"frameHeight":300});
});
</script>

 

Хотя этот код не привередлив и его можно прописать и в другом месте web-страницы, работать будет, но всетаки, лучше между <head> и </head>.
Первая строка:
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">- это подключение таблицы стилей CSS, которая лежит в папке "fancybox".

Три последующие - это "яваскрипты".

Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно.

В этом уроке мы научимся делать модальные окна из одной картинки и из группы картинок. А в следующих уроках разберемся как втавлять в модальные окна видео и контент. Поэтому сильно не заморачивайтесь, а вставляйте код Листинга 1 в код web-страницы между <head> и </head> и идем дальше.

Опускаемся ниже по коду и в то место web-страницы, где Вы хотите вставить маленькое изображение, при нажатии на которое будет открываться модальное окно, прописываем следующий код Листинг 2.

Листинг 2.

<div align="center">
<a class="first" title="Сайт фантазия" href="images/sait600.jpg"><img src="images/sait180.jpg"></a>
</div>

 

Не забудьте изменить параметры title и прописать путь до своих реальных файлов.

Вот собственного говоря и все. Обновляем web-страничку на сервере и радуемся полученным результатам. Еще раз смотрим, что у нас получилось:

Конечно картинки здесь будут Ваши. С одиночной картинкой разобрались, теперь разберемся с группой изображений.

 

Модальные окна для нескольких изображений.

Давайте сначала посмотрим конечный результат, который у нас должен получиться. Кликайте по изображениям:

Процесс подготовки изображений, такой же как и одиночном примере, т.е. каждое изображение должно быть 2-х размеров: маленького формата и большого формата. Все эти изображения тоже ложим в папку images. С подключением Скриптов мы разобрались выше, смотрите  Листинг 1.

В том месте web-страницы, где Вы хотите вывести группу изображений, вставляем код Листинга 3.

Листинг 3.

<div align="center">
<a class="two" rel="group" title="Глубоководные рыбы" href="images/okon600.jpg"><img src="images/okon180.jpg" /></a>
<a class="two" rel="group" title="Пещерные рыбы" href="images/kit600.jpg"><img src="images/kit180.jpg" /></a>
<a class="two" rel="group" title="Чудные рыбы" href="images/som600.jpg"><img src="images/som180.jpg" /></a>
</div>

 

И вот что получаем в итоге, еще раз смотрим на результат:

Согласитесь, симпатично получилось. И как Вы убедились, сделать такие окна совсем не сложно. Кстати в открытых модальных окнах по бокам появляются стрелочки (при наведении мышки) для перехода к следующей картинке.

P.S. В Листинге 3 прописано три картинки, но как Вы наверное уже поняли, прописать таких картинок можно сколько угодно, просто добавляя новую строчку кода:
<a class="two" rel="group" title="Первая картинка группы" href="images/moon600.jpg"><img src="images/moon180.jpg" /></a> для каждой новой картинки. И конечно же нужно указать реальный путь до картинки и имя графических файлов.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Устанавливаем Флеш часы на сайт.

Фоновые изображения для сайта в стиле Мрамор.

Как сделать Скриншот (снимок) с экрана монитора нужного размера?

Сайт своими руками за 9 часов 45 минут!

Как издать (выпустить) собственную электронную книгу?

 

Просмотров: 129872


А как вам такое представление картинок в мини слайд шоу 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;

Супер, работает без проблем. Спасибо за предоставленное готовое решение! Всех благ автору!

Подскажите, плиз, а какой параметр затемняет экран, хочется немного темнее сделать фон за модальным окном.

Приветствую! Всё чётко и понятно. Ты анонсировал что расскажешь как вставить ВИДЕО в такое вот окошко. Очень хотелось бы посмотреть!

Андрей, спасибо огромное за хороший урок. но у меня вопрос. все картинки работают, но мне надо как то поменять код, что бы изначально картинки были не в центре экрана, а на тех заранее запланированных мной местах, куда я их расставил. как это можно сделать?

прошу прощения за беспокойство. все, разобрался что к чему. огромное спасибо еще раз.

Великолепно!!!

Спасибо.

Доброго времени суток. Ситуация такая: мне необходимо сделать, чтобы увеличенная картинка приобретала свои истинные размеры, а не вписывалась по высоте экрана. Как это сделать?

как увеличивать картинки не прописывая их в коде? картинка загружается пользователем в папку через сайт и эта картинка должна увеличиваться...

Автору кода респект. отлично . и понятно без глюков

Максим я согласен с Вами, авторам большой респект, но я не автор, а всего лишь рассказываю на доступном языке как использовать библиотеку jQuery. А про Авторов здесь: http://www.luksweb.ru/view_post.php?id=274

Андрей, ну что я могу сказать:) Респект и уважуха! Все работает отлично.

Спасибо вам огромное!) очень выручили, все отлично работает

Похоже я тупее всех... знаю 3 прекрасные кнопки "Сtrl+C" и "Сtrl+V". Пользуюсь ими в совершенстве... При нажатии на маленькую картинку, экран темнеет появляется маленькое окошко, а в нем вместо большой картинки высвечивается опять мой сайт. Если ввести адреса картинок в браузере, они открываются.

Вопрос. Почему в IE не рабботает? Всплывающее окно просто белое - картинки нет.

Работает во всех браузерах, и в IE тоже, скорее всего Вы где то допустили ошибку

я сделала, как у Вас написано, но у меня ничего не получается. Картинка открывается в в этом же окне и во весь экран и не перелистывает

У меня картинки открываются в том же фрейме, только в новом окне.. А как в Вашем примере - не выходит.. Что не так??

Крутотень класная, пять минут разобраться. Хорошо что скрипты писать не надо. Для новичков - таких как я самое то!!!

подскажите пожалуйста , почему картинка закрывается при нажатии на любое место??? и где найти урок про видео?

Огромное спасибо за скрипт!! Искала-искала, а тут все так понятно и просто! Еще раз спасибо.

"Вопрос. Почему в IE не рабботает? Всплывающее окно просто белое - картинки нет." Такая же фигня была. Нужно включить все что относиться к Java и еще нажать кнопочку, которая находиться справа в строке поиска и выглядит как разорванный лист. После этого все заработало.

Александру. в IE8 все работает прекрасно, ищите ошибки

Спасибо, все работает отлично, вопрос только один, почему когда я применяю этот урок "Как сделать плавное увеличение картинки при клике" и ваш урок "Галерея изображений с плавно меняющимися картинками" на одной странице сайта плавное увеличение картинки не получается, работает нормально только "Плавно меняющиеся картинки", не получается, чтоб работало все?

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

Ольга, скорее всего у Вас проблема с указанем места где лежат картинки, т.е. проверьте путь до графических файлов, имена файлов, регистры написания (верхний/нижний).

АндрейК, спасибо, что так быстро откликнулись) Путь и имена файлов прописаны правильно... Эти картинки у меня в таблице, т.е. таблица из 4-х колонок, в первой ячейке фотка, во второй описание, в третей фотка, в четвертой описание. Так вот, эти две фотки и не отображаются, а дальше уже нормально. Может это быть из-за таблицы?

СУУУУУПЕР!!! Мне оч понравилось. просто класс!!!

Спасибо. Все очень доступно описано. У меня благодаря вам все получилось. Еще рас спасибо.

блин не разобрался,

Ваш материал рулит! Информативно, классно, доступно, а главное - эффективно. +

Спасибо огромное, для меня это первый "скрип", но нужна помощь! На станичнике разместил несколько "Модальных окон" в разных таблицах, с разным направлении и смыслом в фотографиях по 3шт. При просмотре просматриваются не только нужные 3 фотки, но и все остальные с других "Модальных окон".

Спасибо,всё получилось, только почему-то нет стрелочки,которая листает на следующее изображение...

А,простите,это я не так сделала: у меня каждая картинка лежит в отдельной ячейке, поэтому и стрелочки не было. Если сделать без таблицы - всё чудесно работает. Спасибо!!!

Все супер, автору респект, благодаря таким людям, как Вы хочется двигаться дальше в познаниях неизвестного, спасибо!

спасибо! все получилось только в IE не получается экран становится серым и все(((( не подскажете почему

можно ли чтоб на увеличенной картинки вставить текст?

Генадий, конкретно в этом скрипте вставить текст поверх картинки нельзя. Но кто Вам мешает нанести текст например в фотошопе на увеличенную картинку и получите тот же эффект.

А подскажите, почему не отображаются эл-ты навигации на увеличенной картинке(закрыть, пред, след) и тайтл без рамки и фона ?

Проверьте автоопределение кодировки в 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 всё работает, подтверждаю. Андрей, не подскажете, а можно сделать так, что бы стрелка для переключения след. картинки всегда отражалась бы на картинке, а не только когда на нее наведена мышка? Заранее спасибо!

Спасибо! Все работает! Поддерживаю Ольгу, неплохо былобы чтобы стрелка для переключения всегда отображалась. как это сделать? Спасибо!

Прикольно. Спасибо у меня все вышло здорово.

Большое спасибо! Работает безупречно! Давно хотел такой эффект, благодаря Вам получилось! Браво!!!

Спасибо за скрипт, всё работает, долго искал похожее, но вот есть проблема, почему то картинка открывается в окне, а не так как у вас, поверх окна.

Всё получилось, пропустил скобку >

Подскажите, где ошибся. Картинки открываются не в всплывающем окне, а на отдельной странице.

Такая же проблема. Открываются в отдельном окне, а не во всплывающем. Вроде все делаю правильно, а не помогает. Несколько скриптов пробовал, но проблема остается. Получается javascript не работает, что ли.. В чем проблема, кто подскажет?

Большое спасибо. Все просто и понятно!!!!

Листинг не вставляется в шаблон, cms ругается

Андрей, спасибо большое за статью- искала именно такую фотогалерею.

Давно искал нечто подобное. Большое спасибо, Андрей.

В IE10 не работает...(((

Спасибо!

Спасибо автору, все работает

Автор задумайся о совместимость библиотек работает только на 1.3 бред! данный скрипт не получится использовать если уже есть скрипты работающие на 1.7 или 1.9

Алексею. 1. Я не являюсь автором этого скрипта, я лишь стараюсь донести до Посетителей сайта в простой и доступной форме процесс установки скрипта. 2. Вы наверное не в курсе, но каждая новая версия библиотеки полностью поддерживает предыдущие. Т.е. скрипт успешно работает и со всеми новыми версиями библиотек, в том числе и с 1.7 и с 1.9. Но на момент написание статьи (обратите внимание на дату публикации) самой последней и актуальной была версия 1.3.

Спасибо огромное за статью, очень выручила, искал много как увеличить миниатюры, даже придумывал на CSS, танцы с бубном (....:hover). Спасибо

Прошу подсказать почему может не работать способ( Вроде все сделал как написано, но картинки просто открываются в новом окне. Как будто не принимается во внимание код и ксс, хотя все прописано и пути сохранены.. Отпишитесь плз на буду премного благодарен!

Страницу забыл написать где пытаюсь повторить - http://complectprom.ru/galereya_produkcii/ Помоги пожалуйста!

Исправил пути - вроде все должно работать, но теперь при нажатии просто становиться серый экран, как будто открылась фото, но ничего не открылось( при повторном щелчке все возвращаеться..

Владимир, не видевши вашего кода трудно давать советы и рекомендации. Если пришлете мне по почте свои файлы - посмотрю.

Спасибо большое. Все просто и понятно!:)

Спасибо,очень пригодилось. Не подскажите как увеличить размер поля для текста под картинкой?

изменение размеров окна для размещения контента не дает результата.

Спасибо!!! Респект!!!

Многие спрашивали, вроде бы не было ответа, может пропустил - тогда извеняюсь. Вопрос - Как сделать фон (затемнение) потемнее? строку в css #666 меняю на 555 и ничего не меняеться.. видимо не оно, подскажите где поменять затемнение. Спасибо

Здравствуйте, у меня почему то сначала все работает отлично, но потом все слетает и фотографии увеличиваются на отдельной странице, хотя я ничего не меняла. Переделываю уже в 3 раз, все равно, сначала все хорошо, но через час опять все слетает и фотки открываются в отдельном окне. Скажите в чем может быть причина

Такая же петрушка - картинка открывается в НОВОМ ОКНЕ. Хотя все сделал по прописанной схеме. В ЧЕМ ПРИЧИНА КТО ЗНАЕТ ?

При клике на картинку открывается увеличенный вариант в новом окне Я что то не так сделала?

Спасибо, дорогой!

Супер!! Все работает! Давно искала подобный скрипт. Спасибо Вам огромное!!!!

Автору урока большое спасибо! 2 года уже урож живет )))) Может, кому пригодится. Сделал тестовый сайт с модальными окнами, в которых отображался контент. Залил на хостинг. Потом для этого сайта сделал отдельный хостинг - и вместо букаф - иероглифы. Хотя ничего не менял, все идентично. Бился полдня. Оказалось, на страницах, которые в модальном окне открываются, кодировку надо прописать UTF. Хотя раньше работала кириллица.

Спасибо огромное толковому автору! Все работает, как надо. Супер!!!

Спасибо!!!!!

В Internet Explorer 8 не работает...(((

Почему при клике на картинку открывается увеличенный вариант в новом окне? Как это исправить?

Не работает в хроме, открывается в новом окне картинку

у меня открывается большая картинка в новом окне на белом фоне. что делать ?

у меня открывается большая картинка в новом окне на белом фоне. что делать ?

У меня на сайте, когда я кликаю на изображение, появляется текст "Запрошенный контент не может быть загружен". Что мне сделать?

Добрый день, а как убрать заголовок title у большой картинки, а то у меня края повторяются....

Всем у кого открывается в новом окне: пропишите правильно путь к скрипту, и все будет ОК.

Простите я это не понял: Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами <head> и </head> следующий код Листинг 1: Это в какой файл?

Огромное спасибо! очень все просто и доступно!

Уважаемый Андрей, у меня получилось воспользоваться вашим чудо-методом, но есть одна небольшая проблема( Почему-то меню сайта горизонтальное у меня оказывается сверху моей увеличенной картинки, а все остальное содержимое сайта как бы под низом и затемнено. Из-за чего это может быть?

Екатерина. Это не мой чудо-метод))) , а обычный типовой скрипт. Я просто постарался доступным языком рассказать как его установить на сайт. Что касается Вашего вопроса (затемнение, съехало меню) то здесь с ходу однозначно не могу ничего сказать. Причин может быть много, нужно смотреть код web-страницы.

Андрей, галерея замечательная! Не подскажите, в чем проблема? Делаю все, как у вас на странице, но при нажатии на последнюю картинку не происходит переход на первую.

Дмитрий. Данный скрипт НЕ гоняет картинки по кругу постоянно. А имеет ограниченное число просмотров в каждую сторону.

Уважаемый Андрей, благодарю Вас от всего сердца! Большое Вам спасибо!

Андрей, и я Вас благодарю!!! До сих пор актуально ))) Успехов и процветания! :)

Спасибо!!!!!!!!!!!! Класс! Все получилось;)

Всё работает хорошо Но проверив работоспособность на IE-Tester оказалось что скрипт не работает в IE8 IE9 IE10 появляется окно ошибка сценария fancybox/jquery-1.3.2.min.js Подскажите пожалуйста что делать?

Спасибо! Перечитал множество инструкций, но эта - самая доступная и рабочая!

Уважаемый Андрей, благодарю Вас от всего сердца! Я, бл%№, 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 } за счет класса сразу можно настроить что угодно хоть обтикание текста по картинке хоть отступы......

я в первые вижу сайт на табличной вёрстке - но мне очень понравился - он ! Уважение админу

Было бы хорошо, но скрипт конфликтует с другими скриптами.

Код отличный,да токо вот проблема в том что я его хочу запилить в DLE 10.2 для статических страниц и не как не соображу как это сделать

Денис, могу рассказать, как запилить на ДЛЕ... напиши мне в скайп nyqpblcTuk

а как видео добавить, подскажите

Алена, необходимо на сайт загрузить плаейр, видео, и через бб коды зайдествовать. но это проблемотично т.к. нужно слишком много места на хостинге, поэтому просто выводят плареа ютюба и тд...

Андрей, добрый день. Очень понравился последний вариант открытия изображения во фрейме. Сделала ровно так, как было написано у вас. Все хорошо, кроме того, что img открывается в другом окне во весь размер окна браузера (http://mdtex.ru/dlya-suda). Подскажите, что я сделала не так. Буду очень благодарна.

Андрей, всё получилось , как у вас, только листаются картинки не слева-направо, а сверху-вниз, хотя стрелки стоят слева-направо, что может быть?

Спасибо! Очень выручили!

Спасибо большое

Андрей, доброго времени суток! у меня не получилось почему-то. картинка открывается в новой вкладке, а в окне на этой же странице. не пойму почему. что может быть, подскажите пожалуйста?

Спасибо!

спасибо!

Спасибо ОГРОМНОЕ!!!

Спасибо большое за код, установил, всё шикарно работает, единственное, если сделать увеличение с возможностью пролистывать фотографии, то он листает все фотографии, что записаны на странице. К примеру у меня 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>. Иначе картинки размещаются друг под другом. А так все работает - огромное спасибо.

Все супер, все понятно!!! спасибо большое)

задрасте, возникла проблема при открытии модального окна материнская страница на которой расположено окно скролит наверх под модальным окном? куда смотреть

Спасибо!

Долго искал именно это!! Спасибо! Заработало сразу и так как надо! Очень выручили!!


Источник: http://www.luksweb.ru/view_post.php?id=273

Похожие новости


Самостоятельная правовая система
Сюрприз для папы своими руками на день рождения от
Сделать лунный маникюр в домашних условиях
Как сделать youdo
Надувать шарики гелием в домашних условиях
Как сделать самой сайт в интернете
Химчистка все своими руками
Научиться шугарингу в домашних условиях



ШОКИРУЮЩИЕ НОВОСТИ


Back to Top