Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей.
Здесь обсуждаются безопасность, программирование, технологии и многое другое.
Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz
 |
Галерея снимков с эффектом слайд-шоу |

25.06.2008, 00:44
|
|
Новичок
Регистрация: 24.06.2008
Сообщений: 13
Провел на форуме: 7471
Репутация:
3
|
|
Галерея снимков с эффектом слайд-шоу
Народ, выручайте.
Задача сделать на странице две независимые навигационные строки из превьюшек снимков. Несколько снимков видны, остальные появляются при наведении (нажатии) курсора на кнопки NEXT или PREV (эффект слайд-шоу). Перемещение по превьюшкам и открывание большого снимка на этой же странице (в отведённом поле) должно происходить без перезагрузки страницы.
Часть работы уже проделана - с обеих навигационных строк большие снимки нормально открываются, независимо друг от друга.
Засада в другом.
Слайд-шоу превьюшек работает на одной из строк, той, чей скрипт объявления находится ниже в коде страницы... Меняешь их местами - работает другой. Может, чего-то элементарного не знаю...?
Исходником взят вот этот скрипт:
http://www.dhtmlgoodies.com/index.html?whichScript=image-slideshow-vertical
http://slil.ru/25924651
Это тот вариант, о котором я говорю.
http://slil.ru/25924660
Здесь другой принцип и другой движок.
На самом деле, я в нём больше заинтересован, чем в первом. Просто кидался от одного варианта к другому.
В итоге - оба варианта у меня в похожей стадии.
Заранее спасибо.
|
|
|

25.06.2008, 00:58
|
|
Постоянный
Регистрация: 30.12.2006
Сообщений: 434
Провел на форуме: 849583
Репутация:
210
|
|
А не хочешь использовать галерею как на
http://new.edukation.com.ua/news/fancy.html
Нажми внизу на фото, таких галерей можно делать несколько, и они не будут взаимосвязаны
И это делается за пол-часа, посмотри в гугле плагины jquery - галерея(слайд-шоу)
|
|
|

25.06.2008, 01:08
|
|
Новичок
Регистрация: 24.06.2008
Сообщений: 13
Провел на форуме: 7471
Репутация:
3
|
|
Naydav, благодарю.
Но если бы меня интересовал подобный движок, я бы не стал беспокоить уважаемую публику, поверь.
В посте я довольно подробно объяснил суть проблемы, приложил исходники.
У мня проблема в конфликте двух одинаковых функций на одной странице. И я не знаю пока как их грамотно разнести по своим меткам, идентификаторам...
Вот и прошу совета у знающих людей. 
|
|
|

25.06.2008, 02:26
|
|
Постоянный
Регистрация: 30.08.2007
Сообщений: 773
Провел на форуме: 3069349
Репутация:
808
|
|
Так и есть - переменные просто перезаписывают предудущие значения.
Во втором примере всё просто - достаточно поменять во втором участке кода идентификаторы на уникальные, например, дописать "_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
}
});
Самый незатейливый путь.
|
|
|

25.06.2008, 02:43
|
|
Новичок
Регистрация: 24.06.2008
Сообщений: 13
Провел на форуме: 7471
Репутация:
3
|
|
astrologer? большое спасибо!
Направление понял, сам засматривался на эти идентификаторы, но, видать, смелости не хватило...
Завтра (т.е. сегодня) с утречка покопаю в этом направлении.
Ещё раз благодарю за совет!
Удачи.
|
|
|

25.06.2008, 13:39
|
|
Новичок
Регистрация: 24.06.2008
Сообщений: 13
Провел на форуме: 7471
Репутация:
3
|
|
astrologer, сообщаю результаты.
Осуществлён значительный прорыв!
Правда, с ходу не получилось. Поэтому, покопавшись, разнёс переменные более детально, чем вы предложили.
Добавил еще здесь:
<div class="example_4_item_2">
И в css разнёс в отдельные блоки, для чистоты эксперимента.
Что имеем в итоге?
Обе панели заработали, превьюшки скроллятся, снимки с обеих панелей открываются.
Но возникли два бага, которые я пока не могу проанализировать - по умолчанию снимки в панелях встают с номера 9, хотя, по идее, должны с единицы. Похоже, что это середина списка снимков - при уменьшении кол-ва снимков начальный номер изменяется.
И второй баг - прокручиваются не все снимки в панели - в определённый момент половина снимков пропускается...
http://slil.ru/25929202
Здесь лежит последний вариант, если не напрягаю, глянете?
Ещё раз спасибо.
Последний раз редактировалось kvg95; 25.06.2008 в 13:44..
|
|
|

25.06.2008, 15:15
|
|
Постоянный
Регистрация: 30.08.2007
Сообщений: 773
Провел на форуме: 3069349
Репутация:
808
|
|
Вот хак для IE6:
Код:
* html .example_4_item img,
* html .example_4_item_2 img
{
margin: 5px 3px;
}
В остальных браузерах багов не обнаружил.
|
|
|
|
 |
Похожие темы
|
| Тема |
Автор |
Раздел |
Ответов |
Последнее сообщение |
|
Галерея моддинга )))
|
dinar_007 |
Аппаратное обеспечение |
12 |
05.03.2006 22:35 |
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|