Форум АНТИЧАТ - Галерея снимков с эффектом слайд-шоу

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - Галерея снимков с эффектом слайд-шоу (https://forum.antichat.xyz/showthread.php?t=74914)

Галерея снимков с эффектом слайд-шоу

Народ, выручайте.

Задача сделать на странице две независимые навигационные строки из превьюшек снимков. Несколько снимков видны, остальные появляются при наведении (нажатии) курсора на кнопки NEXT или PREV (эффект слайд-шоу). Перемещение по превьюшкам и открывание большого снимка на этой же странице (в отведённом поле) должно происходить без перезагрузки страницы.

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

Засада в другом.
Слайд-шоу превьюшек работает на одной из строк, той, чей скрипт объявления находится ниже в коде страницы... Меняешь их местами - работает другой. Может, чего-то элементарного не знаю...?

Исходником взят вот этот скрипт:
http://www.dhtmlgoodies.com/index.html?whichScript=image-slideshow-vertical

http://slil.ru/25924651
Это тот вариант, о котором я говорю.

http://slil.ru/25924660
Здесь другой принцип и другой движок.
На самом деле, я в нём больше заинтересован, чем в первом. Просто кидался от одного варианта к другому.

В итоге - оба варианта у меня в похожей стадии.

Заранее спасибо.

А не хочешь использовать галерею как на

Цитата:

http://new.edukation.com.ua/news/fancy.html

Нажми внизу на фото, таких галерей можно делать несколько, и они не будут взаимосвязаны
И это делается за пол-часа, посмотри в гугле плагины jquery - галерея(слайд-шоу)

Naydav, благодарю.

Но если бы меня интересовал подобный движок, я бы не стал беспокоить уважаемую публику, поверь.

В посте я довольно подробно объяснил суть проблемы, приложил исходники.

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

Вот и прошу совета у знающих людей. ;)

Так и есть - переменные просто перезаписывают предудущие значения.

Во втором примере всё просто - достаточно поменять во втором участке кода идентификаторы на уникальные, например, дописать "_2":

Код:

// А именно, здесь:

<dl id="accordionExample_2" class="accordion">

  <dd class="accordion_content">

    <div id="example_4_2">

      <div id="example_4_content_2">



// ... и здесь:

<div id="example_4_frame_2">

  <img id="example_4_previous_2" src="menu_files/ex4_prev.gif" alt="move previous" />

  <img id="example_4_next_2" src="menu_files/ex4_next.gif" alt="move next" />

</div>

Внести для них изменения в стили:

Код:

#example_4, #example_4_2 {

        position: relative; /* important */

        overflow: hidden; /* important */

        width: 172px; /* important */

        height: 212px; /* important */

        background: #000;

}



#example_4_frame, #example_4_frame_2 {position: relative}

#example_4_frame, #example_4_frame_2 img {position: absolute;}

#example_4_previous, #example_4_previous_2 {top: 0; left: 0;}

#example_4_next, #example_4_next_2 {top: 192px; left: 0;}



#example_4_content, #example_4_content_2 {

        position: absolute;

        margin-top: 20px;

        left: 0;

}

И запустить конструктор ещё раз, с новыми параметрами:

Код:

new iCarousel("example_4_content_2", {

  idPrevious: "example_4_previous_2",

  idNext: "example_4_next_2",

  idToggle: "undefined",

  item: {

    klass: "example_4_item",

    size: 86

  },

  animation: {

    direction: "top",

    duration: 250,

    amount: 2

  }

});

Самый незатейливый путь.

astrologer? большое спасибо!

Направление понял, сам засматривался на эти идентификаторы, но, видать, смелости не хватило... ;)

Завтра (т.е. сегодня) с утречка покопаю в этом направлении.

Ещё раз благодарю за совет!
Удачи.

astrologer, сообщаю результаты.

Осуществлён значительный прорыв!
Правда, с ходу не получилось. Поэтому, покопавшись, разнёс переменные более детально, чем вы предложили.
Добавил еще здесь:
<div class="example_4_item_2">

И в css разнёс в отдельные блоки, для чистоты эксперимента.

Что имеем в итоге?
Обе панели заработали, превьюшки скроллятся, снимки с обеих панелей открываются.

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

И второй баг - прокручиваются не все снимки в панели - в определённый момент половина снимков пропускается...

http://slil.ru/25929202
Здесь лежит последний вариант, если не напрягаю, глянете?

Ещё раз спасибо.

Вот хак для IE6:

Код:

* html .example_4_item img,

* html .example_4_item_2 img

{

  margin: 5px 3px;

}

В остальных браузерах багов не обнаружил.