jQuery Notes - Exemplo de uso

[Glauber Néspoli 0]

Bom dia. Seguinte, estou tentando utilizar o plugin jQuery Notes do jQuery, mas.. não estou sabendo exatamente como utilizá-lo.

 

Toda a informação que tem de como utilizá-lo encontra-se aqui, mas eu sinceramente não entendi como. O download não inclui nenhum exemplo pronto.

 

Alguém pode dar uma luz de como utilizá-lo?

 

[]'s

Glauber

[William Bruno 1501]

Não entendi a sua dúvida amigo...

 

poste como você tentou fazer.

[0cool 0]

Abra esta página no navegador... vá em código fonte, copie e coloque aqui o conteúdo do code em html para darmos uma analisada.

[Glauber Néspoli 0]

Então.. eu não entendi como utilizar o plugin. Tentei de algumas formas, mas sem sucesso.

 

É um plugin para criar notes em fotos, e teria que ficar assim: http://jquery-notes.rydygel.de/samples.php

 

Só ver ali embaixo a partir de Samples que tem uns exemplos..

[William Bruno 1501]

Então.. é só fazer da forma que ele mostrou, eu não entendi a sua dificuldade.

 

mostre como você fez.

[Glauber Néspoli 0]

No html trouxe o jQuery e o plugin:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery-notes_js/jquery-notes_1.0.8_min.js"></script>

 

Dai em diante já não entendi mais como fazer o plugin funcionar. Testei com o seguinte:

 

Importei aquela função que tem de exemplo pro html:

 

<script type="text/javascript">
$(function() {
$('.jquery-note').jQueryNotes({
	minWidth: 50,
	minHeight: 50,
	maxWidth: '',
	maxHeight: '',
	aspectRatio: false,
	allowAdd: true,
	allowEdit: true,
	allowDelete: true,
	allowHide: true,
	allowReload: true,
	allowLink: true,
	allowAuthor: true,
	dateFormat: 'Y/D/M H:I',
	hideNotes: false,
	loadNotes: true,
	helper: '',
	maxNotes: null,
	operator: 'jquery-notes_php/notes.php'
});
});
</script>

 

..E tentei tanto colocar uma imagem normalmente, que obviamente não funcionou:

<img src="HPIM5132.JPG" alt="" width="700" height="522" />

 

Ccomo tentar criar um novo objeto note, que é o que ele mostra no início:

new note('[path]', [prefix], '[image]', '[extension]');

 

<?php new note('imgs/', 'HPIM5132', 'HPIM5132.JPG', 'jpg'); ?>

 

Como realmente utilizar ele?

[William Bruno 1501]

por partes então, olha:

$('.jquery-note')

esse é o seletor jQuery que você usou.

 

você está tentando aplicar o plugin no que esse seletor te retornar.

no caso, ele está procurando por elementos que contenham a class jquery-note. Entendeu ?

 

 

logo você precisa identificar a tua imagem com essa class, se não o plugin não vai achar ela nunca

<img src="HPIM5132.JPG" alt="" width="700" height="522" class="jquery-note" />

[Glauber Néspoli 0]

Opa, fala William! Valeu pela resposta.. Fiz do jeito que você falou, e agora aparece 'loading notes' por coisa de ~1seg abaixo da imagem, mas logo em seguida some, mas continua sem sem a barra para gerenciar os notes..