iPicture – create interactive pictures with extra descriptions

iPicture is a jQuery plugin that helps you create interactive pictures with extra descriptions, like tagging a photo. This plugin has a configuration wizard, you can drag and drop the tooltips over the image, for placing and setting up the plugin.

You can easily customize the plugin: you can add extra icons for the tooltip or you can choose to animate it. You can integrate the plugin with slideshows or sliders.


How to use

1. The HTML & CSS

<ul id="iPicture">
  <li id="picture1" style="background: url('images/image1.jpg')"></li>
  <li id="picture2" style="background: url('images/image2.jpg')"></li>
  <li id="picture3" style="background: url('images/image3.jpg')"></li>
  <li id="picture4" style="background: url('images/image4.jpg')"></li>

* the images must be defined as background, with given width, height and position:

#picture1, #picture2, #picture3, #picture4 {
  width: 900px;      //images width
  height: 528px;     //images height
  position: relative;
  margin:0 auto;

2. The JS

The minimal configuration includes:

    $( "#iPicture" ).iPicture({
      pictures: ["picture1","picture2","picture3", ...all pictures' ID],
          {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
          {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"},
          {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
          {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}],
          ... each photo and its tooltips ...}

Documentation & Download


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s