Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Зацените плагин слайдер на jQuery (https://javascript.ru/forum/project/21295-zacenite-plagin-slajjder-na-jquery.html)

w411 04.09.2011 10:54

Зацените плагин слайдер на jQuery
 
Привет всем
зацените пожалуйста плагин jQuery слайдера
который я написал на выходных

Хотелось бы получить обратную связь по:
1) Полезности скрипта
2) Скорость/тормознутость анимации
3) Понятность интерфейса

Возможно вы подскажите фичи которые хотели бы видеть в таком скрипте
И он будет вам полезен!

http://chusov.ru/slider

p.s.: сайт у меня достаточно заброшенный, давно им не занимался
потому критика только по слайдеру принимается :)

Octane 04.09.2011 16:08

поворачивающиеся стрелки вводят в замешательство

Триви 04.09.2011 17:12

Цитата:

Сообщение от Octane (Сообщение 124726)
поворачивающиеся стрелки вводят в замешательство

Я думал меня одного)) пришлось несколько раз потыцкать,
прежде чем постигнуть тайный эротический замысел :D
А так.. смотрится красиво..

melky 04.09.2011 17:24

полезность скрипта ? в этом мире куча разных слайдеров. сейчас я тоже пишу свой, который наконец-то можно будет использовать стороннему человеку. я про расширяемость. ваш слайдер расширяем?
$prevDiv = $('<div class="prev" style="position:absolute;left:0px;"></div>');

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


тормознутости анимации не будет, все дёргается шустро и отзывчиво.


.....
понятность интерфейса ? ....

стрелки вводят замешательство, согласен

стрелка снизу, которая выдвигает блок. по своей природе юзверя я хочу нажать на неё, когда блок уже поднялся вверх (с инфой блок), но она не нажимается! хотелось бы, чтобы можно было нажать на неё, и блок сворачивался (вниз)

стрелки по бокам ударили меня по лбу. это что такое? почему они сверху? и почему потом одна из стрелок поворачивается вверх* ?

а ещё непонятно, почему на них(на стрелки) можно кликать. откуда пользователь может знать, что на неё можно нажать, если курсор на pointer не меняется? она только подсвечивается при наводке.

* понял, почему. типа возврат к начальной картинке. я советую вам заменить её (стрелку вверх) на такую

ЗЫ было бы красивее, если бы стрелки, которые сверху, находились по середине блока

w411 04.09.2011 18:06

Цитата:

Сообщение от melky (Сообщение 124740)
полезность скрипта ? в этом мире куча разных слайдеров.

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

Цитата:

Сообщение от melky (Сообщение 124740)
сейчас я тоже пишу свой, который наконец-то можно будет использовать стороннему человеку. я про расширяемость. ваш слайдер расширяем?

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

Цитата:

Сообщение от melky (Сообщение 124740)
решать за пользователя, какие блоки и какие классы использовать - как минимум нехорошо, вы согласны?

Хм... я считаю что юзеру должно быть фиолетово какие названия классов у элементов плагина
Главное чтобы не было конфликтов с другими dom элементами
Кому нужно изменить вид - поправит стилевой файл


Большое спасибо за критику в отношении стрелок!
Постарался учесть
С нижней панелью пока не решил как лучше сделать =)
Фича как раз в том что панелька сама выдвигается
возможно туда следует добавить другую иконку.
А может и впрямь - по клику сделать.

melky 04.09.2011 20:42

Цитата:

Сообщение от w411 (Сообщение 124752)
На самом деле было бы приятно услышать чего не хватает именно вам в слайдере чтобы вы поставили его к себе на сайт.

это было вступление. про полезность плагина, как вы могли бы заметить, я не написал ни слова. я просто сказал, что их очень много, а значит, и выделиться из этого "много" бывает очень сложно.

Цитата:

Сообщение от w411 (Сообщение 124752)
Смотря что вы называете расширяемостью
Возможность дописать функционал плагина?
Поверьте это нужно 2% юзеров
В основном людям хватает кастомизации стилей, те кто разбираются со скриптами - кастомизируют плагин как им вздумается под конкретный проект.

а что вы называете расширяемостью ? нет, не дописать, а добавить в коде (не в коде слайдера, а на странице - в конкретном месте применения).

я вроде разбираюсь со скриптами, но кастомизировать один понравившийся мне слайдер так и не смог - код по максимуму использовал возможности jquery (весь код слайдера - один цикл), и был минифицирован GCC.
Цитата:

Сообщение от w411 (Сообщение 124752)
Хм... я считаю что юзеру должно быть фиолетово какие названия классов у элементов плагина
Главное чтобы не было конфликтов с другими dom элементами
Кому нужно изменить вид - поправит стилевой файл

