Галерея: из коллекции в массив
 

коллекция работает, массив -- нет.
Здесь 2 варианта на общих данных (картинки , стили)

Вопрос должен быть простой, т.к. есть рабочий вариант в виде :

Это работает:

<div id="myGallery">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>

А это не работает:

<div id="myGallery"></div>
<script src="js/list.js"></script>
<script src="js/show.js"></script>

=== внешние файлы ===

var str = [`<img src="1.jpg"/>`,
		`<img src="2.jpg"/>`,
		`<img src="3.jpg" />`]

function show() {
   var block = [];
   for (let i = 0; i < 3; i++) 
	   block.push(str[i]);
   document.getElementById('myGallery').innerHTML = block.join('');
}
window.addEventListener("load", () => { show() });

я понимаю, что это избитая тема, на форуме много вопросов по этим массивам. По этим вопроса и собрал .
Но в каждом свои особенности. Хорошо бы еще объяснение, почему не работает.

Рабочий пример с голыми <img> прост до предела. Он использует скрипты и получает результат.

Но как только мы переходим в область JS, он сразу перестает понимать другие скрипты. Все разваливается.

Прикладываю пример SpaceGallery.zip

space-work.html -- работает.
index.html -- не работает.
В консоли ошибок нет .
У них все общее, разные только .html , разница выше.

Это простая галерея. Я уже не помню, откуда я выкопал этот пример. Он простой. Есть еще такой же пример этой же галереи, но там добавляется 1 строка из jQuery. Это на крайний случай,

Первый пример работает и без доп. строк.
Первый работает последовательно , все ОК.
Второй -- сборка массива, ему последовательность не подходит.
Расскажите, почему :)

seregadushka, зачем, имея массив str, делать еще один массив block?


То, что статичный хтмл отображается нормально - это понятно... В чем выражается "неработоспособность" второго варианта?

У него, скорее всего, при заполнении #myGallery через js не инициализируется какой-нибудь слайдер.

потому что этому методу 100 лет в обед.

коллеги , я приложил пример, там только скачать и открыть архив. Там все одинаково , кроме .html.
Да, это простая галерея. Просто смена картинок. Я не прошу сделать ее с нуля.

там в начале у обоих одинаково подключаются скрипты.
space-work.html -- работает и показывает , как все дложно быть. И он заканчивается чистым
<div>...картинки...</div>.
Значит, в этом варианте скриптам не надо помогать. Они видят <div> и все делают как надо.

В index.html скрипты те же , в том же месте. И <div> та же.

<div id="myGallery" class="spacegallery"></div>
<script src="js/list.js"></script>
<script src="js/show.js"></script>

Картинки выводятся -- значит, сборка произошла, show.js запустилась, но не вся -- стрипты стоят.


Это же стандартный метод сборки. На форуме много аналогий. Его цель : внутри show.js регулировать численность картинок, чего в чистом HTML (в оригинале строк <div>... картинки...</div> 26 штук , в вопросе 3 шт) сделаь нельзя. Для этого JS и придумали.

Это же стандартная проблема, когда show.js выводится не в том месте, не в то время .
я не могу понять , куда ее вставить эту show.js -- до <div>...</div> или после. Не работает одинаково.
либо show.js выводится , когда <div>...</div> еще нет, или наоборот.

seregadushka,
в строку 7

window.addEventListener("load", () => { show() });

добавить инициализацию галереи

window.addEventListener("load", () => { show();  $('#myGallery').spacegallery({loadingClass: 'loading'});  });

Рони, профессор ! Ты гений.
Я много раз применял эту сборку <div>. И всегда заканчивалось простым слушателем для загрузки show() , и все. У всех все работало. Такой строки не встречал. Спасибо, надо ее запомнить.

Рсскажи, в первом варианте сами просто <div></div> --- и скрипты сами запускаются.

здесь же надо те же самые скрипты еще инициализировать. Что им надо ?

картинки, нет картинок нет инициализации.

рони,
но я же вставлял эту show() и после картинок и перед. Тем более, в стоячем положении картинки есть. Как это все работает

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

рони, конечно, я открыл все эти скрипты и сразу закрыл. Разобраться там невозможно.
но в оригинале, все скрипты загрузились. И во 2 варианте тоже.
далее <div><img>...</img</div> -- и этого достаточно для работы всех скриптов. Работает браузер, все выводит по голому <div>

Во 2 вариант show() все собрала, и далее идет тот же самый <div><img>...</img</div>. После сборки эти <div> одинаковые .
Почему во 2 варианте тот же самый <div> уже показывает те же картинки , но скриптам этого недостаточно ? Их нужно еще подпихнуть, чего не надо в оригинале ?

seregadushka,
ответ смотрите выше, более добавить нечего.

show() не вставляет картинки, она записывает пути картинок внутрь объекта <div>.
Она записал и он плавает где-то в памяти . Браузер не знает, где и после чего выводить это <div>.
Строка <div></div> показывает где выводить. И в 1 варианте этого вполне достаточно для запуска скриптов. В оригинале скрипты определены тоже , когда еще нет никакого <div></div>. И как только <div></div появились , браузер видит где эта строка нужна, сразу работают скрипты.

Во 2 варианте, show() прочитала list.js , собрала через цикл сколько надо штук, и записала адреса картинок в <div></div>.
Но браузер тоже не знает куда выводить этот <div></div>.

но когда появляется <div></div> браузер стоит колом, и не работает. Хотя результат мало чем отличается от 1 варианта.

addEventListener("load", -- он же тоже не может препятствовать , это же не скрипты на 10 МБ . Через 0,1 с он должен запустить браузер .
Но этого не происходит. Надо еще jQuery , который не нужен в оригинале.
Не могу понять , в чем разница.

Почему в 1 варианте нет повторности, а во 2 она есть ?

seregadushka,
1 вариант.
страница с картинками.
создание галереи из этих картинок.
2 вариант.
страница без картинок.
создание галереи -- облом, не из чего строить.
добавили картинки.
создание галереи из этих картинок. ура мы в танке!!!

рони,
ты все неправильно объясняешь .
1 вариант правильно, но по нему и вопросов нет.
Здесь скрипты запущены, когда ни <div> , ни картинок нет. Дополнительной инициализации скрипты не требуют.

Как у тебя просто со 2 вариантом, нет, там все не так. Тут из танка все прекрасно видно с места стрелка.

картинки есть, собраны в <div> через innerHTML. Вставлены на страницу. Зачем во 2 варианте запускать jQuery ?

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