Народ, выручайте. Задача сделать на странице две независимые навигационные строки из превьюшек снимков. Несколько снимков видны, остальные появляются при наведении (нажатии) курсора на кнопки NEXT или PREV (эффект слайд-шоу). Перемещение по превьюшкам и открывание большого снимка на этой же странице (в отведённом поле) должно происходить без перезагрузки страницы. Часть работы уже проделана - с обеих навигационных строк большие снимки нормально открываются, независимо друг от друга. Засада в другом. Слайд-шоу превьюшек работает на одной из строк, той, чей скрипт объявления находится ниже в коде страницы... Меняешь их местами - работает другой. Может, чего-то элементарного не знаю...? Исходником взят вот этот скрипт: http://www.dhtmlgoodies.com/index.html?whichScript=image-slideshow-vertical http://slil.ru/25924651 Это тот вариант, о котором я говорю. http://slil.ru/25924660 Здесь другой принцип и другой движок. На самом деле, я в нём больше заинтересован, чем в первом. Просто кидался от одного варианта к другому. В итоге - оба варианта у меня в похожей стадии. Заранее спасибо.
А не хочешь использовать галерею как на Нажми внизу на фото, таких галерей можно делать несколько, и они не будут взаимосвязаны И это делается за пол-часа, посмотри в гугле плагины jquery - галерея(слайд-шоу)
Naydav, благодарю. Но если бы меня интересовал подобный движок, я бы не стал беспокоить уважаемую публику, поверь. В посте я довольно подробно объяснил суть проблемы, приложил исходники. У мня проблема в конфликте двух одинаковых функций на одной странице. И я не знаю пока как их грамотно разнести по своим меткам, идентификаторам... Вот и прошу совета у знающих людей.
Так и есть - переменные просто перезаписывают предудущие значения. Во втором примере всё просто - достаточно поменять во втором участке кода идентификаторы на уникальные, например, дописать "_2": Code: // А именно, здесь: <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> Внести для них изменения в стили: Code: #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; } И запустить конструктор ещё раз, с новыми параметрами: Code: 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: Code: * html .example_4_item img, * html .example_4_item_2 img { margin: 5px 3px; } В остальных браузерах багов не обнаружил.
