jTipster

What is jTipster? Remember the times you would like to add notes to a picture, but there were no other way to do it without firing up Photoshop. The problem with that is the content added to the picture was not easily changed, you needed some Photoshop skills and well, not SEO friendly.
So, what is it again? Well, jTipster allows you to add “markers” to a picture. For each marker added, you can add short or long captions that appear on rollover. See it working here.
So, how do you get it working. Follow the steps below to get started.

First, download the zipped file here. You will need to add a couple files to your headers.

1
2
3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.jtipster.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="spring.css" type="text/css" />

Then create the content. This is how a sample content should look like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- pictures used in this demo is courtesy of Bartek Kuzia at http://www.flickr.com/photos/bartku/ -->
<ul id="mat">
<li>
   <div class="content">
      <div class="image">
         <img src="1312960475_f6887f358f.jpg?v=0" alt="" />
      </div>
      <div class="marker" title="81,91">
         <img src="numbers/1.png" alt="1" /><span>Lamp.  Old and rustic. Lovely though.</span>
      </div>
      <div class="marker" title="432,41">
         <img src="numbers/2.png" alt="2" /><span>Hook up your clothes in the workroom.  Keep it away from all the dust.</span></div>
      </div>
 
</li>
<li>
   <div class="content">
     <div class="image">
        <img src="1239369036_b75dc43715.jpg?v=0" alt="" />
   </div>
   <div class="marker" title="100,125">
      <img src="numbers/1.png" alt="1" /><span>Cloudy skies.  Looks like it's going to rain.  The colors in the sky is beautiful.  I wish I could paint this.  Where are my paints?  Where is my easel!</span>
   </div>
</div></li>
</ul>

As you will learn later, you will get some flexibility in changing some of the HTML id or class names according to your preferences.

Now, we come to the most important part. How do you add the markers? Well, this isn’t too difficult, but you would need a program to determine the coordinates on your picture. You won’t need any fancy tools, just use the ruler tool that comes with the “Web Developer” toolbar in Firefox. Draw a square with the web developer tool, determine the x and y coordinates. Place the coordinates in the title tag of the “marker” div. X comes first, followed by the Y coordinate.

1
2
3

<div class="marker" title="79,125">
   <img src="numbers/1.png" alt="1" /><span>Chilly day</span>
</div>

The markers on the image will be represented by numbered images, so link to them just like above. jTipster comes with freebie number images courtesy of Edward Margallo. Make sure to place an alt tag with the number value on it just like above.

Next comes the comments for that particular marker. Just add the comments in between the span tag. There is no limit for the text, but the rule of thumb is less is more.

Now, add this piece of code at the end of your page. If you like, you could also add this to your ready function in your main Javascript file.

1
2
3

<script type="text/javascript">
   $('#mat').jTipster();
</script>

The id passed to jTipster is the id given to the ul. You can use any other name if you would like to. Now comes the customizations.

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
   $('#mat').jTipster({
      'width': 300,
      'popup': '.popup',
      'marker': '.marker',
      'offset': 300,
      'baseimageurl': '/numbers'
   });
</script>

width = The width of the popup.
popup = The class name of the popup. If you change this from the default name, make sure to update the CSS file.
marker = The class names of the markers. Since there will be multiples, make sure this is a class name, not an id. If you change this from the default name, make sure to update the CSS file.
offset = If you have a couple floats in your layout and the div containing your jTipster is floated right, you should put the width of your left floated div into your offset. This will help the jTipster to correctly position the popups.
baseimageurl = The default location of the images is in the same directory of the script file. If you need to place it elsewhere, put the absolute path into the baseimageurl.