Простая фотогалерея для сайта CSS Галерея изображений на CSS Слайдер для сайта с прокруткой Lightbox на CSS. Штиф Васлер Правда IE как всегда не корректно отображает NMitra В IE10 норм. IE бы выжил, если бы автоматически обновлял версии, он не намного хуже Хрома. Да, сейчас он это делает, но ряд пользователей так и застряла на 6. Юлия Нечкина Не могли бы вы более подробно написать, как реализовать это в сообщении? Где прописывать стиль NMitra Юлия, весь код и добавляйте в Сообщение, вместе со стилями. Только предварительно перейдите на вкладку "HTML". NMitra Мне показалось, что cursor: Для Хрома, Оперы и Safari допишите cursor: Повторный клик по увеличенной картинке - она возращается в исходное положение. Дмитрий Может модернизируете один из примеров выше? Видя код, будет понятнее. Иначе картинка становится прозрачной, а что за ней не видно. Можно случайно щёлкнуть по ссылке и перейти неведомо куда. У человека будет полная дезориентация. Формат фотогалереи полностью подходит. Zaur Hure и как это в dle на отдельную страницу добавить?? NMitra Предполагаю, что должна быть какая-нибудь кнопка при написании статьи, по которой можно было бы переходить в режим HTML Анонимный А как с помощью этого стиля сделать одиночную картинку с увеличением по центру страницы? Что я сделала не так? Прямо в статью можно добавлять код, не важно до или после. Анонимный Можно только 8 фото? NMitra А вам сколько нужно? Анонимный Мне нужно было 40, решил вопрос Но проблема, с телефона не закрываются фотки уменьшаются NMitra pointer-events вероятно не поддерживается. После cоздал отдельную страницу, и вставил http: Так что вам придётся реализовать мои идеи. Я могу лишь сделать предположение что не поддерживается. Если сделать так http: Он должен накрывать картинку, что в фокусе. Плюс, давайте и div дадим tabindex. Jamshid Qamarov а как сделать чтоб изначально показывались превьюшки, чтобы страница быстрее грузилась, NMitra Скриптом можно http: Счастья вам, любви и весеннего настроения ; И интересная задачка в качестве вопроса: Смотрите, если галерею поместить в блок с overflow: А как бы сделать так, что бы фото при увеличении, выходило за пределы блока и не обрезалось? Нет слов кроме как восхищения! Вчера два часа над этим думал, гуглил, не получилось, и в сети дельных советов не нашел. Анонимный Подскажите пожалуйста,как загрузить более 8 фото,но чтобы они отображались внутри блока и не портили разметку? Или скриптом рассчитывать центр. Штиф Васлер А получится сделать что бы когда фото увеличено, были стрелки для просмотра следующей-предыдущей фотографии? NMitra Вёрстка должна быть несколько другая Штиф Васлер Совсем другая? Даже кнопочку next со скриптом не повесить? Но нужно время, к сожалению, у меня этого ресурса мало. Если появится минутка, то реализую, но не в ближайшее время http: Нил Муталлапов спасибо Нил Муталлапов Спасибо, у вас интересно NMitra Рада помочь! NMitra Здравствуйте, извините, не в данный момент. Используя данный сайт, Вы обязуетесь выполнять условия этого Соглашения.
Создание фотогалерей для сайта. Подвижный в подвижном Mobilis in mobili. Автор фото-статьи Петров Геннадий,. Если Вы задумали создать свой сайт, то Вы рано или поздно столкнетесь с проблемой создания фотогалереи , по теме сайта или в виде фото-статьи. Для этого существует много программ , причем бесплатных, в которых очень просто сделать фотогалерею для сайта. Алгоритм работы в них предельно прост, а именно: Но данные программы с целевым конечным продуктом , имеют, как правило, мало возможностей для творчества. Например, Вам необходимо к каждой фото написать текст и последовательно при смене фото на экране должен будет появлятся другой текст и тем самым Вы создадите фото - статью по тематике Вашего сайта. Таким методом , на сайте "Подвижный в подвижном" http: Например, статья "Бетон, бетон, бетон". Кроме того , Вам нужна программа, чтобы на выходе, при получении конечного продукта - фотогалереи, на всех страницах фотогалереи стоял логотип Вашего сайта, а не реклама. А реклама ,зачастую, в бесплатно распростроняемых программах присутствует, собственно для этого их бесплатно и распростроняют. Кроме того , Вам нужна "прога", в которой Вы смогли бы для каждой странички написать все тэги для раздела HEAD страницы HTML. Как там ни крути, а поисковик Яндекс на сегодня самый доминирующий в интернете и если фотогалерея не будет индексироваться роботами Яндекса , то Ваш труд никто не увидит. И так мы рассмотрим интересную программу, небольшую по объему, бесплатно распростроняемую в интернете, но на взгляд автора данной статьи очень мощную по своим возможностям. Программа создает фотогалерею страниц формата HTML , но мы с Вами начинающие блогеры и нам выходные файлы HTML более понятны и более подходяд. Программа называется Wizard90, свободно распространяется в интернете , с пожеланием авторов о вознаграждении в добровольном порядке. Сайт программы , указан в программе http: Чтобы понять как работает программа , мы с Вами создадим фотогалерею и назовем ее " Примеры оцифровки фотографий". Для начала мы предварительно должны подготовить сами фотографии к публикации в интернете, а именно: Что мы с Вами и сделаем на первом этапе нашей работы, для этого используем программу FastStone Photo Resizer 3. И так смотрим , поэтапно:. Первый этап - оцифровка фотографий для будущей web - галереи. Открываем программу FastStone Photo Resizer 3. Через пиктограмму поиска программы находим каталог с фото которые мы будем загружать для обработки в данную программу. Чтобы сделать захват их в программу, нажимаем "ОК" См. Фотографии, выбранного каталога, загрузятся в левое окно программы. Правое окно программы - рабочее окно, нам нужно из нашего каталога перебросить фото в это рабочее окно. Чтобы переместить все фото жмем команду "Add Al" и все фото каталога переместятся в правое рабочее окно. Для этого в левом окне мышкой указываем файл одного фото и нажимаем команду "Add", при этом способе захвата фото в программу переместится одно фото. Такм способом мы сможем в рабочее окно программы переместить не все фото каталога, а те что нам нужны для слайд шоу. Далее, необходимо сделать важную процедуру в данной программе - указать каталог , куда будут записываться, оцифрованные в данной программе, фотографии. Мы заранее создали у себя на винте "E" каталог - "приемник" с названием "foto умен с защитой" Нажимаем кнопку команды "Browse" справа внизу Cм. Далее, для фото в меню оцифровки фотографий жмем кнопку команды "Advanced Options" справа внизу основного окна программы См. Открывается меню оцифровки фото, меню имеет 10 вкладок и при открытии каждой вкладки открывается подменю, отвечающее за определенные операции по оцифровке фото, например, за изменение размера, написание надписи, нанесении водяного знака и т. Для "облегчения" наших фото по весу в Кбайтах нам нужна первое подменю "Resize" - изменение размера фото, мышкой устанавливаем галочку в этом подменю в окошке "Resize" Cм. Открывается меню команд вкладки по изменению размера фотографии. В программе имеются три режима изменения размеров фото. Предварительно можно посмотреть как изменятся наши фото после конвертации фото, жмем внизу меню иконку с "лупой" Cм. На экране мы визуално сможем увидеть, предварительно, до конвертации, до каких размеров уменьшаться фотографии, при этом можно будет просмотреть фото всего каталога. Далее нам необходимо защитить свое авторское право на публикуемые фото, как мы уже говорили, нам необходимо для этого нанести надпись на фото. Для этого, открываем вкладку меню "Text" Cм. Появляется окно-меню , ставим мышкой галочку включения команд данного меню в окне"Add Text" и отрываются команды меню и поля заполнения и контроля за надписями. Если мы в этом меню нажмем клавишу команды по установке и настройке шрифтов "Font" , то мы сможем проэксперементировать и установить красивый шрифт. Когда мы пишем текст надписи, одновременно внизу на синем поле, изображающем поле будущего фото, появляется надпись для визуального контроля. Но , кроме этого, мы нажав внизу на пиктограмму с "лупой" можем посмотреть как надпись легла на конкретное наше фото См. Смотрите как это выглядит в программе См. И последнее, что нам осталось, нанести красивые рамки на фото и тень. Для этого открываем новую вкладку меню "Border" и ставим галочку в окно Appy Border Effects" вызова команд данного меню. Открываем данное меню, ставим, как и в предыдущих вкладках, гапочку в окно "Appy Border Effects для вызова команд меню. Внизу картинка пейзажа - условное фото, на нем будут отображаться все наши "эсперементы" с рамочками и эффектами теней. Внизу на фото показаны какие мы выбрали настройки по устаноки рамок и теней. В данном меню как и в предшествующих можно визуально посмотреть, как на наших фотках будут выглядеть рамки и эффекты. Визуально мы увидели , что при установке рамочек , надписи стали некрасиво ложится на фото, попали на тень. Смотрим фото внизу , там описано как можно двигать надписи по полю фото. После корректировки расположения надписи, надпись можно так же уменьшить или увеличить по размеру, при визуальном просмотре фото нас все удовлетворяет. В меню "Text" можно двигать расположение надписи на фото командно , в окошке "Position" устанавливаем нужны нам режим, на фото внизу установлен режим "Buttom-Center" расположение внизу - центр. Соответственно и на синем условном поле фото надпись встала "внизу и в центре". На синем поле условного фото левой клавишей мыши заэимаем напись, и не отпуская двигаем надпись, через пиктограмму просмотра смотрим как она легла на фото. Если нас все устраивает жмем "ОК" См. Возвращаемся в основное меню и нажимаем команду начала конвертации фотографий, для этого нажимаем кнопку "Convert" См. Открывается окно конвертации программы "Image Convert" , где мы наглядно видим процесс конвертации фотографий. Результат конвертации, после её окончания, будет виден в окне так: Для завершения процесса , нам остается только нажать копку "Done" См. Открываем наш каталог - приемник и смотрив наши фото, уже сконвертированные. Дважды нажимаем левой клавишей мыши по файлу фото и сморим результат. Сконвертированные фото имеют уменьшенный размер для публикации в интернете, рамку и тень и зашитную надпись. Все, первый этап подготовки фото к публикации в интернете нами сделан. Второй этап - создание web - фотогалереи. И так, у нас есть каталог- приемник, в котором лежат наши подготовленные к публикации фотографии. Для этого используем программу "Gallery Wizard" о которой упоминалось в начале статьи. Агоритм работы данной программы предельно прост. Делается захват каталога с фото в программу, производятся настройка меню будущей галереи, настроки выходных файлов и дается команда на конвертацию, программа автоматически создаст web-галерею. Почему хотелось остановиться в работе по созданию web-галереи именно на этой программе? В этой программе авторами заложена одна "изюминка", в настройке выходных файлов, если у Вас есть хоть какие-то знания языка разметки HTML, т Вы сможете выставить "ТЭГ"и в разделе НЕАD какие хотите, можете скорректировать механизм листания фото , скоректировать переходы с галереи на Главную сайта или вообще на Вашу какую-то страницу, можно менять расположение кнопок листания, можете описать какой-то объект банер, счетчик, логотип и он будет отражаться на каждой странице Вашй фото-галереи. И наконец, самое главное, в этой программе Вы сможете вносить текст к фотографиям. В общем большой респект авторам данной программы!!! Прога бесплатная, но на мой взгляд даст очков вперед любой платной прграмме, тем что в ней заложен элемент творчества. Так выuлядит иконка программы на рабочем столе. Делаем клик мышкой по данной пиктограмме программы. Открывается рабочее окно программы. Ввержу программы вкладки настройки нашей будущей web-галереи. Слева, ниже, окно захвата каталога фотографий из которых генерируется галерея. Окно заполнено , так как на программе раньше работали. Кстати, это очень удобно, так как, программа обладает большими возможностями по настройке вида выходной галереи, то можно еще раз сгенерировать галерею и поробовать это сделать несколько раз, с получением разных вариантов галереи. Убираем следы предыдущей работы, очищаем окно программы. Для этого жмем кнопку "Clear All". Первое что мы делаем , это делаем "захват" каталога с фото в программу. Мы помним, что фото, предварительно, подготовлены к публикации. Осуществляется обычный поиск каталога, как в любой win оболочке, выбирается каталог с фото и жмем "ОК" См. Кроме команды " Add directory " , в меню есть команда " Add File s " - загрузка файла или файлов в программу. Эта команда позволяет загружать фотографии не всего какого-то каталога , в выборочно по-одному или группами, что на практике зачастую и делается. Имеется команда " Sort " для сортировки фотографии , имеет два режима Один режим Sort by Filеname - сортировка по наименованию файла. Мы знаем что файлы фотографий на цифровых фотоаппаратах номеруются фотоаппаратом автоматически. А нам, допустим, галерею надо создать с определённым порядком. Мы с Вами в таком случае пререименовываем файлы наших фото, как нам надо, то есть в том порядке как мы хотим их видеть в фотогалереи. После переименования файлов фото, мы загрузив их в данную программу нажимаем команду Sort by Filеname и фото встают web- галерею в том порядке в каком мы присвоили им номера. Со вторым режимом сортировке , предлагаю разобраться самим, чесно говоря автор данной статьи так не понял как работает второй режим сортировки. Заходим в подменю настройки меню будующей web - галереи , вкладка " Thumbnail Options " Настраиваем вид аваторок уменьшенных фото которые будут в меню web - галереи, настраиваем изменение названий перекодируемых файлов фото. Далее , входим в подменю настройки входных файлов, вкладка " Input Options " Ставим галочку в окне " JPEG " и устанавливаем степень сжатия фото , в окне " Compression QuaLity ". Переходим в подменю выходных настроек, вкладка " Output Options " и настраиваем следующие параметры:. Переходим в меню настройки страницы каждой фотографии , "кликаем" по вкладке программы Image Page страница фото В зависимости от того включаем мы или нет режим создания HTML страницы для каждого фото у нас на выходе можно получить галлерею двух видов. Без создания HTML страницы web- галерея получается упрощенного типа, в варианте создания HTML страниц открывается полная свобода творчества в данной программе по оформлению и по установке команд листания и установке линек. Для сравнения обоих методов попробуем , сначала, простой метод - без создания HTML страниц. Сгенерированная галерея смотрится в интернета так.. При этом вид у галерее мягко говоря "не фонтан". Нет меню, нет логотипа сайта, нет названия web - галереи. Открывается фото путем нажатия на аваторку в меню См. В этом случае мы сможем подправить вид галереи програмой Macromedia Dreamweaver 8 , загрузим файл index1. В этой же программе - Macromedia Dreamweaver 8 вставим в файл index1. Сохраняем измененный файл управления галереей index1. Снова смотрим что получилось. Сечас вид меню галлереи весьма приличный. Так будет выглядеть каждое фото галереи при нажатии аваторки в меню галереи. Но возврат из просмотра фото на страницу меню очень неудобный. Для просмотра созданной в этом варианте галереи жмите ссылку Галерея вариант N 1. Теперь расмотрим другой вариант генерации фотогалереи в программе "Gallery Wizard". Установим в окошке "Greate a HTML Page for every image" вкладки "Image Page". На фото окончание тэгов раздела HEAD нашей страницы HTML , код открытия раздела BODY , описание цвета фона страниц HTML. Как мы знаем, раздел BODY - это тело страницы HTML , поэтому в нем описан логотип сайта и название web-галереи. Хочу отметить что не могу Вам описать всех возможностей данной настройки , так как здесь можно применить все возможности языка раметки текстов HTML. Например, кроме вставки логотипа, можно описать вставку GIF файлов , счетчика и многое , многое другое, что нам позволяет язык HTML. Ладно, прошу извинения за лирику, идем дальше по данному описанию нашей страницы. Далее описан механизм листания фото на экране при просмотре слева на право и наоборот, и описаны линьки на меню галереи и на главную страницу сайта. Здесь можете поэксперементировать, этот код у нас описан перед фото, его можно также расположить после фото , попробуйте! Далее описан текст, в данном случае перед фото, можно его описать после фото, попробуйте! Далее описан блок открытия фото в окне просмотра галереи. Далее в разделе BODY описан код счетчика Яндекс Метрика. Если у Вас есть сайт, вы можете зарегистрировав сайт в Яндексе палучить код Яндекс Метрика, для более подробного сбора сведений о посещении Вашего сайта необходимо его устанавливать на все страницы сайта. В текст кода не вдавайтеь, если он у вас есть, просто скопируйте его в последнюю строку раздела BODY. Код счетчика не обязательно устанавливать от Яндекса , можете установить свой, то есть такой какой у вас есть на сайте. Далее, после описания кода счетчика закрывается раздел BODY и страница HTML. Настройка последнего раздела программы выполнена и нам остается только дать команду программе на генерацию галереи, жмем кнопку " Go " См. Заходим в каталок - приемник, куда программа выгрузила сгенерированную галереи и запускаем ее , запускаем файлом index1. В интернете меню галереи выглядит так. Как и в первом случае, то есть создание галереи без генерации страниц HTML для фото, прибегаем к помощи программы Macromedia Dreamweaver 8. Из страницы HTML фотографии копируем в файл index1. Техника копирования , как в любой оболочке WIN: В этой же программе - Macromedia Dreamweaver 8 , вышеуказанным способом, копируем из файла HTML описывающего фото галереи код счетчика и вставляем его в файл с меню галереи index1. Также методом копирования и устанавливаем его в конце блока BODY , после счетчика. Сохраним сделанные изменения в файле index1. Почему и в первом случае, генерации галереи без HTML страниц для фото и во втором случае, с генерацией страниц Это, так скажем, недостаток программы "Gallery Wizard" , в программе есть вкладка настройки страницы HTML для фотографий галереи, а вот такой же страницы для меню галереи разработчики недогадались сделать. Но, на мой взгляд это всего лишь й один несущественный недостаток в программе, который легко исправляется программой Macromedia Dreamweaver 8 , и данное неудобство с лихвой перекрывается несомненными достоинствами данной программы. Далеее запускаем нашу созданную галерею , запускаемый файл - index1. Меню программы у нас полностью доработано: Для просмотра созданной в этом варианте галереи жмите ссылку Галерея вариант N 2. На первый взгляд процесс создания WEB фотогалереи может Вам показаться сложным , но смею Вас уверить, как только Вы сами, самостоятельно, пройдете описанную в данной статье цепочку действий , то создание фотогалереи для сайта для Вас станет очень простым и обыденным делом и будет занимать буквально от 10 до 40 минут. Автор статьи желает Вам успехов в сайтостроении и надеется что данная статья пригодится Вам в работе. На фотографии описаны блоки кода страницы HTML которая будет программой генерироваться для каждой фотографии web-галереи.. Тэги раздела HEAD описаны как пример, т. На фото начало раздела HEAD.
https://gist.github.com/b9cbdc6dfcfa225d465d70b8aa12439f
https://gist.github.com/9ec2f6b38b1fc257a55782e7341a7efa
https://gist.github.com/fe92698704f069a755335564971f723e