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 : 'http://3.bp.blogspot.com/_6wOsIdNXFdY/S3a4a9e3eoI/AAAAAAAAA5s/H0PkwEqhLU8/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: 'http://3.bp.blogspot.com/_6wOsIdNXFdY/S3a4a9e3eoI/AAAAAAAAA5s/H0PkwEqhLU8/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

Prześlij dalej:

Brak komentarzy:

Prześlij komentarz