PhotoJShop
Alejandro U. Alvarez
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
PhotoJShop
Autor | Alejandro U. Alvarez |
Wersja: | 1.0.5 |
Dokumentacja: | Dokumentacja |
Strona wtyczki: | Strona wtyczki |
Github: | Github |
Wersja jQuery: | jquery >=1.5 |
Licencja: | MIT |
Zgłoś błąd: | Zgłoś błąd |
Data opublikowania: | 2014-04-24 |
Historia wersji
Wersja | Data publikacji |
---|---|
1.0.5 | 2014-04-24 |
1.0.4 | 2013-12-09 |
1.0.1 | 2013-11-02 |
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;
});