Дергание галереи?

Question

[Bartholomaeus]

Вот тут простая галерея (нижняя)

Не могу понять где ошибка в коде из-за которой расстояние между едущими слайдами прыгает.

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

Answer 1

[Андрей Кунцевич]

Если вы не видите ошибку в ТАКОМ коде, то это печально.

<div id="thumbareaContent">
                            <img src="fotos/small_image1.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image2.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image3.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image4.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image5.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image6.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image7.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image8.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image9.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image10.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image11.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image12.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image13.jpg" width="120" height="80" alt="">
                            <img src="fotos/small_image14.jpg" width="120" height="80" alt="">
						<img src="fotos/small_image1.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image2.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image3.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image4.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image5.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image6.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image7.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image8.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image9.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image10.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image11.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image12.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image13.jpg" width="120" height="80" alt="" id=""><img src="fotos/small_image14.jpg" width="120" height="80" alt="" id=""></div>

Расстояния разные, потому что в коде половина изображений разделена \n, а вторая половина состыкована без пробелов. А «дёрганье» — результат возвращения галереи на исходную позицию.

З.Ы. дёрганье это не баг, а нормальная работа кода при адекватной вёрстке. ваша вёрстка — неадекватная, вот оно и дёргается.

З.З.Ы. Есть несколько способов верстать такие элементы, самый удобный на мой взгляд — через ul>li без закрывающего li

<ul id="thumbareaContent">
    <li><img src="" alt="">
    <li><img src="" alt="">
    <li><img src="" alt="">
</ul>

Comments

[Bartholomaeus]

Попробую внести ясность. Это не мой код, и ошибку я не вижу потому что занимаюсь графическим дизайном. Мне понадобился простой одностаничник с галереей. Долго искал простую галерею без свистелок и перделок. Из все что видел эта мне подошла больше всего и если бы не это дергание то я был бы очень рад.
Предложенный вами метод я попробовал. Да, первоначальная проблема исчезла но появились другие (первая картинка дублируется и под ней на секунду выпадают вниз копии всех слайдов).
В CSS я только только начинаю (смотрю курсы lynda.com).
Если кто то покажет готовый работающий код для контейнера «thumbareaContent» то буду безмерно признателен (насколько понимаю дело именно в нем).

[Андрей Кунцевич]

Как исправить этот код я написал в своём ответе самым последним блоком.
А за готовым кодом идите на фриланс биржи и оплачивайте.

Если что, то самый юзерфрендли скрипт галереи — revolver.js

Answer 2

[Николай Васильчук]

Дерганий не увидел (Chrome 29.0.1547.65).
Код галереи хочется развидеть.

Comments

[Bartholomaeus]

Вы просто недостаточно долго смотрели. Там где то после 20 слайдов будет видно.
Я пробовал в разных браузерах — одинаково скачет.
В паке для загрузки код вполне нормальный вроде mootools.net/forge/p/scrollgallery

[Николай Васильчук]

Да, действительно, дернулась один раз.
Я про этот код.

Answer 3

[Миша Васильев]

А зачем там в thumbareaContent все слайды повторены два раза?

Comments

[Bartholomaeus]

Я у себя локально делаю сайт и там ничего не повторяется и все равно так же скачет.