code-Mad

Summary

Image descriptor is a wordpress plugin which provides an interface to revolutionize your wordpress installation and take your app to the next level.

This plugin is compatible with wordpress 3.5 and above.

Admin section of this plugin is built in Superheroic AngularJS and the awesome jQuery with Twitter Bootstrap.

This plugin provide ways to prepare different creative sections for your web app and in that section you can make some parts highlighted and provide description for those parts. These are hotspots. This plugin is used to describe images. This plugin can be used for different domains such as Education, Health, Engineering etc.

Demo URL

Demo URL : http://ift.tt/1ePLqFZ

Why this

It is very easy to use and has the following features :

• 100% Responsive and works in all platforms(Mobile, Tablets & Desktops).


• Optimized for Touch devices


• Social media integration


• Cross browser compatibility


• Multiple instance on the same page


• SEO friendly


• Shows tweets and youtube videos


• Strong interface built in AngularJS and jQuery


• Ease to use builder with live preview


• Connector style for popup


• Draggable popup and icon in live preview


• More than 250 Font Awesome icons


• Wave and Blink hotspot animations


• Popups in Twitter Bootstrap


• Drag and drop feature

Image descriptor wordpress plugin is very useful in creating some exclusively creative sections for your web application and its responsive behaviour provides compatibility with small screen and touch devices.

How to use?

Demo URL: http://ift.tt/1gsvo2Q

• Click on Image descriptor in the admin menu.


• Click on Add new button.


• A panel will appear with hotspot name and description.


• Fill these fields and submit the form.


• Now a screen will appear where we will have to design the awesome.


• First of all provide the height and width of the hotspot block container.


• Background image can be uploaded, image must be optimized before uploading.


• You can also provide background color.


• Check the responsive checkbox for enabling responsive behaviour.


• Select the icons from the icon list by clicking on any one of the icons.


• Selected icon will appear in right side.


• Drag and drop the icon into the container.


• Hotspot specific fields will appear down.


• Show popup on select box provide options for how the popup will appear eg in case of always option the popup apears always, for click the popup will appear on click and for mouseover the popup will appear on mouseover event.


• You can provide icon color and icon hover color.


• Desired popup position should be provided(top, right, bottom, left).


• Provide the desired popup content in the textarea.


• In case of social media, like twitter provide the screen name and youtube provide the youtube URL in the text box.


• Drag and drop the popup associated with the hotspot anywhere in the block.


• Give color to connectors


• Save


• Copy shortcode from listing page and paste in the editor of post or pages.

Future perspectives

• More awesome animations to come.


• More options for popup position with animated connectors between popup and icon.


• Resizeable rectangle as icon.

Sources & credits

• WordPress CMS form http://wordpress.org


• AngularJS form http://angularjs.org


• Demo Images form http://flicker.com


• Twitter Bootstrap from http://ift.tt/ZIMCnf


• jQuery.js from http://jquery.com/


• Icons form Font awesome http://fontawesome.io


• Minicolors from http://ift.tt/1ePLqWf

Demo images from:

• http://ift.tt/1gsvo2U


• http://ift.tt/1ktykwU


• http://ift.tt/1gsvo2Y


• http://ift.tt/1ktykwW