jQuery PlugIn: Auto resize css background image

В последно време ми се налага (доста често) да манипулирам галерийни сайтове за правилното им визуализиране в различни браузъри, различни екранни ширини и различни типове устройства. В процеса на работа открих доста добри техники и методи за така наречения отзивчив дизайн и в частност модели за адаптиране размерите на различните медии (картинки, видео, карти, съдържание, менюта и т.н.) използвани в Интернет пространството.

Един от най-добрите (по лично мнение) за картинки е модела на Adaptive Images и главно, защото при разглеждане в мобилни устройства, не само адаптира размерите на картинките, но може да смени източника от който ги тегли и така да зарежда по-малки и като файл картинки.

Проблем при подобни библиотеки е, че в почти 99.9999% от случаите не се използват всичките им функционалности. Това, означава, че се прехвърля код, който никога не се използва. Такъв е проблема и с повечето структурни (framework) библиотеки, но пък са незаменими за бърза разработка и преизползваемост на модулите.

Това е основната причина, поради която седнах и си написах плъгин към jQuery, който да мога да модулирам и да внедрявам само нещата, които са ми нужни и го кръстих lckDmBg.

Кодът

(function($) {
    $.fn.lckDmBg = function(dim) {
        var opts = $.extend({}, $.fn.lckDmBg.defaults, dim),
            $window = $(window);

        return this.each(function() {
            var $this = $(this),
                o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            if (!dim) {
                $this.height($this.width());            
                $this.css({'background-size':($this.width()+o.croppedWidth)+o.measures+' '+($this.height()+o.croppedHeight)+o.measures});
            }
            else {
                $this.height(o.initialHeight);
                $this.width(o.initialWidth);
                $this.css({'background-size':($this.width()+o.croppedWidth)+o.measures+' '+($this.height()+o.croppedHeight)+o.measures});
            }
        });
    };

    $.fn.lckDmBg.defaults = {
        croppedWidth: 0,
        croppedHeight: 0,
	measures: 'px'
    };
})(jQuery);

Това е ядрото на плъгина. Невероятно простичко и лесно смилаемо. Към него има и няколко модула, които се връзват, за да се разшири функционалността му, но за тях някой друг път.

Начин на използване

Както сте забелязали, това, което плъгина прави е да коригира background-size на елемента, както ѝ неговите параметри за височина и ширина. background-size е заложен от 3тата версия на CSS стандарта, и за да избегна въпроси от родът на – Ама ще работи ли под IE 6 ще си позволя един цитат от CSS-Tricks:

„Create responsive elements for modern browsers! And because there is no IE 8 or lower on any mobile device we don’t need to worry about it.“

Плъгина работи върху елемент или множество елементи със зададена фонова картинка подобно на .class { background: url(path/to/image.png); }, като автоматично оразмерява фоновото изображение по размера на елемента.

Извикването му е стандартно за jQuery плъгините: $(element).lckDmBg(); или навързано във верига: $(element).api(element).lckDmBg();

В случаите, когато искаме изображението да получи различни размери, има няколко стойности, които може да предадете на плъгина.

initialWidth
Предава точния размер за ширината на елемента съдържащ фоновото изображение.
initialHeight
Предава точния размер за височина на елемента съдържащ фоновото изображение.
croppedWidth
Предава отстоянието на фоновото изображение по ширина.
croppedHeight
Предава отстоянието на фоновото изображение по височина.
measures
Предава типът на мерните единици.

Примери

Първия пример е с опростено извикване. Без да се предават параметри и в стандартния блок на jQuery.

$(document).ready(function() {
    var $attachment = $('.pictureBox'),
        $window = $(window);

    $attachment.lckDmBg();

    $window.resize(function() {
        $attachment.lckDmBg();
    });
});

Пример 1 » Кодът в Codepen

Във втория пример съм добавил динамично изменение на размерите за всички елементи спрямо първия.

$(document).ready(function() {
    var $attachment = $('.pictureBox'),
	$attlink = $attachment.find('a'),
	$$cbw = jQuery($attlink[0]).width(),
        $window = $(window);

    $attlink.lckDmBg({'initialWidth':$$cbw, 'initialHeight':$$cbw});

    $window.on('resize', function() {
	var $$attlw = $($attachment[0]).width();
        $attlink.lckDmBg({'initialWidth':$$attlw, 'initialHeight':$$attlw});
    });
});

Така си гарантирам, че браузъра ще постави абсолютно едни и същи размери за всички елементи.

Пример 2 » Кодът в Codepen

Това е всичко засега. Тествайте и задавайте въпроси. Ще отговоря на абсолютно всекиго. Ако плъгина набере достатъчно интерес ще го дигна и в Git-a и вероятно ще  добавя и другите модули.

Едно мнение по „jQuery PlugIn: Auto resize css background image

Вашият коментар

This site uses Akismet to reduce spam. Learn how your comment data is processed.