mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-02 20:30:09 +00:00
101 lines
2.0 KiB
HTML
Executable File
101 lines
2.0 KiB
HTML
Executable File
<html>
|
|
<link rel="stylesheet" type="text/css" href="editor.css">
|
|
<style>
|
|
|
|
body.dark {
|
|
background: #0a0a0a;
|
|
color: silver;
|
|
}
|
|
|
|
|
|
body.gray {
|
|
background: #333;
|
|
color: silver;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
<script src="jquery.js"></script>
|
|
<script src="jquery-ui.js"></script>
|
|
<script src="editor.js"></script>
|
|
<script>
|
|
|
|
// XXX this exists in jli, remove when not needed...
|
|
jQuery.fn.sortChildren = function(func){
|
|
return $(this).each(function(_, e){
|
|
return $(e).append($(e).children().detach().get().sort(func))
|
|
})
|
|
}
|
|
|
|
|
|
|
|
/*********************************************************************/
|
|
|
|
|
|
function toggleThemes(){
|
|
var b = $('body')
|
|
if(b.hasClass('gray')){
|
|
b.removeClass('gray')
|
|
b.addClass('dark')
|
|
} else if(b.hasClass('dark')){
|
|
b.removeClass('dark')
|
|
} else {
|
|
b.addClass('gray')
|
|
}
|
|
}
|
|
|
|
|
|
// setup...
|
|
$(function(){
|
|
var target = '#image'
|
|
|
|
var panel = makeControls(target).hide()
|
|
|
|
$('body')
|
|
.append(panel)
|
|
|
|
reloadControls(target)
|
|
|
|
$(target)
|
|
.click(function(){
|
|
panel.show()
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
/*********************************************************************/
|
|
</script>
|
|
<body>
|
|
<img id="image" src="image.jpg" >
|
|
<p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p>
|
|
|
|
<!--br>
|
|
<hr>
|
|
<br>
|
|
|
|
<p>
|
|
Same image, first scaled (transform: scale(2)) then resized
|
|
(height=600) and invert filter applied.<br>
|
|
The result shows that resizing does not degrade the quality
|
|
as much.<br><br>
|
|
|
|
#3 the effect is exagurated by first resizing by 2 and then
|
|
scaling by 4...
|
|
</p>
|
|
|
|
<img src="image.jpg" style="-webkit-transform: scale(2); -webkit-filter: invert(1)">
|
|
<img src="image.jpg" height="600" style="-webkit-filter: invert(1)">
|
|
<img src="image.jpg" height="150" style="-webkit-transform: scale(4); -webkit-filter: invert(1)">
|
|
|
|
<hr>
|
|
|
|
<img src="image.jpg" style="-webkit-transform: scale(2)">
|
|
<img src="image.jpg" height="600">
|
|
<img src="image.jpg" height="150" style="-webkit-transform: scale(4)"-->
|
|
|
|
</body>
|
|
</html>
|