Фотогалерея, оптимизация кода

NikolayHAOS · Регистрация: 29.10.2013

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток.
Есть сайт сельской школы.
На него практически ежедневно выкладываются новости (пример новостной страницы) В теле страницы есть картинки.
Они выкладываются с помощью вот такого кода.

HTML5
1
2
3
4
5
<p>
<a href="https://www.cyberforum.ru/images/2017/08/09/DSC08878.JPG" rel="lightgallery[flowers]"><img src="https://www.cyberforum.ru/images/2017/08/09/DSC08878.JPG" width="454" height="auto"> 
<a href="https://www.cyberforum.ru/images/2017/08/09/DSC08881.JPG" rel="lightgallery[flowers]"><img src="https://www.cyberforum.ru/images/2017/08/09/DSC08881.JPG" width="454" height="auto"> 
<a href="https://www.cyberforum.ru/images/2017/08/09/DSC08884.JPG" rel="lightgallery[flowers]"><img src="https://www.cyberforum.ru/images/2017/08/09/DSC08884.JPG" width="454" height="auto"> 
</a></p>

Вопрос как бы оптимизировать сие действие, ДО например указания пути к картинкам.
Как-то так.

HTML5
1
2
3
4
5
<p><div class="Photogallery">
<a href="https://www.cyberforum.ru/images/2017/08/09/DSC08878.JPG"> 
<a href="https://www.cyberforum.ru/images/2017/08/09/DSC08881.JPG"> 
<a href="https://www.cyberforum.ru/images/2017/08/09/DSC08884.JPG"> 
</a></div></p>

Сохранив при этом функционал галереи (увеличение по клику, масштабирование и переход между картинками)
Или же вообще чтобы скрипт подгружал все картинки из указанного каталога делал и сам превью.
Сайт редактирую через Microsoft Office SharePoint Designer 2007
Или проще оставить все как есть и это нормально?
Если честно даже не представляю есть ли возможность подобной оптимизации.

Скрипт существующий в шаблоне страницы.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript" src="../../../js/special.js"></script>
 
<link href="../../../lightgallery/skins/shape/style.css" type="text/css" media="screen" rel="stylesheet" />
    <script src="../../../lightgallery/lightgallery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    lightgallery.init();
 
    var AJAX = (function(){
 
      var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
 
      return {
 
        get : function(url, callback, context){
          req.open('GET', url);
          req.onreadystatechange = function() {
        if(req.readyState == 4){
            callback.call(context || window, req);
        }
          };
          req.send(null);
        }
 
      }
 
    })();
 
    var someObj = {a : 'test'};
 
    function loadImages() {
      AJAX.get('load.html', function(req){
        document.getElementById("moreImages").innerHTML += req.responseText;
        document.getElementById("load_new").style.display = 'none';
 
        lightgallery.init();
      }, someObj);
    }
    </script>

@Ares111 · 11.08.2017, 11:13

Очень бы рекомендовал вам оставить как есть, не стоит искать себе сложности на ровном месте. Если работает, то не стоит трогать )

@SiarheiSiarhei · 11.08.2017, 14:03

есть вариант..
http://sachinchoolur.github.io/lightGallery/
как, вариант - включения блока -

HTML5
1
<iframe src="lightGallery/index.html" align="center" frameborder="0" scrolling="no" allowtransparency></iframe>

у меня есть такое - работает на ура...
Да, и - сложного не вижу...

NikolayHAOS · 11.08.2017, 14:47 **[ТС]**

Сообщение от SiarheiSiarhei

есть вариант..

Очень интересно, пойду смотреть как там и чего.
Огромное спасибо за наводку, весь инет перерыл что бы найти такое, Благодарю от всей души.
Как разберусь отпишу.

Добавлено через 7 минут
Поспешил я, есть у меня указанный архив галереи среди скаченных.
Уже не помню почему забраковал, НО раз советуете посмотрю внимательней что там и как.

Сообщение от SiarheiSiarhei

как, вариант - включения блока

И куда этот код включать?

Сообщение от SiarheiSiarhei

у меня есть такое - работает на ура...

А можете дать ссылку? Чтоб посмотреть как у вас сделано.

@SiarheiSiarhei · 11.08.2017, 15:29

тут не дают такое сделать...

Добавлено через 56 секунд
тут это как реклама

NikolayHAOS · 12.08.2017, 09:39 **[ТС]**

SiarheiSiarhei, Можно в личку кинуть :-)

Добавлено через 18 часов 6 минут
Разобрался я с данным модулем фото галереи.
В итоге получил код вида.

HTML5
1
2
3
4
5
6
7
8
9
       <div>
            <ul id="lightgallery" class="list-unstyled row">
                 <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" >
                    <a href="">
                        <img class="img-responsive" src="img/thumb-13.jpg">
                    </a>
                </li>                   
            </ul>
        </div>

Смог упростить до

HTML5
1
2
3
4
5
       <div>
            <ul id="lightgallery" class="list-unstyled row">
                 <a href="" data-src="img/1-1600.jpg"><img src="img/1-1600.jpg" width="454" height="auto">           
            </ul>
        </div>

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

Страница с моим экспериментом вот тут.
http://www.kanewshool44.ru/demo/index.html

