Wednesday, 4 July 2012

Photo Tagging In PHP & JQuery

1) Reference CSS and Javascript Files
2) Call the Photo Tag Plugin Onload
3) Add the Image

  1. <link media="screen" type="text/css" href="/static/photo-tag/libraries/jquery-ui-1.8.17.custom.css" rel="stylesheet">  
  2. <link media="screen" type="text/css" href="/static/photo-tag/tests/photo_tags/styles2.css" rel="stylesheet">  
  3. <script type="text/javascript" src="/static/photo-tag/libraries/jquery.dev.1.7.1.js"></script>  
  4. <script type="text/javascript" src="/static/photo-tag/libraries/jquery-ui-1.8.17.custom.min.js"></script>  
  5. <script type="text/javascript" src="/static/photo-tag/js/jquery.phototag.js"></script>  

  1. $(document).ready(function(){  
  2.     $('.photoTag').photoTag({  
  3.         requesTagstUrl: '/static/photo-tag/tests/photo_tags/photo-tags.php',  
  4.         deleteTagsUrl: '/static/photo-tag/tests/photo_tags/delete.php',  
  5.         addTagUrl: '/static/photo-tag/tests/photo_tags/add-tag.php',  
  6.         parametersForNewTag: {  
  7.             name: {  
  8.                 parameterKey: 'name',  
  9.                 isAutocomplete: true,  
  10.                 autocompleteUrl: '/static/photo-tag/tests/photo_tags/names.php',  
  11.                 label: 'Name'  
  12.             }  
  13.         }  
  14.     });  
  15. });  

  1. <img src="http://karlmendes.com/static/photo-tag/tests/photo_tags/monkeys2.jpg" class="photoTag"> data-user-id="25> data-image-id="200> data-album-id="200> 

Refer: http://karlmendes.com/2010/07/jquery-photo-tag-plugin/

No comments:

Post a Comment

Thank you so much for providing your valuable feedback. I will will look into them and update my skills & technologies accordingly.