Пустая страница, ошибок нет. JS. В чем проблема?

Question

[serega danet]

У меня странный вопрос, но ситуация такая, то должна облегчить поиск ответа.
У меня 2 одинаковых сайта типа одна галерея.

SliceBox -- вероятно, оригинал этого SliceBox. Здесь чистый пример с чиcтый HTML и инструкцией.
Slice -- итоговое решение.

Второй сделан из первого путем переноса списка в текстовую строку , собираемую в JS . Вроде так более современно и модерново.
Т.е. можно сразу увидеть ожидаемый результат. Тем более, этот метод сбора текстовой переменной не нов, используется везде..
Еще более странно то , что у меня осталось впечатление, что месяц назад все работало. Сейчас открываю новую версию -- пустая страница , ошибок нет.
Значит, скорее всего ошибка в скриптах . Но в первой галерее эти же самые скрипты. У меня какой-то ступор. Я не силен в консоли, но если в ней вообще нет ошибок, то я не знаю, куда смотреть
Не знаю, как тут правильно оформлять, копировать сюда коды. Так тут весь сайт 2 страницы. Но даже я со своим начальным уровнем просто смотрю код сайта, и со скрипом все там вижу :)
Я не спрашиваю про стили, хотя бы увидеть скрипт в работе.

в 127 строке есть подозрительный display: none .

.sb-slider li {			
	display: none; }

Если его удалить или заменить на block, картинки появляются в столб на 10 000рх, и все тексты собираются внизу , но все на одном месте с перекрытием.
Тоже непонятно, почему картинки отдельно, тексты отдельно. Они идут все по очереди, блоками. Это хорошо видно . Но это не важно.
Где-то близко. Получается, если этот стиль работает в чистом HTML, то при сборке его через JS , этот стиль уже другой ???
Этот стиль удаляет все картинки, и уничтожает место, где они собираются. И освобождает место только для текущей картинки.
Здесь как бы блоки (картинка, ссылка, текст) ВСЕ, описаны классом

<ul id="sb-slider" class="sb-slider">
	</ul>

А та, которая видна , текущая (картинка, ссылка, текст) описаны классом

id="sb-current" class="sb-current

но он в файле скрипта
/js/jquery.slicebox.js

где-то посередине :) , там он устанавливается и удаляется. Я в файл скрипта не лазил.

За текущий стиль
Или тут требуется полная переделка ? Просто так перенести HTML в JS не получается ?

Цель: получить из статичной разметки фото-галереи ее же, но изменяемой длины. Перевести сборку разметки из HTML в JS для управления ее длиной .

Comments

[szQocks]

у тебя у li элементов, display: none стоит

[serega danet]

szQocks, !! Но ты глазастый :) без этого display: none все картинки стоят в столб ! Этот display: none там нужен . Тут же принцип такой, что все картинки -- это одна текстовая строка. И теущий стиль в скрипте как то ее выбирает . ОДНУ, значит, все остальные должны быть скрыты.
Там 2 штуки display: none; -- первый для точек (плевать на них, не обращай внимания, с точками потом), второй НУЖЕН. Если уберу -- будет столб из всех фоток.

[szQocks]

seregadushka, чинить я твой скрипт явно не буду, мне это не интересно. Но всегда есть выход, обратиться туда с заказом своим, даже за 500 рублей, найдётся какой-нибудь абориген, который исправит тебе этот твой слайдер.

[Вадим]

Второй сделан из первого путем переноса списка в текстовую строку , собираемую в JS . Вроде так более современно и модерново.

Не знаю в каком месте это модерново... А Вы пробовали не делать так, а оставить разметку в... разметке? Тоже не работает?

[serega danet]

Вадим, нy мне надо так. Это более круто. Тем более, только JS позволяет делать динамический сайты. Есть люди, который весь CSS в JS собирают., полностью. И HTML тоже в JS. Вот это и есть пример в вопросе.
Мне самому смешно и грустно. Есть готовый пример, все скрипты на месте, они же видны в коде, все прописаны. И ссылаются на одни файлы JS.
Разметка в разметке работает . В вопросе она намба 1.
У меня есть другие сайты с тем же принципом сборки разметки . Смысл их приводить, если вот вам живой пример.
Я сам в JS не очень, может какие-то скрытые особенности есть , какая то видимость переменных. ...
Там вся сборка этой несчастной разметки -- 5 строк кода, или 3 сосны.