Полный код страницы.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jQuery lightGallery demo</title>
        <link href="../dist/css/lightgallery.css" rel="stylesheet">
        
        
        <script src="../dist/js/jquery.min.js"></script>
 
    </head>
    <body class="home">
                    
 
 
        <div>
            <ul id="lightgallery" class="list-unstyled row">
            <a href="" data-src="img/1-1600.jpg"><img src="img/1-1600.jpg" width="454" height="auto"> 
            
            
            
            
                
                <li class="col-xs-6 col-sm-4 col-md-3" data-src="img/2-1600.jpg" >
                    <a href="">
                        <img class="img-responsive" src="img/thumb-2.jpg">
                    </a>
                </li>
                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" >
                    <a href="">
                        <img class="img-responsive" src="img/thumb-13.jpg">
                    </a>
                </li>
                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg" >
                    <a href="">
                        <img class="img-responsive" src="img/thumb-4.jpg">
                    </a>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#lightgallery').lightGallery();
        });
        </script>
       
        <script src="../dist/js/lightgallery-all.js"></script>
        
    </body>
</html>

Подскажите пожалуйста КАК с минимальным количеством кода на странице можно заставить работать галерею.

@SiarheiSiarhei · 12.08.2017, 10:00

https://codepen.io/search/pens... =type-pens

смотри и учись...

NikolayHAOS · 12.08.2017, 10:38 **[ТС]**

SiarheiSiarhei,
да не, там не то.
Там очень много лишнего кода. А у меня задача наоборот с сохранением необходимого функционала минимизировать код.
Ведь одно дело выставить фото на главную страницу сайта раз в год или полгода, со всеми превьюшками и прочими прибабахами, а другое дело делать это по 2-3 раза на дню, тут не до писанины в ручную.
Нужно максимально автоматизировать сии процессы, а для этого нужно сам код свести к минимуму.
З.Ы. Для примера работаю в Microsoft Office SharePoint Designer 2007, при добавлении картинки дезингер создает вот такой код.

HTML5
1
<p><img src="https://www.cyberforum.ru/images/2017/02/03/IMG_3593.JPG" width="1024" height="768"></p>

Копирую данный код в Notepad++ и нажатием трех клавиш (запуск макроса) получаю

HTML5
1
2
<p><a href="https://www.cyberforum.ru/images/2017/02/03/IMG_3593.JPG" rel="lightgallery[flowers]"><img src="https://www.cyberforum.ru/images/2017/02/03/IMG_3593.JPG" width="454" height="auto"> 
</a></p>

Если и это как-то можно упростить, то вообще стало бы отлично.

Добавлено через 28 минут
Вообще как правильно добавлять фото на сайт?
Неужто вручную прописывают пути к файлам?

@SiarheiSiarhei · 12.08.2017, 10:41

ищи, что за пивом - еще бегает...

NikolayHAOS · 12.08.2017, 14:05 **[ТС]**

Добавлено через 3 часа 22 минуты

Сообщение от SiarheiSiarhei

ищи, что за пивом - еще бегает...

Я тут сам в себе и в своих думах, сразу и не понял о чем разговор.
Нее.. я не об этом тоже, не прошу что либо делать за меня.
С галереей разобрался прикольная штука.
Вопрос стоит как добавлять файлы в данную галерею?
В прямом смысле слова как это сделать, через какой либо софт (ну не ручную же в нотепаде код печатать) возможно ли это автоматизировать, добавление кода на страницу.
Вот что интересует.
Как я делаю на данный момент отписал выше.

@SiarheiSiarhei · 12.08.2017, 20:30

Да, как не крути - фото - все ровно и подгонять и форматировать и т.д. через js так еще все по особому именовать..
вот тут через js ...но текст и фото обрабатывать - кому то надо..
http://zafixirui.com/vitebsk.html

Добавлено через 2 минуты
это - бабам - интересно - +интерфейсы в "цветочек"... А, по сути - на фик кузнец на сеновале...

NikolayHAOS · 12.08.2017, 22:08 **[ТС]**

SiarheiSiarhei,
Неее...
Что не говори, а в ручной труд не верю, где где ну уж точно не в web проектировании.
Более чем уверен есть настройки в редакторах:
Ты тупо мышкой перетягиваешь картинку на страницу (а то и всю папку) и вуаля в коде страницы появляются ссылки на картинки в необходимых параметрах обрамления кодом.

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Ares111 59 / 22 / 12 Регистрация: 30.05.2017 Сообщений: 73
	11.08.2017, 11:13
	Очень бы рекомендовал вам оставить как есть, не стоит искать себе сложности на ровном месте. Если работает, то не стоит трогать ) 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	11.08.2017, 15:29
	тут не дают такое сделать... Добавлено через 56 секунд тут это как реклама 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	12.08.2017, 10:00
	https://codepen.io/search/pens... =type-pens смотри и учись... 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	12.08.2017, 10:41
	ищи, что за пивом - еще бегает... 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	12.08.2017, 20:30
	Да, как не крути - фото - все ровно и подгонять и форматировать и т.д. через js так еще все по особому именовать.. вот тут через js ...но текст и фото обрабатывать - кому то надо.. http://zafixirui.com/vitebsk.html Добавлено через 2 минуты это - бабам - интересно - +интерфейсы в "цветочек"... А, по сути - на фик кузнец на сеновале... 0

NikolayHAOS -3 / 2 / 0 Регистрация: 29.10.2013 Сообщений: 190
	12.08.2017, 22:08 [ТС]
	SiarheiSiarhei, Неее... Что не говори, а в ручной труд не верю, где где ну уж точно не в web проектировании. Более чем уверен есть настройки в редакторах: Ты тупо мышкой перетягиваешь картинку на страницу (а то и всю папку) и вуаля в коде страницы появляются ссылки на картинки в необходимых параметрах обрамления кодом. 0