2011-11-01 3 views
1

Pourquoi ce plugin jquery de watermarking d'image ne fonctionne-t-il pas? J'utilise le code du site officiel du plugin .. from here Quand je vois le code source du site de démonstration, ils ont utilisé js/jquery-watermarker-0.3.js. mais je ne peux pas trouver ce plugin en ligne n'importe où? comment cela fonctionne pour eux dans la démo. S'il vous plaît aider.Pourquoi ce plugin de filigrane ne fonctionne-t-il pas?

<html> 
<head> 
<script type="text/javascript" src="js/jquery.js"> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"> 
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
    <script type="text/javascript" src="js/jquery-watermarker-0.2.js"> 


    <script type="text/javascript"> 

     $().ready(function(){ 
      $('#watermarked').Watermarker({ 
       watermark_img:  "a.png", 
       onChange:   showCoords 
      }); 
     }); 
     function showCoords(c) 
     { 
      $('#x').val(c.x); 
      $('#y').val(c.y); 
      $('#w').val(c.w); 
      $('#h').val(c.h); 
     }; 

    </script> 
    <style type="text/css"> 
     div.watermark 
     { 
      border:1px dashed #000; 
     } 
     img.watermark:hover{ 
      cursor:move; 
     } 
    </style> 
</head> 
<body> 
    <img src="1.jpg" id="watermarked" /> 

    <form method="post" action="phpScriptToMergeBothImage.php"> 
     <input type="text" id="x" name="x" value="" /> 
     <input type="text" id="y" name="y" value="" /> 
     <input type="text" id="w" name="w" value="" /> 
     <input type="text" id="h" name="h" value="" /> 

     <input type="submit" name="save" value="Ok >" /> 
    </form> 
</body> 
</html> 

Répondre

2

Assurez-vous que vous avez téléchargé le plug-in à partir du site (here) et inclus les scripts dans votre fichier. Dans le code que vous avez fourni ci-dessus, il semble que vous devriez avoir un dossier appelé 'js' qui contient 'jquery.js', 'jquery-1.4.2.min.js', 'jquery-ui-1.8.6.custom. min.js 'et' jquery-watermarker-0.2.js '. Si cela est vrai, le plug-in est chargé. Ensuite, assurez-vous que vous avez également les images '1.jpg' et 'a.png' dans votre dossier racine, où '1.jpg' est l'image de fond et 'a.png' est l'image que vous Je veux que le filigrane soit. S'ils n'ont pas ces noms, changez les noms dans le code du plug-in pour correspondre au nom des images avec lesquelles vous travaillez.

+0

J'ai fait tout cela et j'ai corrigé l'erreur signalée par @Dennis. encore il est juste l'affichage du 1.jpg et les 4 zones de texte – Srikanth

1

Votre première ligne doit être soit $(function) ou $(document).ready(function):

$(document).ready(function(){ 
    $('#watermarked').Watermarker({ 
     watermark_img:  "a.png", 
     onChange:   showCoords 
    }); 
}); 

$() Utilisé pour retourner une collection jQuery contenant document en 1.3.x, mais cela a été changé en 1.4 pour retourner une collection vide.

En outre, vos balises de script doivent être fermés </script>

+0

j'ai utilisé le code mentionné ci-dessus, fermé toutes les balises de script et également inclus le fichier css dont je dint précédemment ... je ne reçois pas la sortie necesarry. tout ce que je reçois est le 1.jpg et les 4 zones de texte – Srikanth

+0

J'ai copié et collé votre code dans un JSFiddle en le modifiant uniquement pour mettre des images d'espace réservé - http://jsfiddle.net/Xdj7F/. Avez-vous des erreurs dans votre console? – Dennis

+0

J'ai copié le plugin 0.3 de la src depuis le site web du plugin ... même alors je reçois les 2 erreurs suivantes dans la console .. TypeErreur: Objet # n'a pas de méthode 'redimensionnable' js/jquery-watermarker-0.3.js : 92 GET http://mhbsocial.com/crossdomain.xml 404 (Non trouvé) – Srikanth

0

Un joli plugin watermark here.

simplement appeler à l'aide les éléments suivants:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#textbox1").WaterMark({ 
      waterMarkText: "Watermark text" 
     }); 
    }); 
</script> 

<input type="text" id="textbox1" name="textbox1" /> 

Il y a aussi un exemple pour une utilisation avec textareas là aussi.

+0

le lien est cassé –

Questions connexes