[serega danet]

если я в 127 строке напишу

.sb-slider li {			
	display: block; /* вместо  none */}

то картинки появятся, но все в столбик. Истина где-то рядом.
На оригинале, именно display: none убирает все картинки и оставляет только текущую . А здесь убираются все.

[Вадим]

seregadushka, если вы во втором примере переносите разметку в разметку и всё работает, то есть подозрение на нарушение порядка исполнения, если всё остальное прям одинаковое. Но так как демки нет и код зашит прям в html - то проверить это крайне не удобно. Еслиб хотя бы вынесли js в отедльные файлы..

[serega danet]

Вадим, я могу вынести в отдельные файлы . Я по привычке так смотрю. Отладкой не занимался так серьезно. Это поможет ? Там снизу скрипт, в тексте , он отвечает за анимацию , нажатие кнопок. Вряд ли он мешает. Я его не менял, конечно . Мне кажется тут видимость убивается именно в стиле, .sb-slider li {}

[Вадим]

seregadushka,

я могу вынести в отдельные файлы... Это поможет?

Да.

нy мне надо так. Это более круто.

Крутость понятие очень относительное. Нормальные разработчики делают так как больше подходит задаче, а не как круче.

Тем более, только JS позволяет делать динамический сайты.

А вот это не понял к чему сказано. То что Вы сделали на массиве строк - ничего общего с обычной современной разработкой на js фрэймворках не имеет.

[serega danet]

Вадим, а что выносить в отдельные ? последний здоровый скрипт, не менялся.

<script src="js/modernizr.custom.46884.js"></script>

этот тоже скрипт составной. Вы же понимаете, что я не автор всех скриптов взял готовые из примера. Этот скритп получен редким методом сборки . На сайте разработчика ставишь несколько плюсов, и получаешь скрипт под номером , с нужными функциями. Очень оригинально. Смысл его смотреть, если с ним все работает в №1.

остается 10 строк скрипта. с 229 по 239. Его выносить ?

[Вадим]

seregadushka, 163-238 в отедльный файл и 255-311 так же в отедельный файл.

[serega danet]

Вадим, проводник закрылся, пути потярял :)
https://seregasmyfavoritesites.on.drv.tw/Site/Foto3 -- все максимально во внешние файлы

[Вадим]

seregadushka, Что и требовалось доказать.
У вас код слайдера срабатывает раньше чем отрисовка элементов списка.
Соответтсвенно, так как элементов еще нет, то и они и не становятся частью слайдера.
А потом они отрисовываются, но все за display: none и тд.

Запустите и show() и то, что внутри animation.js Друг за другом, скажем внутри show(). animation.js в последнюю очередь.

[serega danet]

Вадим, ну я там переставил местами ... . Если я список положил в самое начало, то не знаю, чем ему еще помочь.

[serega danet]

это show.js собирает список и записывает его в HTML . Один раз, на этом ее действие заканчивается.

[Вадим]

seregadushka, Дубль два.
show.js собирает список.
animation.js превращает этот список в слайдер.

В вашем коде animation.js срабатывает раньше чем show.js. То есть ещё нет списка, который нужно преобразовать в слайдер. Поэтому ничего и не отображается.

[serega danet]

Вадим, я понял, вынести все из HEAD ? так будет еще хуже

[Вадим]

seregadushka, Ну, Вы же в этом не понимаете, откуда Вы знаете что так будет хуже?
Ну.. и даже если так, что может быть хуже чем "не работает"?)

[serega danet]

Вадим, animation.js в body после всех

[Вадим]

seregadushka, и?

[serega danet]

Вадим, все тоже самое

[Вадим]

seregadushka, Я Вам сказал сделать совсем не это.

[Вадим]

seregadushka, Запустите и show() и то, что внутри animation.js Друг за другом, скажем внутри show(). animation.js в последнюю очередь.

То есть вот такой код должен быть внутри файла show.js, а файла animate.js быть не должно:

