jQuery PhotoShoot - efekt robienia zdjęć na jQuery

Całkiem nie dawno zaprezentowano ciekawy plugin do framework'u jQuery umożliwiający tworzenie efektu robienia zdjęć - a dokładnie widoku wizjera na tle rozmazanego obrazka. Przykład dołączony do rozszerzenia pokazuje także, w jaki sposób przygotować "podgląd" zrobionych zdjęć.

Obsługa pluginu jest maksymalnie uproszczona - po załadowaniu pliku js oraz css z biblioteką wystarczy podać ścieżkę do zdjęcia i już możemy cieszyć się z uruchomionego efektu.

$(document).ready(function(){

    var config = {
        image : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqq3kV3UeDegVEY3DN_cPLNhFWjTQjGkKelTo-mVyDQc2aWWSiN1pr9rjPCFGmkZFaQw0jc3x1mlMbxCKJUUD5_AyuNfxixTWXNXqPzeIXaL5gIjRF8eMk86ZFLE64-FEn49sgzDfL2lsA/s640/IMG_7576.jpg',
    }

    $('#hello-world').photoShoot(config)
});

Dostępne opcje pluginu (podawane w obiekcie config) to:

• image (wymagany) - ścieżka do obrazka
• blurLevel - poziom rozmazania obrazki
• opacity - poziom przezroczystości obrazka w tle - zakres od 0 do 1 - im mniejszy tym obrazek bardziej przezroczysty
• viewFinder - obiekt definiujący obszar "wizjera":
  
  • width - szerokość
  • height - wysokość
  • img - obrazek (domyślnie pusty ciąg znaków)
• onClick - funkcja wywoływana po kliknięciu - przekazuje w parametrze do funkcji obiekt z własnościami top oraz left definiującymi położenie lewego górnego rogu migawki

Przedstawiony w przykładzie podgląd zdjęć polega na:

• dodaniu warstwy, gdzie będą wrzucane wykonane zdjęcia (.album)
• dynamiczym tworzeniu obiektów, które będą zawierały wykonane "wycinki" ze zdjęcia (.shot)
• dodanie efektu "przewijania" do zrobionych zdjęć (.album .slide)

Przygotowany przez ekipę z tutorialzine plik z css'ami wygląda następująco:

.shot{
    border:3px solid #FCFCFC;
    float:right;
    position:relative;
    margin-left:10px;
    overflow:hidden;
   
    /* cień w css3 */
    -moz-box-shadow:0 0 2px black;
    -webkit-box-shadow:0 0 2px black;
    box-shadow:0 0 2px black;
}

.shot img{
    display:block;
}

.album{
    /* przechowuje zdjęcia */
    bottom:50px;
    height:110px;
    overflow:hidden;
    position:absolute;
    right:20px;
    width:490px;
}

.album .slide{
    /* warstwa do przesuwania  */
    width:700px;
    height:110px;
    position:relative;
    left:-210px;
}

A teraz część JavaScript'owa (wersja angielska dostępna w przykładzie w linkach na samym dole):

// definicja obrazka
var myImage = {
        url: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqq3kV3UeDegVEY3DN_cPLNhFWjTQjGkKelTo-mVyDQc2aWWSiN1pr9rjPCFGmkZFaQw0jc3x1mlMbxCKJUUD5_AyuNfxixTWXNXqPzeIXaL5gIjRF8eMk86ZFLE64-FEn49sgzDfL2lsA/s640/IMG_7576.jpg',
        w: 580,
        h: 387
    }

/**
 * funkcja przyjmuje obiekt position - opisany powyżej
 * @param object position
 */
function takePreview(position)  {
        var newShot = $('<div class="shot">').width(150).height(100);
        newShot.append( $('<img height="'+(myImage.h/2)+'" src="'+myImage.url+'" width="'+(myImage.w/2)+'" />').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );
        
        // usuwanie 4-go obrazka (który się schował poza linię)
        $('.shot').eq(3).remove();
        
        // dodawanie obiektu i przesuwanie       
        newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow');   
}

$(document).ready(function(){

    var config = {
        image : myImage.url,
        onClick: takePreview
    }

    $('#hello-world').photoShoot(config);
    $('<div class="album">').html('<div class="slide">').appendTo('#hello-world');
});

Oficjalna strona pluginu
Tutorial jak zrobić efekt "widoku przez wizjer"
Demo pluginu