Nie tak dawno, bo raptem dwa wpisy temu, pokazywałem podstawy tworzenia wtyczek jQuery. W ramach tamtego posta, mogliście zobaczyć jak rozwiązałem kwestię wyświetlania, na głównej stronie tego bloga, wycinków zdjęć nagłówkowych dodawanych przeze mnie do niektórych postów. Na tej podstawie stworzyłem “zalążek” wtyczki jQuery. Postanowiłem jednak, że pójdę z tym tematem dalej i tak powstała pierwsza wersja mojego pierwszego własnego plugina do tej biblioteki! Tak jak mogliście wyczytać w tytule tego wpisu, nazwałem ją po prostu “CropOnTheFly”, mam nadzieję, że nazwa mówi sama za siebie (jeśli nie to zawiadamiam, że umożliwia ona przycinanie zdjęć “w locie”).

Cały projekt umieściłem na GitHub’ie, tak że w zasadzie każdy z Was może, jeśli by chciał, dorzucić swoje trzy grosze do tego mini projekciku… Strona projektu CropOnTheFly znajduje się pod adresem https://github.com/burczu/CropOnTheFly.

Sposób użycia

Aby skorzystać z mojej wtyczki, wystarczy pobrać z powyższego adresu plik cropOnTheFly.js lub cropOnTheFly.min.js (jeśli wolicie użyć “zminifikowanej” wersji skryptu). Następnie wystarczy załączyć go na stronie internetowej:

<script src="/jquery-1.11.1.js"></script>
<script src="cropOnTheFly.min.js"></script>

Oczywiście, jako że jest to wtyczka jQuery, wymagane jest również załączenie skryptu biblioteki. Następny krok to skonfigurowanie wtyczki:

$(document).ready(function(){
    $('img').cropOnTheFly(options);
});

Powyższy kod, spowoduje przycięcie wszystkich obrazków na stronie.

Konfiguracja

Parametr options jest obiektem, który może (nie musi) zawierać następujące właściwości:

var options = {
    height: 250,
    width: 400,
    verticalPosition: 'center',
    horizontalPosition: 'center'
}

Poniżej wyjaśnienie przedstawionych właściwości wraz z informacją o wartości domyślnej:

  • height - wysokość przycięcia; jeśli jest większa od wysokości obrazka, zostanie zastąpiona przez tę wysokość; wartość domyślna to null co oznacza, że użyta zostanie wysokość obrazka
  • width - działa dokładnie tak samo jak wysokość, tyle że dotyczy szerokości przycięcia
  • verticalPosition - oznacza pozycję wycięcia względem obrazka w pionie; dostępne wartości to top, center oraz bottom czyli odpowiednio po przycięciu pokazana zostanie góra, środek lub dół obrazka; domyślna wartość to top
  • horizontalPosition - oznacza pozycję wycięcia względem obrazka w poziomie; dostępne wartości to left, center oraz right czyli odpowiednio po przycięciu pokazana zostanie lewa, środkowa lub prawa część obrazka; domyślna wartość to left

Tak wyglądają dostępne na tę chwilę opcje konfiguracyjne. Na pewno planuję rozszerzyć parametry verticalPostition oraz horizontalPosiotion o możliwość podania konkretnej wartości liczbowej, dzięki czemu możliwe będzie dokładniejsze określanie pozycji przycięcia względem obrazka.

Wydaje mi się, że takie przycinanie zdjęć “w locie” to całkiem przydatna sprawa. Ciekaw jestem czy komuś oprócz mnie przyda się ta wtyczka ;)