iPicture² - Tooltip your images

May 06, 2014 in Tooltip 5107 views

Download

Overview
Documents

User Rating: 4.8/5 ( 2 votes)

Your Rating:

iPicture² is an evolution of free iPicture jQuery Plugin. iPicture² creates interactive pictures with extra descriptions, embedded video, links or everything else using javascript and css3.

Features:

Completely renewed

It's a new plugin completely redesigned to better perform the task.

Faster with css3

iPicture uses new css3 features, no extra images for backgrounds and tooltips. jQuery UI agnostic

Highly customizable

Change your tooltips simply changing css style, choose between presets style or add your own!

Any content

Now with iPicture² you can insert videos, links or everything else in your tooltips!

Source: ipicture-square.justmybit.com

1. Download iPicture²

2. Unpack in your development directory

3. Open wizard.html page

4. Upload images, drag tooltips and copy generated code

5. Paste the code in your site pages linking ipicture.js and iPicture.css

INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" media="screen" href="YOUR_PATH/iPicture.css"/>
<script type="text/javascript" src="YOUR_PATH/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="YOUR_PATH/jquery.ipicture.js"></script>

PASTE HTML AND JAVASCRIPT CODE

<div id="iPicture" data-interaction="hover">
  <div class="ip_slide">
    <img class="ip_tooltipImg" src="images/abigimage.jpg">
    <div class="ip_tooltip ip_img32" style="top: 140px; left: 257px;" data-button="moreblack" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="ltr-slide">
      <p>
      </p>
    </div>
  </div>
</div>
<script>
  $( "#iPicture" ).iPicture();
</script>

JS Tutorial