(0.0)
0
Wersja: 1.0.5
Numer wersji wtyczki
Dokumentacja
Sprawdź wszystkie opcje jakie oferuje plugin
Strona wtyczki
Oficjalna witryna wtyczki
Github
Repozytorium Github
Wersja jQuery: jquery >=1.5
Wersja jQuery z którą współpracuje plugin
Licencja: MIT
Licencja
Zobacz więcej
Tagi
Instalacja
  • CSS
  • HTML
  • JS
canvas{
	border:#666 solid 1px;
}
nav{
	display:inline-block;
}
nav ul{
	padding:0;
	margin:0;
	list-style:none;
}
nav li{ display:inline-block; }
nav a{
	display:inline-block;
	padding:5px 15px;
}
<h3>Effects:</h3>
<nav>
    <ul id="effects">
        <li><a href="#effect" data-effect="blur">Blur</a></li>
        <li><a href="#effect" data-effect="blur2">Blur (rad=4)</a></li>
        <li><a href="#effect" data-effect="sharpen">Sharpen</a></li>
        <li><a href="#effect" data-effect="lighten">Lighten</a></li>
        <li><a href="#effect" data-effect="darken">Darken</a></li>
        <li><a href="#effect" data-effect="emboss">Emboss</a></li>
        <li><a href="#effect" data-effect="edge-enhance">Edge enhance</a></li>
        <li><a href="#effect" data-effect="edge-detect">Edge detect</a></li>
        <li><a href="#effect" data-effect="hard-edge">Hard edge</a></li>
        <li><a href="#effect" data-effect="laplace">Laplace</a></li>
    </ul>
</nav>
<br />
<h3>Filters:</h3>
<nav>
    <ul id="filters">
        <li><a href="#filter" data-effect="b&w">B&W</a></li>
        <li><a href="#filter" data-effect="sepia">Sepia</a></li>
        <li><a href="#filter" data-effect="vintage">Vintage</a></li>
        <li><a href="#filter" data-effect="red">Red</a></li>
        <li><a href="#filter" data-effect="blue">Blue</a></li>
        <li><a href="#filter" data-effect="green">Green</a></li>
        <li><a href="#filter" data-effect="recolor">Recolor</a></li>
    </ul>
</nav>

<p>You can also use a <a href="#custom" id="custom" data-effect="custom">Custom matrix</a></p>

<article>
    <img src="http://jquery.netid.pl/media/sample/700x500/1.jpg" id="img" alt="Img" />
</article>
$('#effects a').click(function (e) {
    e.preventDefault();
    $('#img').PhotoJShop({
        'effect': $(this).attr("data-effect")
    });
    return true;
});

$('#filters a').click(function (e) {
    e.preventDefault();
    $('#img').PhotoJShop({
        'color': $(this).attr("data-effect")
    });
    return true;
});

$('#custom').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    var mat = prompt("Please enter custom matrix, in JavaScript format (e.g. [[0,0,0],[0,1,0],[0,0,0]])");
    $('#img').PhotoJShop({
        'matrix': eval(mat)
    });
    return true;
});