CSS FilterID Dzgn
#codigo pre code {
display: block;
background: rgba(0, 0, 0, 0);
color: #c5c8c6;
font-family: lato, Menlo, Monaco, Consolas, monospace;
line-height: 1.5;
padding: 10px;
}
$(window).resize(function(){
var wi = $(window).width();
var he = $(window).height();
$("#corpo").css('height', he-62 );
$("#corpo").css('width', wi-226 );
var imgheight = $("#imagem").height();
var imgwidth = $("#imagem").width();
var ww = $("#corpo").width();
var hh = $("#corpo").height();
$("#imgout").css('margin-top', he/2-$("#imagem").height()/2);
$("#imgout").css('margin-left', ww/2-$("#imagem").width()/2);
}).eq(0).resize();
$(".group h2").click(function () {
$(this).toggleClass('activegroup');
});
$(".btn").click(function () {
$(this).toggleClass('active');
var x = ($(this).attr('href'));
$(x).toggleClass('active');
});
$('.img-url').change(function(e) {
e.preventDefault();
$('#imagem').attr('src', $('input[name="url"]').val());
$(".reset").click();
$("window").trigger("resize");
});
/*
-----------------------------------------------------
Filter
-----------------------------------------------------*/
$(".reset").click(function() {
$("#blur, #hue, #invert, #sepia, #grayscale").val( "0" );
$("#saturate, #contrast, #brightness").val( "1" );
$("aside *").change();
}).eq(0).click();
$("aside *").on('input change', function() {
var blur = $("#blur").val();
var saturate = $("#saturate").val();
var hue = $("#hue").val();
var contrast = $("#contrast").val();
var invert = $("#invert").val();
var sepia = $("#sepia").val();
var grayscale = $("#grayscale").val();
var brightness = $("#brightness").val() ;
//var brightnessv = parseInt($("#brightness").val()) -1;
var filters = "blur(" + blur+"px)" + " saturate("+ saturate+ ")" + " contrast(" + contrast + ")" + " invert(" + invert+ ")" + " sepia(" + sepia+ ")" + " grayscale(" + grayscale+ ")" + " brightness(" + brightness + ")" + " hue-rotate("+hue+ "deg)" ;
$("#imagem").css("-webkit-filter", filters);
//$("#imagem").css("-filter", filtersvendor);
$("#blur-val").text(blur);
$("#saturate-val").text(saturate);
$("#hue-val").text(hue);
$("#contrast-val").text(contrast);
$("#brightness-val").text(brightness);
$("#invert-val").text(invert);
$("#sepia-val").text(sepia);
$("#grayscale-val").text(grayscale);
$("#codigo pre code ").html('.myclass{
-webkit-filter:'+ filters + ';'+'
}');
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
}).eq(0).change();
$("#zoom").on('input change', function() {
var zoom = $("#zoom").val() ;
$("#zoom-val").text(zoom);
$("#imgout").css("transform", "scale(" + zoom+")");
});
$(function() {
$( "#imgout" ).draggable();
});
/* ======================================================================
FIM aside
======================================================================
http://www.darkershadesofbrown.com/blog/wp-content/uploads/2013/05/Scranton-PA-Wedding-Photographers-Marisa-TJ-by-Darkershadesofbrown-Photography012.jpg
*/
