Preview de imagens antes do upload usando Jquery

Esta função é interessante para aqueles projetos que você quer fazer uma pré-visualização do arquivo que está sendo uploadado para o servidor. O código é simples e pode ser baixado através do link abaixo:

JS

<script type=”text/javascript”>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$(‘#blah’)
.attr(‘src’, e.target.result)
.width(150)
.height(200);
};

reader.readAsDataURL(input.files[0]);
}
}
</script>

HTML

<input type=’file’ onchange=”readURL(this);” />
<img id=”blah” src=”#” alt=”your image” />

Demo e download: http://jsbin.com/uboqu3/1/edit

 

Os melhores editores WYSWYG em HTML5 para seu projeto web

Separei uma lista com os melhores editores WYSWYG em HTML 5 para você utilizar em seu projeto web. Alguns deles você poderá perceber que a perfeição e intuitividade é tão boa que é de se pensar de dispensar os editores para desktop.

1. Redactor

It is the most fantastic yet beautiful and easy-to-use WYSIWYG editor on jQuery. It is lightning fast, small, scalable, and powerful.


Redactor

Source + Demo

2. wysihtml5

Is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.


wysihtml5

Source + Demo

3. Mercury Editor

Mercury is a full featured HTML5 editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.


Mercury Editor

Source + Demo

4. TinyEditor

It is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters.


TinyEditor

SourceDemo

5. elRTE

Is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more. You can use it in any commercial or non-commercial projects.


elRTE

SourceDemo

6. Aloha Editor – HTML5 WYSIWYG Editor

Lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.


Aloha Editor

Source + Demo

7. CLEditor

It is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.


CLEditor

Source + Demo

8. bootstrap-wysihtml5

Is a JavaScript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.


bootstrap-wysihtml5

Source + Demo

9. jQrte

A wysiwyg editor. Distributed under the terms of the MIT license. Free of charge for both personal and commercial use.


jQrte

Source + Demo

10. Maqetta

Is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.


Maqetta

SourceDemo

Jquery: projeto supersize images

O projeto Supersize desenvolvido com a biblioteca Javascript Jquery é interessante pois possibilita o usuário utilizar imagens em full screen com redimencionamento automático dependendo da resolução de tela do usuário.

Veja no link abaixo a demo de utilização do plugin

http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

Para fazer o download do plugin clique aqui