ФорумПрограммированиеПыхнуть хотите?Готовые решения → jImg - (лат. ostendere imagine) картинко-показывалка, редкий вид...

jImg - (лат. ostendere imagine) картинко-показывалка, редкий вид...

  • technobulka

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

    Spritz 9 декабря 2010 г. 9:12, спустя 1 день 40 минут

    демка - http://keyx.narod.ru/jimg/
    css и сама функция в демке, иконки там же (белые и черные), лоадер один (вроде), где найти другие - знаете))

    инструкция:
    1 - все ссылки с картинками обозначаем одним классом, чтоб на другие не зарился… ссылка на большое изображение непосредственно в хрефе…
    пример:
    <a href="img/66905.jpg" class="showimg">66905.jpg</a>

    2 - кнопочками "влево" и "вправо" листает все картинки найденные на странице (которые пометили классом)… так же листать можно стрелками клавы ← и →
    3 - закрыть окно можно кликом на кнопку "закрыть" (по дефолту скрыта), кликом вне картинки, или кнопкой Esc…

    настройки:
    $('a.showimg').jImg({
     overlayBackground : '#000',   // цвет заднего фона
     overlayOpacity : 0.5,   // прозрачность заднего фона
     blockBackground : '#000',   // цвет рамки
     buttonsImage : 'img/jimg_icons.png',   // иконки закрыть/след/пред, 30х90 в одном файле
     loaderImage : 'img/jimg_load.gif',   // картинка загрузки
     arrowPosition : 'top',   // расположение кнопок "влево" и "вправо", значения - top/middle/bottom
     showCloseButton : false,   // отображение кнопки "закрыть"
     loopThis : false,   // зацикливание (за последней идет первая)
     errorText : 'Image not found.',   // текст сообщения об ошибке
     errorTextColor : '#fff',   // цвет текста сообщения об ошибке (прочее форматирование пихать в #jimg_in td)
     showTime : 300,   // время разворачивания
     hideTime : 200   // время сворачивания
    });
    Высокоуровневое абстрактное говно
  • Абырвалг

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

    Spritz 6 декабря 2010 г. 6:10, спустя 20 часов 58 минут 34 секунды

  • technobulka

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

    Spritz 6 декабря 2010 г. 6:14, спустя 4 минуты 8 секунд

    Абырвалг, эт ты к чему написал?))
    Высокоуровневое абстрактное говно
  • Абырвалг

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

    Spritz 6 декабря 2010 г. 6:23, спустя 8 минут 15 секунд

    к тому, что сабж - баянище
  • technobulka

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

    Spritz 6 декабря 2010 г. 6:30, спустя 7 минут 42 секунды

    бло… там задроты пишут, а я для практики…
    Высокоуровневое абстрактное говно
  • Givi

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

    Spritz 6 декабря 2010 г. 7:32, спустя 1 час 1 минуту 21 секунду

    Stasovsky, сама фишка зачетная, и очень аккуратно сделана как по мне. Вот только с "невер-картинкой" не очень понятно: что будет если она будет стоять, к примеру, третьей в списке, я смогу увидеть что картинки (большой) нет на сервере, потому она не загрузится, но стрелки "вперед/назад" появятся и я смогу перейти к 4-ой картинке дабы не прерывать общего просмотра из-за одного проеба того, что картинки заливал?
    Спустя 79 сек.
    И ещё как вариант предлагаю в настройках сделать возможность включения "карусели", то есть чтоб картинки по кругу можно было смотреть сколько душе угодно.
    Спустя 71 сек.
    Ну и, для ещё большего счастья, возможность устроить автоматическое слайд-шоу с устанавливаемым интервалом смены картинок было бы в месту =)
  • andipas

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

    Spritz 6 декабря 2010 г. 8:13, спустя 41 минуту 5 секунд

    Симпатичный еще один …box ))

    Если будешь добавлять фичи, на мой взгляд было бы логично при клике на след. картинку чтоб она не исчезала в черную бездну, а оставалась с ховер на ней анимацией загрузки следующей картинки.
  • technobulka

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

    Spritz 6 декабря 2010 г. 13:36, спустя 5 часов 23 минуты 2 секунды

    Stasovsky, сама фишка зачетная, и очень аккуратно сделана как по мне. Вот только с "невер-картинкой" не очень понятно: что будет если она будет стоять, к примеру, третьей в списке, я смогу увидеть что картинки (большой) нет на сервере, потому она не загрузится, но стрелки "вперед/назад" появятся и я смогу перейти к 4-ой картинке дабы не прерывать общего просмотра из-за одного проеба того, что картинки заливал?

    тож об этом думал.. будет в сл версии))

    И ещё как вариант предлагаю в настройках сделать возможность включения "карусели", то есть чтоб картинки по кругу можно было смотреть сколько душе угодно.

    то есть с последней на первую? как вариант… особо мучаццо не придеццо))

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

    а вот это уже еботня)) не люблю слайдшоу, никогда его не юзал…

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

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

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

    Spritz 7 декабря 2010 г. 15:27, спустя 1 день 1 час 50 минут

    добавил:
    1. зацикливание, чтоб за последней картинкой шла первая… в настройках loopThis
    2. если картинка не найдена, выдаст ошибку… в настройках errorText
    3. прелоад лоадер.гиф и иконок

    обновленный файл в демке, изменения в js и в css…
    Высокоуровневое абстрактное говно
  • technobulka

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

    Spritz 8 декабря 2010 г. 8:31, спустя 17 часов 4 минуты 20 секунд

    при клике на след. картинку чтоб она не исчезала в черную бездну, а оставалась с ховер на ней анимацией загрузки следующей картинки.

    сделал это фиговину)) обновления в css и в js…
    Высокоуровневое абстрактное говно
  • Givi

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

    Spritz 20 декабря 2010 г. 3:04, спустя 11 дней 18 часов 33 минуты

    Ну я это, понаглеть решил: в общем, не помешала бы такая херь, как подпись к картинке, взятая, к примеру, из тайтла самой же картинки либо из тайтла ссылки. А саму подпись тоже сделать опциональной с отображением внизу.
    п.с. А пока штука нормальная, вот только инициация функции в самом теле страницы не очень удобная. Если у кого визуальный редактор, то нужно вручную потом вставлять эту инициализацию. А так, то все ок.
  • Givi

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

    Spritz 20 декабря 2010 г. 7:14, спустя 4 часа 9 минут 32 секунды

    Да, и ещё сходу вопрос, но уже больше ко всем: каким хером можно заставить "всплывающее" окошко с картинками центроваться не от верха страницы (то есть сейчас оно от верхней границы отступает ровно половину ширины экрана браузера, то есть чисто центровка математическая), а от верха того положения, до которого я прокрутил страницу. Ну либо же проще: как заставить "всплывающее окно" при прокрутке страницы оставаться по центру экрана?
  • technobulka

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

    Spritz 20 декабря 2010 г. 15:05, спустя 7 часов 51 минуту 28 секунд

    scroll'ом посчитать
    Спустя 149 сек.
    не помешала бы такая херь, как подпись к картинке, взятая, к примеру, из тайтла самой же картинки либо из тайтла ссылки

    мона впихнуть, позже нарисую, если напомните))
    Высокоуровневое абстрактное говно
  • Givi

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

    Spritz 21 декабря 2010 г. 2:35, спустя 11 часов 29 минут 56 секунд

    scroll'ом посчитать

    спасибо, щяс погуглю, ибо чего-то не мог сформировать нормально запрос где и что мне нужно центрировать :)
  • Givi

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

    Spritz 21 декабря 2010 г. 3:17, спустя 41 минуту 53 секунды

    Ну и вот, по сути. решение, может даже сам автор добавит его в исходник =)
    1. Строка 76, функция showImg(): определяем в функции новую переменную var scrollTop = $(document).scrollTop();
    2. Строка 114. При определении верхнего отступа добавляем учет "отскролленного" куска страницы: .animate({height:trimHeight,marginTop:-trimHeight/2+scrollTop}, opts.showTime, function() {
    Собственно все, мне этой правки для моей задачи хватило.
    Ещё раз спасибо автору, ибо я хуй шарю в ява-скриптах, и уже тем более в Жукери.

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