Загрузка изображений в зависимости от размера экрана

demosourse

Легковесный jQuery плагин для загрузки изображений в зависимости от размеров экрана.

Использование

Подключение библиотек:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="data-img.min.js"></script>

Настройка разметки. Для мелкого изображения используйте атрибут data-sml, для среднего data-med, для крупного data-lrg. Если JS будет отключён, то отобразиться изображение, указанное в атрибуте src.

<img
  class="data-img"
  src="http://placehold.it/1x1"
  data-sml="img/400x320.jpg"
  data-med="img/800x640.jpg"
  data-lrg="img/1000x800.jpg"
>
<div
  class="data-img"
  style="background-image: url(http://placehold.it/1x1);"
  data-sml="img/400x320.jpg"
  data-med="img/800x640.jpg"
  data-lrg="img/1000x800.jpg"
>

Далее просто вызываем плагин

$('.data-img').dataImg();

Применение специальных настроек

Настройка плагина, для реакции на смену размера экрана.

$('.data-img').dataImg({
  sml: 200,
  med: 400,
  lrg: 800,
  resize: true
});

Настройки по умолчанию

$('.data-img').dataImg({
  sml: 400,
  med: 800,
  lrg: 1000,
  resize: false
});

Основные настройки

  • sml: предел размера экрана для отображения маленького изображения (по умолчанию = 400)
  • med: предел размера экрана для отображения среднего изображения (по умолчанию = 800)
  • lrg: предел размера экрана для отображения крупного изображения (по умолчанию = 1000)
  • resize: true/false реакция на изменение размеров экрана (по умолчанию = false)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://dev.twoblok.es/data-img/
Перевел: Станислав Протасевич
Урок создан: 12 Декабря 2014
Просмотров: 18976
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^