function show() {
  var count = 16;
  var block = [];
   var dots = [];
  for (let i = 0; i < count; i++) {
    block.push('<li>' + li_str[i] + '</li>');
     dots.push('<span>' + '</span>'); }
  document.getElementById('sb-slider').innerHTML = block.join('');
  document.getElementById('nav-dots').innerHTML = dots.join('');  

 			$(function() {
				var Page = (function() {
					var $navArrows = $( '#nav-arrows' ).hide(),
						$navDots = $( '#nav-dots' ).hide(),
						$nav = $navDots.children( 'span' ),										 
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady: function() {
								$navArrows.show();
								$navDots.show();
								$shadow.show();	},
							orientation: 'r',
							cuboidsRandom: true,
							disperseFactor: 30,
							perspective: 1200,
							cuboidsCount: 5,
							maxCuboidsCount: 15,
							colorHiddenSides: '#222',
							sequentialFactor: 150,
							speed: 600,
							easing: 'ease',
							autoplay: true,
							interval: 3000,
							fallbackFadeSpeed: 300,
						onBeforeChange : function( pos ) {
								$nav.removeClass( 'nav-dot-current' );
								$nav.eq( pos ).addClass( 'nav-dot-current' );	}												 
															} ),
						init = function() {
							initEvents(); },
						initEvents = function() {
							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {
								slicebox.next();
								return false;										} );
							$navArrows.children( ':last' ).on( 'click', function() {
								slicebox.previous();
								return false;  								   } );
							$nav.each( function( i ) {
								$( this ).on( 'click', function( event ) {
									var $dot = $( this );
									if( !slicebox.isActive() ) {
										$nav.removeClass( 'nav-dot-current' );
										$dot.addClass( 'nav-dot-current' ); 
																}
									slicebox.jump( i + 1 );
									return false;							} 
											); 
											   		} 
									);	
												};
						return { init : init };
										})();
				Page.init();
									});
}
 
window.addEventListener("load", (event) => { show() });

[serega danet]

Вадим, Вадим, спасибо !!!!!!! , я бы сам не догадался.
Я думал, переставлю местами, Я кавычки месяц искал ( прямые-обратные) .
вы очень помогли.
Вы спрашивал а нафига это все ?
Весь смысл в этой строке
var count = 16;

[Вадим]

seregadushka, не за что ;-)

Answer 1

[Вадим]

У автора был нарушен порядок выполнения скриптов.
Инициализация слайдера происходила раньше отрисовки разметки для слайдера.

Comments

[serega danet]

пока я искал кнопку "Решение". Вы все уже сделали, Вадим.

До сих пор не понимаю, как два одинаковых сайта , но требуют перемешивать строки. Браузер мог бы и догадаться, что от него хотят.
Кончено, скрипт не мой, и не близко. Это известный слайдер, самый навороченный, что мне известен.
https://tympanus.net/Development/Slicebox/ -- вероятно, оригинал.
Моего здесь только то , что я то долго колупал мозг, на толковому rr33rr другом форуме , эта простая сборка текста в show() его работа.
неужели вся проблема в этой

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

Ну, вам виднее. Спасибо еще раз.

Этот метод я теперь пихаю везде , где надо собирать неизвестное число разметки.
Где надо и не надо.

Есть еще похожий, но еще более агрессивный :) слайдер.
Я приду еще раз, когда там что-то запорю )) .

[serega danet]

не хочется уходить с этой страницы.
Вадим, а вам не кажется здесь какая-то подозрительная рекурсия ?

function show() {
....
$navArrows.show();    }

разве такие имена дают воспитанные люди ?

[serega danet]

Вадим, я тут вручную правил коды. Запустил программу синхронизации, она удалила все лишнее, чего не было. Если вопрос надо сохранять, то вот более надежный адрес Slice
Если вопрос не нужен, то можно удалить, чтобы я не следил за ним.

[Вадим]

seregadushka,

а вам не кажется здесь какая-то подозрительная рекурсия

Нет, не кажется. У вас show - это глобальное имя функции.
А в $navArrows.show() -это метод jQuery элемента.

[Вадим]

seregadushka,

Если вопрос не нужен, то можно удалить, чтобы я не следил за ним.

У меня нет полномочий удалять вопросы. Это в ведении модераторов.
Ну и, в целом, такое не практикуется, если был дан ответ и не нарушены правила, так как в этом смысл платформы. Если у кого-то будет подобная проблема он сможет найти похожий вопрос и сразу ознакомиться с решением, которое может подойти и ему.

[serega danet]

Вадим, понятно, сейчас в вопросе пустые ссылки. Надо их убрать и поднять одну Slice Box.
В оригинале слайдера все есть. , без сборки списков.
По идее, этот слушатель загрузки страницы должен всегда и везде быть последним. А меня заклинило, что старый код был рабочим месяц назад.