да нет, я не про классы вообще говорил. в идеале, как мне представляется слайдер, он не должен вообще сам ничего создавать - это делает верстальщик. он сверстал статичный слайдер, который не шевелится, прикрутил ваш скрипт, указал все элементы (вплоть до того, какой элемент отвечает за показ тумб (thumb) ), указал настройки (время анимации и т.д), перезагрузил страницу - готово. его css+html заготовка ожила.

т.е. плагин в идеале должен только предоставлять прослойку между javascript и html. всё, что он должен делать (но не всего. за исключением прокрутки туда-сюда, например), должен указывать веб-мастер.

PS прошу простить меня за мою особенность не печатать заглавную букву в начале предложения. привычка :)

Виктор Кон 08.09.2011 17:28

На ссылке написано liveSlider-0.3 а скачивается mySlider-0.2. Пример фактически показывает аналог gif файла с парой кнопок, которые как бы и не нужны. А если надо показать 60 фоток по адресам из интернета с 23 разными переходами, то как быть. А это реально можно сделать без jquery и с кодом в 20 Кб (только на адреса). Но на форуме почему-то так не любят, мол это неприлично. каталог моих фото-шоу вот тут http://kohnvict.narod.ru/b/ph-sh-list.htm

Gozar 08.09.2011 17:57

w411,
Не похоже что класс gallery уникален, мог бы назвать хотя бы chusov-gallery, чтобы не лезть в стили.

Не центрирует картинки если порезаны не под размер. В верхний левый угол как-то не кавайно. ^^

Nikolai-JS 29.09.2011 00:33

Посмотрел я на ваш слайдер, и мне тоже захотелось написать свой.
По оформлению мне понравился как на сайте motor.ru и взял его за основу.
Вот один из примеров оформления: http://motor.ru/articles/2011/08/24/auction/

Если к фотографиям нет соответствующего текста, то нет необходимости строить слайдер по структуре, как у вас:
<div class="slider">
    <div><img src="/image/1.jpg" /><span>text for image 1</span></div>
    <div><img src="/image/2.jpg" /><span>text for image 2</span></div>
    <div><img src="/image/3.jpg" /><span>text for image 3</span></div>
</div>

Гораздо проще соединить все фотографии в одну и использовать вебтехнологию CSS-Sprite.
Это когда изображения располагаются в одном графическом файле, а для их показа используют CSS, как бы "вырезая" нужный кусок. Тогда структура сильно упрощается:
<div class="slider">
	<img src="/image/image.jpg" />
</div>

Хочу сразу заметить, что все фото одного слайдера для соединения в один графический файл должны быть одного размера, смотри ссылку на motor.ru
Идём дальше. Для определения ширина и высоты слайдера можно использовать class="slider", а если у нас разные слайдеры?
Двойные классы class="slider slider1" возможны, но как-то не профессионально.
Простейшее решение - прописать размеры в аргументах картинки:
<img src="/image/image.jpg" width="500" height="300" />
Тогда и скрипт начинает работать не дожидаясь полной загрузки картинок, а уже после загрузки структуры ДОМ.
Ведь эти аргументы не трудно выловить с помощью JS.
Я пошел ещё дальше и сократил до
<div class="Slider" toggle="move" name="images/slide0-500-250-5-mycar.jpg"></div>

А что мелочиться? Краткость - сестра таланта!
При этом имя картинки формируется по следующим правилам:
1 аргумент - зарезервировал для ID, но в данный момент не использую (slide0)
2 аргумент - это ширина слайдера (500px)
3 аргумент - высота слайдера (300px)
4 аргумент - число фото в картинке (5)
5 аргумент - содержание файла
ну и знак "-" в качестве символа, разделяющего аргументы.

А чтоб было ещё круче, добавил аргумент toggle.
Если его нет или toggle="no" то картинки переключаются без эффекта, а если toggle="move" - то с перемещением.

Короче, что я тут распинаюсь. Скрипт весит всего 3К. Кликайте распаковывайте и смотрите.
Если будет время - допишу другие эффекты переключения.
Буду рад отзывам и критическим замечаниям.

PS: Я просто в восторге от этого сайта! Мне тут всё нравиться!
При написании слайдера использовал статьи "Объекты, ООП", "Замыкания", "Drag and drop", "Основы программной анимации на JavaScript"

Genius 03.10.2011 08:57

Виктор Кон,
что-то ваша страница просит установить какие-то дополнительные плагины...


Часовой пояс GMT +3, время: 11:53.