PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: jQuery
Vinyl
Отправлено: 22 Января, 2015 - 19:04:00
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 646
Дата рег-ции: Янв. 2012  
Откуда: Армавир, Краснодарский край


Помог: 15 раз(а)




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

На странице будет n-ное количество небольших слайдеров, меняющих размер в зависимости от родителя. Страница на Twitter Bootstrap 3. Ни один из мне известных слайдеров не подойдет, т.к. страница отзывчивая, и div для слайдера постоянно меняет свой размер, а насколько мне известно, все слайдеры работают только с постоянной шириной либо высотой родителя (прячут через overflow: hidden; все картинки, кроме одной, потом сдвигают).

Мне же нужно выстроить их одна за другой, абсолютно позиционировав, а потом менять им z-index.

Есть вот такой html/css:
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2.         #items .hold{
  3.                 visibility: hidden;
  4.                 position: relative;
  5.                 top: 0;
  6.                 left: 0;
  7.         }
  8.        
  9.         #items .display {
  10.                 position: absolute;
  11.                 top: 0;
  12.                 left: 0;
  13.                 z-index: 100;
  14.         }
  15.        
  16.         #prev, #next {
  17.                 z-index: 102;
  18.                 position: relative;
  19.         }
  20. </style>
  21.  
  22. <div id="carousel">
  23.         <span id="prev">prev</span>
  24.         <span id="next">next</span>
  25.  
  26.         <div id="items">
  27.                 <img src="/img-001.jpg" class="img-responsive hold">
  28.                
  29.                 <img src="/img-001.jpg" class="img-responsive display" id="rowScroll">
  30.                 <img src="/img-002.jpg" class="img-responsive display" id="rowScroll">
  31.                 <img src="/img-003.jpg" class="img-responsive display" id="rowScroll">
  32.         </div>
  33. </div>


img.hold (стр. 27) нужен для того, чтобы высота div#carousel была равна высоте картинок (они одинакового размера), т.к. сами картинки img.display абсолютно позиционированы, соответственно, они сами с задачей не справятся. Т.к. и img.hold и img.display у нас img-responsive, эталонная img.hold будет растягивать нам нашего родителя до размеров img.display. Это уже работает (пусть и через ж..пу), т.к. я в инструментах разработчика руками меняю img.display по очереди z-index и происходит то, что должно происходить по нажатию кнопочек.

Я вижу два алгоритма:


1)
1. По нажатию #next проверяем, существует ли объект $current. Если нет, переходим к п. 2, если есть - к п. 4
2. У родителя ищем первого потомка с #rowScroll
3. Присваиваем объекту $current то, что нашли
4. Устанавливаем объекту $current z-index: 100;
5. Переходим к следующему элементу в дереве, ставим ему z-index: 101;
6. Присваиваем объекту $current найденный в п. 5 элемент

С #prev то же самое, только нужно будет искать предыдущий элемент. И я не в курсе, сможет ли при таком алгоритме браузер хранить объект $current, т.к. я совершенно не работал с JS. Думаю, что может, но если нет, то такой вариант не подходит.


2)
Все то же самое, только у родителя в потомках искать не элементы с #rowScroll (п. 2), а элементы с z-index:101. Естественно, первому img.display нужно будет выставить z-index:101 при любом варианте, но это не проблема.

Как мне кажется, здесь 10-20 строк на jQuery. Фреймворк не принципиален. Помогите, великие знатоки JS, иначе я сойду с ума В затруднении

Спасибо!

(Отредактировано автором: 22 Января, 2015 - 21:00:19)



-----
Пессимисты пользуются die(), оптимисты - exit()
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Января, 2015 - 15:39:06
Post Id



Активный участник


Покинул форум
Сообщений всего: 4516
Дата рег-ции: Февр. 2011  


Помог: 219 раз(а)




Нужен респонзивный слайдер ?
http://responsiveslides[dot]com

Или на выбор:
http://designscrazed[dot]org/free-re[dot][dot][dot]y-image-sliders/
 
 Top
Vinyl
Отправлено: 23 Января, 2015 - 17:34:25
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 646
Дата рег-ции: Янв. 2012  
Откуда: Армавир, Краснодарский край


Помог: 15 раз(а)




armancho7777777 пишет:
Нужен респонзивный слайдер ?
http://responsiveslides[dot]com


Сейчас попробую, спасиб.

armancho7777777 пишет:
Или на выбор:
http://designscrazed[dot]org/free-re[dot][dot][dot]y-image-sliders/


Я отсюда несколько штук попробовал, они отказываются работать по нескольку штук на странице, а т.к. я в JS нуль нулевой, допилить не могу.


-----
Пессимисты пользуются die(), оптимисты - exit()
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Января, 2015 - 17:46:00
Post Id



Активный участник


Покинул форум
Сообщений всего: 4516
Дата рег-ции: Февр. 2011  


Помог: 219 раз(а)




Отпишись. Если не сработает не один по нескольку штук на странице, поправлю.
Желательно из первой ссылки.
Он, вроде, ничего такой.
Он должен отработать.
 
 Top
Vinyl
Отправлено: 23 Января, 2015 - 18:27:36
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 646
Дата рег-ции: Янв. 2012  
Откуда: Армавир, Краснодарский край


Помог: 15 раз(а)




armancho7777777, ОНО РАБОТАЕТ!!! Рот до ушей Ура! Прыгаю до потолка Ура! Пляшу от радости

Спасибо тебе огромнейшее, шикарный слайдер!


-----
Пессимисты пользуются die(), оптимисты - exit()
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Января, 2015 - 19:21:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4516
Дата рег-ции: Февр. 2011  


Помог: 219 раз(а)




Да не за что )

Варианты с переключалками если не нашёл:
http://responsiveslides[dot]com/themes/themes[dot]html
 
 Top
Vinyl
Отправлено: 23 Января, 2015 - 19:49:06
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 646
Дата рег-ции: Янв. 2012  
Откуда: Армавир, Краснодарский край


Помог: 15 раз(а)




А я не искал. Там в параметрах было

CODE (javascript):
скопировать код в буфер обмена
  1. prevText: "Previous",   // String: Text for the "previous" button
  2. nextText: "Next",       // String: Text for the "next" button


А вообще, зачетный слайдер. Минимум всего, очень круто. Я давно такой искал. Nivo часто пользовался, но этот мне больше по душе. Спасибо ещё раз! Здорово

(Отредактировано автором: 23 Января, 2015 - 19:49:34)



-----
Пессимисты пользуются die(), оптимисты - exit()
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Января, 2015 - 19:50:02
Post Id



Активный участник


Покинул форум
Сообщений всего: 4516
Дата рег-ции: Февр. 2011  


Помог: 219 раз(а)




Не за что ) Он был в том же списке )
Тема закрыта!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« JavaScript & VBScript »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB