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

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

  • technobulka

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

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

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

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

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

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

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

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

  • technobulka

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    scroll&#39;ом посчитать {+++149+++}
    не помешала бы такая херь, как подпись к картинке, взятая, к примеру, из тайтла самой же картинки либо из тайтла ссылки

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

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

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

    scroll&#39;ом посчитать

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

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

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

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

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