WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
WordPress / Media

Image Notes for WordPress

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


Image Notes for WordPress - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Image Notes for Wordpress is a plugin to add notes on images. It is similar to tagging in Facebook or Flickr. Use this plugin to tag your friends in your post, Label important areas of an image, add explanations over a chart, List out recipie ingredients in an image

Features

  1. Select an area on any image and add notes
  2. Images Notes appear when user hovers mouse over image
  3. Generate a list of tags or notes below the image as seen on FB
  4. Will work with any post type or even on pages
  5. Easy options to edit or delete notes
  6. Option to show or hide taglist
  7. Different View for desktop and mobile devices
  8. The postion and size of the notes is Responsive and will adjust according to image size
  9. Setting to allow html tags in notes (html formatting supported)
  10. Setting to show or hide notes on tablet and mobile devices
  11. Setting to apply default themes or create a custom theme for image notes
  12. Instant preview of the selected or created theme before saving
  13. Well supported with free updates

Installation

Once you have downloaded the zip file from Code Canyon extract the contents to a folder of your choice. Chances are if you are reading this you have already done that. Find the file called ImgNotes.zip. This is the plugin file. You can upload this file from your Wordpress Admin

  1. Go to Plugins > Add New
  2. Select Upload
  3. Upload the ImgNotes.zip file
  4. Activate the plugin
  5. Go to Settings > Wordpress Image Notes
  6. Set the options as per your liking

Alternatively you can manually install the plugin by following the instructions given here.

Usage

Adding a new note
  • Images notes are added from the user side. That is the pages which users see and NOT from admin dashboard.
  • Once you are done with editing and publishing your post. Go to view post page
  • Hover the mouse the image you want to add notes on, Add Note icon will appear at the top left corner of image
  • Click on Add Note icon on the top left corner of image, it will add a default area with a textarea, adjust it accordingly and add desired note.
  • Alternatively just click and drag over the image, it will create an area of minimum 50*50 px dimension adjust area as per requirement and add note
Editing/Deleting a note
  • Click on Note area to be edited/deleted, edit delete icon will appear on the top left corner of the selected area.
  • Click on edit icon, edit mode will enable. Adjust the area or change the note and save
  • Click on delete icon to delete a note
Toggling tags
  • Click on Toggle note tags icon (next to Add Note icon) to toggle tags.
  • Tags toggled off will not be shown in the user side.
Adding custom CSS
  • Go to Settings > Image Notes
  • Choose option custom in section Choose a Theme, two new sections will appear
  • Click on checkbox I want to add my custom css in section I know what i am doing and add custom css in the text area. Do not wrap css with <script> tag as it will be automatically appended
  • Use classes defined for styling (.imgnotes-note,.inner-div,.imgnotes-notep)
  • Check preview before saving. If anything goes wrong cross check css. Make sure checkbox is checked

Important Note – top

  • Plugin removes relative positioning of body. This may cause alignment issue in some themes, so please check your theme in our demo site before buying if you have a doubt
  • Only administrator can create or modify Notes. All other users can view notes
  • Notes creation and modification is available for Desktops only. Tablets and mobile devices can only view notes

Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
26 June 13

Last Update:
26 June 13

High Resolution:
No

Compatible Browsers:
IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
HTML, CSS, PHP

Software Version:
WordPress 3.5, WordPress 3.4, WordPress 3.3

Keywords

eCommerce, eCommerce, All Items, hover notes, image notes, image tags, notes, tags