ФорумПрограммированиеПыхнуть хотите?Готовые решения → jMinis 2.0

jMinis 2.0

  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 26 мая 2012 г. 12:59, спустя 2 часа 49 минут 5 секунд

    Первая версия и описание идеи тут.
    Сразу напишу ссылки на демку с одним спрайтом и с разными.
    Пока без видяшки, нэта нет))

    Способ подключения немного изменился, теперь в rel писать нельзя, ну его нах:


    <body>
       <img src="img/sample1.jpg" class="sample1" alt="" />
       <img src="img/sample2.jpg" class="sample2" alt="" />
       <img src="img/sample3.jpg" class="sample3" alt="" />
       <img src="img/sample4.jpg" class="sample4" alt="" />
    </body>
    <script type="text/javascript">
       $('.sample1').jMinis({
           cols: 3,
           rows: 3
       });


    </script>



    Основных стилей немного прибавилось, из-за новых плюшек:
    .jminis_box { width:20px; height:20px; background:#000 url('img/miniload.gif') 50% 50% no-repeat; overflow:hidden; position:relative; }
    .jminis_box div { position:absolute; top:0; right:0; bottom:0; left:0; visibility:hidden; }
    .jminis_box a { background:url('img/ie.gif'); }
    .jminis_img img { position:absolute; visibility:hidden; }
    .jminis_nav.jminis_none { visibility:hidden; }
    .jminis_nav.jminis_touch a { position:absolute; top:0; right:0; bottom:0; left:0; }
    .jminis_nav.jminis_arrows { right:-22px; left:-22px; }
    .jminis_nav.jminis_arrows a { width:19px; height:80px; background:url('img/mininav.png') -19px 0 no-repeat; margin-top:-40px; overflow:hidden; position:absolute; top:50%; left:0; }
    .jminis_nav.jminis_arrows a:first-child { background-position:0 0; left:auto; right:0; }
    .jminis_nav.jminis_horizontal a { float:left; height:100%; background-color:#fff; opacity:0; }
    .jminis_nav.jminis_vertical a { float:left; width:100%; background-color:#000; opacity:0; }


    Дополнительных параметром тоже прибавилось:
    $('.sample1').jMinis(
    { header : 80 // верхний отступ, у Media Player Classic по дефолту 80рх
    , space : 10 // промежутки между кадрами, тоже по дефолту MPC
    , cols : 4 // количество столбцов
    , rows : 4 // количество строк
    , zoom : 1 // размер кадра, 1 = 100%, честно - хрень какая-то))
    , time : 100 // интервал для стиля hover
    , style : 'arrows' // arrows|touch|vertical|horizontal|hover
    });


    Коротко о стилях (в таком же порядке они в первой демке):
    arrows - то же самое, что и в первой версии
    touch - удобен для тач-устройств, весь элемент есть кнопка перехода на следующий кадр
    vertical - разбивает элемент на вертикальные секции, при наведении на которые выбирается кадр
    horizontal - так же, как и в предыдущем, только горизрнтально
    hover - автоматом листает с заданным интервалом

    Для vertical и horizontal цвет полоски можно задать в CSS.

    Плюс остался тот же, минус решается с помощью параметра zoom, но качество оставляет желать лучшего.
    Высокоуровневое абстрактное говно
  • Tekuto

    Сообщения: 1147 Репутация: N Группа: Адекваты

    Spritz 26 мая 2012 г. 10:10, спустя 21 час 10 минут 55 секунд

    вторая демка не загрузилась.
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 26 мая 2012 г. 16:01, спустя 5 часов 51 минуту 3 секунды

    Самая прикольная 3-я демка
    adw/0
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 26 мая 2012 г. 16:50, спустя 49 минут 20 секунд


    Самая прикольная 3-я демка
    ага, красотища :)
    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 26 мая 2012 г. 17:30, спустя 40 минут 20 секунд

    Самая прикольная 3-я демка

    это где белые вертикальные?
    Высокоуровневое абстрактное говно
  • Абырвалг

    Сообщения: 6476 Репутация: N Группа: Джедаи

    Spritz 27 мая 2012 г. 1:52, спустя 8 часов 21 минуту 41 секунду

    когда мышкой по фотке ведешь и меняются картинки - ващще суппер!, никогда такого не видел. Сам придумал?
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 мая 2012 г. 2:43, спустя 51 минуту

    вроде сам придумал, но может где-то подобное есть))
    Высокоуровневое абстрактное говно
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 27 мая 2012 г. 2:53, спустя 9 минут 30 секунд

    никогда такого не видел

    купи мак :D
    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 мая 2012 г. 2:57, спустя 4 минуты 29 секунд

    купи мак :D

    а где в маке такое есть? оО
    Высокоуровневое абстрактное говно
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 27 мая 2012 г. 3:03, спустя 6 минут 8 секунд


    купи мак :D

    а где в маке такое есть? оО
    iPhoto глянь например) да и вообще все папки где есть фотки)
    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 мая 2012 г. 3:12, спустя 9 минут 9 секунд

    iPhoto глянь например) да и вообще все папки где есть фотки)

    ага, гляну)) щас только сбегаю, куплю один))
    Высокоуровневое абстрактное говно
  • Kikky

    Сообщения: 201 Репутация: N Группа: Кто попало

    Spritz 27 мая 2012 г. 3:15, спустя 2 минуты 18 секунд

    Да, 3-я самая клёвая :)
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 27 мая 2012 г. 4:14, спустя 58 минут 47 секунд


    Самая прикольная 3-я демка

    это где белые вертикальные?
    ага
    adw/0

Пожалуйста, авторизуйтесь, чтобы написать комментарий!