![](https://shpirat.net/wp-content/uploads/2015/08/gal_test-905x198.png)
Всем привет! Попросил меня недавно один человек помочь ему с галереей на сайте.
Надо ведь показать людям фотографии выполненных работ. А хочется сделать это красиво и удобно!
Ну вот и накатал быстренько для него галерею, а вещь получилась не плохая, поэтому решил и тут выложить тоже 🙂
Все исходники и структуру базы оставлю в конце статьи.
Посмотреть галерею в работе можно вот тут.
Но на том сайте можно лишь просмотреть. А если охота испробовать все возможности галереи, то можно глянуть её здесь.
![Галерея без авторизации](/wp-content/uploads/2015/08/no_buttons-300x231.png)
Я специально отдельно её выложил, чтобы можно было побаловаться и потрогать её наяву 🙂
На логотип компании Оазиз можно не обращать внимания, ведь я просто оттуда и скопировал всё с того сайта и поместил на наш)
Как видим, никаких кнопок управления нет. Что бы управлять галереей, необходимо авторизоваться на специальной страничке авторизации вот тут: http://galery.shpirat.net/login.php.
Пароль для входа: test_pass
(авторизация теперь не требуется, можно смотреть и пользоваться полноценно даже без авторизации)
![Кнопки управления после авторизации](/wp-content/uploads/2015/08/gal_test.png)
После правильного ввода пароля откроется снова главная страница, но уже будут доступны кнопки управления.
Пока что перейти на страницу авторизации можно лишь напрямую по ссылке, но я думаю, никому не составит труда вставить прям в страничку ссылку для входа ) Просто нам этого не нужно было, это ведь галерея и не должно ничего лишнего быть при просмотре обычным людям, поэтому и решено было убрать ссылку для входа)
Можно создавать папки, в этих папках — альбомы, а в каждом альбоме — фотографии (та игла — в яйце, то яйцо — в утке, та утка — в зайце, а заяц в шоке от всего этого!).
Ну, редактировать названия папок и альбомов тоже можно, а так же удалять их, ну и фоточки тоже удалять можно, а как же иначе? 🙂
Для загрузки фотографий нужно зайти в какой-то альбом, и нажать на значок фотоаппарата или перетащить изображения прям туда. За раз можно загружать сколько угодно изображений… )
Все действия производятся AJAX-запросами, поэтому страница не будет перезагружаться, что весьма удобно )
![Куда кидать изображения для загрузки](/wp-content/uploads/2015/08/upload.png)
Если альбом пуст, то его превьюшка будет просто в виде картиночки фотоаппарата. Если же загрузить какие-то картиночки в альбом, то первая картинка и станет превьюшкой альбома. Но, кстати! В базе, в табличке `albums` есть поле `preview_url`, и это поле отвечает за превьюшку альбома. То есть можно там прописать любую другую превьюшку для альбома. Но так как это не нужно было для наших задач, то я и не стал делать это в редактировании альбома. Но зато при выводе альбома и в базе это есть. Так что можете использовать, если доделаете это)
Так же дела обстоят и с картинками. Там предусмотрено название картинок (в табличке `photos` поле `title`), и если оно есть, то будет выводиться при просмотре изображений.
Теперь немного подробнее о технических деталях и используемых штуках.
Загружаются изображения с помощью удобного jQuery-плагина для загрузки файлов «dmuploader».
При загрузке изображения создаётся его миниатюра, за это отвечает php-класс SimpleImage, найденный на просторах интернета. Там ничего сложного нет.
Для работы с базой используется класс safeMySQl. Удобная вещь, которая к тому же позволяет хоть немного забыть о безопасности передаваемых значений, т.к. сама берёт на себя защиту входных данных, используя placeholder-ы.
Ну, и для вывода изображений используется простенький jQuery плагин «magnific popup».
Всё это можно легко найти по названиям.
Оставалось лишь соединить эти части воедино, написать скрипт авторизации, класс для работы с базой именно в плане альбомов и фотографий, клиентскую часть, ну и сделать так, чтобы всё это вообще работало 🙂
Есть некоторые настройки. Редактировать их нужно в файле configs.php.
Там можно задать параметры для подключения к базе, а так же пароль для входа. Пароль не хранится в базе. Это ведь простая галерея, однопользовательская.. )
Галерея была сделана достаточно быстро, даже можно сказать «на коленке». Поэтому вполне возможны ошибки и недочёты даже в такой простой штуке, как эта галерея. А так же возможна небольшая запутанность кода и трудность чтения в связи с тем, что идут порой вперемешку php и html куски кода… )
Ничего сложного в этой галерее нет, но может быть кому-то пригодится она, поэтому и было решено поделиться ею.
Учтите так же то, что написана она была для сугубо-простых задач, с которым вполне справляется, а если что-то нужно дополнительное, то никто не запрещает дорабатывать. К тому же, исходник класса для работы с базой хорошо прокомментирован, так что не возникнет трудностей для добавления чего-то нового )
Как и обещал, делюсь исходниками, а так же SQL-файлом, содержащим структуру базы и табличек:
galery_test.zip
А так же есть на BitBucket: https://bitbucket.org/shpirat/php-galery/
[UPD. 17.03.017]: время идёт! В новых версиях MySQL по-умолчанию включен строгий режим, а это означает, что те поля в табличках, у которых нет default-значений, должны в запросах обязательно получать значения при вставке данных, иначе будет ошибка. Поэтому можно либо задать default-значения полям в табличках, либо покрутить настройки mysql (если есть доступ к файлу настроек) и дописать или изменить там этот параметр вот так:
sql-mode=NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
Если будут какие-то вопросы или замечания, с радостью выслушаю. Пишите в комментариях или в отзывах 🙂
[UPD. 17.10.018]: прошло ещё какое-то время, немного доработанную версию галереи, но с модулем highslide для показа изображений можно посмотреть тут:
Действующая, живая, рабочая версия, а не просто сферическая демка в вакууме какая-то 🙂
Пишу курсовую, очень мало времени осталось,подскажите пожалуйста как разместить , нужно чтоб на серверной части при общей авторизации было редактирование, а на клиентской на другой странице просто отображение…
Если не сложно…
Здравствуйте! Написал вам на почту, все подробности там )
Хорошая статья, галерея классная, все встало и отлично работает, спасибо большое автору!))
Добрый день!
Я делаю похожий на вашу галлерею проект в целях обучения.
Можете переслать мне ваш ответ на вопрос Анны?
Опишите, если не сложно, принцип как делать сортировку фотографий в раллерее при помощи drag and drop.
Спасибо!
Здравствуйте, скажете, а как сделать так, чтобы изображения выводились в обратном порядке — сначала новые, и т.д…
Здравствуйте! Это не сложно сделать 🙂
Достаточно в файле dbmanager.php, что находится в папке libs/ найти вот этот код и изменить SQL-запрос. Код находится на 65-ой строке:
[php]
public function getAlbumPhotos($album_id) {
return $this->db->getAll(«SELECT * FROM `photos` WHERE `album_id`=?i», $album_id);
}
[/php]
Это оригинальный код для обычного порядка. Чтобы показывать сначала новые, нужно сделать так:
[php]
public function getAlbumPhotos($album_id) {
return $this->db->getAll(«SELECT * FROM `photos` WHERE `album_id`=?i ORDER BY `id` DESC», $album_id);
}
[/php]
Должно прокатить 🙂
Если не получится — пишите. Потому что я написал это не проверяя, но всё должно получиться )
Fatal error: in C:\OSPanel\domains\galery2\libs\safemysql.php on line 623
в файле safemysql.php строчка 623:
throw new $this->exname($err);
помогите решить проблему
Да, всё получилось, спасибо!
И ещё вопросик: возможно ли сделать в галерее подписи к фото?
Добрый день! Рад, что всё получилось с предыдущим вопросом )
А на этот вопрос у меня тоже есть ответ! Я заранее предусмотрел в базе, в табличке с фотографиями поле `title`, в которое можно занести название для картинки )
Единственное, чего не сделал — это саму форму или способ приписывать название к фотографии. Но это не трудно сделать )
Сейчас вручную приписал в базе, вот результат:
![Подпись к изображению](https://shpirat.net/wp-content/uploads/2016/11/2016-11-11_16-52-55.png)
Как видно, слева внизу появляется подпись )
Если нужно, то могу дописать код, но думаю, что лучше будет связываться уже более удобным способом, нежели комментариями здесь.
Поэтому можете перейти на мой сайт, кликнув на моё имя у этого комментария, а на сайте, на странице «Обо мне» есть ссылка на мой профиль в ВК 🙂
Если не сложно, можете помочь с кодом?
Ошибка при получении json-данных в ajax-запросе
Добавил в конец статьи рецепт, как починить.
Спасибо за обращение!
Добры йдень,
sql mode NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
установлено, но не помогло ((
Оу, возможно, дело в другом ещё. Могу помочь разобраться, пишите в личку или в ВК (можно найти по моему нику и т.д. 🙂 )
все заработало! Огромное спасибо, простой но очень удобный макрос.
Подскажите пожалуйста, как сделать что бы в папке была еще одна папка? Буду очень благодарен.
Оу, увы, сейчас это не реализовано.. )
Но если надо, то можно, конечно, попробовать сделать )
Кто может помочь разобраться?
Добрый день )
Что там у вас такое? )
При добавлении папки появляется ошибка «Ошибка при получении json-данных в ajax-запросе» в функции postJSON
Этой галерее уже много лет, что-то могло измениться в мире, что стало несовместимо с ней… 🙂
В любом случае, можете найти меня в ВК или в телеграме по нику karamush, там смогу вам помочь оперативно, чем тут )
Спасибо огромное автору)) связались, оперативно нашел проблему, чем очень помог))