Верстка слайдера

[Нарек]

Такая вот проблема у меня. нужно что бы был такой слайдер 

особенности

1, При наведении на маленькие превью - они перемещаются в левое окно уже в большом размере.

2, По клику на фото в левом окне - открывается поп-ап, в нем картинка оригинальной ширины.

 

То есть нужен слайдер с функционалом

1, делать сам 3 разных размеров картинок из одной. (загрузил например 1920*1080, а он и в превью, и в левом окне, и при клике стал полноразмерным)

2, Все вышеперечисленное.

 

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

 

В js пока не сильно разбираюсь, что бы сам писать функции hover - click, прошу не отправить учиться, сроки жмут, а я не знал что такой слайдер нужен в сайте, а то не взял бы заказ (

Edited June 21, 2014 by Нарек

[npofopr]

Дак любой слайдер.

Хоть этот http://coolcarousels.frebsite.nl/c/48/

хоть этот http://bxslider.com/examples/thumbnail-pager-1

[Нарек]

хоть этот http://bxslider.com/...umbnail-pager-1

Так этот вроде бы сам не создает превьюшки.. Было бы классно им пользоваться, так как на главной уже есть слайдер (использовал bx). Только вот не пойму как все требование соблюдать.. 

[Sensei]

Вот что-то похожее http://www.javascriptkit.com/script/script2/thumbslider.shtml

[Нарек]

Вот что-то похожее http://www.javascrip...umbslider.shtml

Не то вроде.. Надо ведь что бы при клике появился поп-ап в котором картинка полноразмерная..

 

Странный баг (?) заметил в bxslider. Он не вписывается в заданную ему ширину 1000px, из за него на сайте идет горизонтальная прокрутка начиная с 1066px хотя должно с 1050.. 

[Николя223]

Не то вроде.. Надо ведь что бы при клике появился поп-ап в котором картинка полноразмерная..

для этого есть фэнсибокс или prettyphoto

 

Учите jquery - для него то что вы написали раз плюнуть 

 

-Только настойчивостью, практикой и упорством можно чего то в этой жизни добиться

Edited June 21, 2014 by Николя223

[Нарек]

Учите jquery - для него то что вы написали раз плюнуть 

Учить то буду, только сейчас встал и стою на месте, а дело то закончить надо.( 

[Николя223]

Ну а хотя бы логику то понимаете? Сделайте макет без jquery А дальше всем миром вам помогут. 

на jsfiddle или ещё куда нибудь выложите

Edited June 21, 2014 by Николя223

[MichaelD]

Все-таки сложно будет не зная Jquery сделать такой слайдер самому. Лучше, при наличии времени, уделите недельку изучению азов JQuery, хотя-бы базовые селекторы и методы(hover, click, addClass, removeClass....). Почитайте или посмотрите видео о traversing (будет лучше, если вы знаете английский).

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

 

http://jsfiddle.net/MS6t2/1/

 

Ну а открывать по клику можно используя какой-то lightbox или lightwindow

Edited June 21, 2014 by MichaelD