Демонстрация
Вот так будет выглядеть фото галерея в самом конце пути:
На картинке выше мы видим цифры 1,2,3 прямо на превьюшках, раньше вместо этих миниатюр были ссылки в виде 1,2,3. После того как мы внесли изменения в скрипт вместо обычных текстовых ссылок появились эти миниатюры, по ним можно кликать и перемещаться на страницу с оригинальным изображением, которое можно увидеть в самом низу. Его я решил переместить в низ, тк по моему это очень удобно. При этом во время клика по превью картинки страница прокручивается в самый низ к началу оригинального изображения, а по клику на оригинальное фото происходит переход на следующую страницу. Это делается с помощью html якоря.
Так же с помощью js плагина мы сделаем сетку из изображений, который автоматически будут формировать из превьюшек мазайку которая сможет адаптировать их размер под ваш монитор, а у кого отключен js в настройках браузера, мы им предложим довольствоваться и насложлаться структурой сайта с помощью таблицы table, она и будет равномерно распределять маленькии копии картинок.
На скрине выше я уменьшил окно браузера, немного сузив его, вся мазайка из превьюшек перестроилась и подкорректировалась под новые размеры, если продолжить уменьшать ширину окошка, то в итоге все миниатюрные картиночки выстроятся в один ряд, как раз под размер мобильного устройства. Но в этом случае придётся средствами css организовать удобный просмотр и оригинального изображения. Демонстрировать я не буду, тк картинка получается вытянутой, длинной и не вписывается в дизайн сайта, хотя скорее всего если не забуду то добавлю скрины с онлайн сервиса, который показывает как выглядет сайт в разных устройствах.
Как добавлять материал (Особенность)
В этой галерее есть один небольшой минус, хотя наверно он не один их несколько, но об этом я напишу немного ниже: Минусы, но эти минусы можно исправить с небольшим знанием php и html.
Вот например добавление фото займёт определённое время, которое можно сократить с помощью небольшого скрипта добавления, который будет в автоматическом порядке задавать структуру новостей, но а пока что вам придётся воспользоваться такой схемой:
Тут мы видим, что в краткой новости нам придётся выставлять ссылки на картинки, оборачивая их тегами "thumb ", именно с краткой новости мы будем выдёргивать превьюшки для навигации. А в полной новости нужно помещать их в теги "center " и "img ", а в конце каждой картинки ставить тег "PAGEBREAK", кроме самой последней. Именно такое строение новости будет идеальным.
Да и еще в админпанели, в настройках изображения, я задал параметры для картинок, вот такие:
Тут вы можете поэкспериментировать самостоятельно, такой размер я выбрал для более идеального адаптивного перестроения галереи под различные устройства.
Реализация
Итак теперь остаётся всё это реализовать на своём сайте. У меня установлен движок DLE 10.5, если у вас другая версия, то скорее всего нечего страшного.
1. Открываем файл show. full. php. и вносим в него следующие изменения:
На 282 строчке ищем вот такой кусочек кода:
Перед ним вставляем:
//////////////////// фотога лерея PAGEBREAK
Получается как то так:
2. Далее в этом же файле ищем где то на 453 строчке:
И перед этим ставим следующий код:
Именно выше написанный код (который написал один хороший человек, в icq его данные я потерял, но если вспомню или найду то напишу его имя) позволит вам изменить вид навигацию по своему усмотрению. Допустим теперь вместо ссылки с цифрой 1, вы можете поставить превью к картинке оригинал которой размещен на следующей странице. Вот таким образом:
Например на 432 строчке заменив:
На:
То есть теперь тег image-1. стал рабочим в файле show. full. php. где цифру 1 задаёт переменная $j.
Оформление:
Теперь вам предстоит поковыряться немного в коде, прописать теги img которые будут выводить адрес превьюшки и уже на странице вместо навигации появятся долгожданный уменьшенные копии изображений. Не забывайте что кавычки тут нужно экранировать, иначе появится ошибка.
Если вы не хотите всё это проделывать, то можете скачать мой файл: show. full. zip [12,64 Kb] (cкачиваний: 15). далее отредактировать его под себя, удалить лишнее и тп.
Всё выше написанное наверно подойдёт для тех кто разбирается в DLE, им достаточно наверно одного кусочка кода, а всё остальное, плагины, оформление подключить для многих не составит труда, но есть люди для которых это будет сложно, поэтому я выкладываю ниже шаблон с подключенными скриптами, и со всей проделанной работой. Достаточно загрузить шаблон, заменить файл show. full. php. и оформить главную страницу будущего фотоальбома.