jQuery HighSpotter

<div id="My_Paragraph_Wrapper" style="width: 100%; margin: auto auto 10px; text-align: center;">
	<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravit.</p>
	<p style="text-align: justify;">Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamt. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi.</p>
	<p style="text-align: justify;">Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamt. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi.</p>
</div>

jQuery("#My_Paragraph_Wrapper").click(function(e){
jQuery("#My_Paragraph_Wrapper").highspotter ({
 
	spotElements: "p", //We want to spot only p elements inside the My_Paragraph_Wrapper
 
	clickEvent:e,
	scrollPageTo:'clever',
 
	useMouseWheel:true,
 
	rememberLastPosition:false,
 
	animation:true,
 
	easing:"easeInOutBack",
 
	useKeyboard:true,
 
	closePanel_data: "", //We want to display custom text in the close highspotter panel
	closePanel_class: "closePanelClassOle",
	closePanel_xPosition:'outelemleft',
	closePanel_yPosition:'middle_inside',
	closePanel_closeMethod:'fadeOut',
	closePanel_offset:[-5,0],
	closePanel_opacity:0.8,
 
	navPanels_scrollTop:false,
	navPanels_enable:true,
	navPanels_data:['',''],
	navPanels_yPosition:['middle_inside','middle_inside'],
	navPanels_offset:[-5,-22,-5,20],
	navPanels_xPosition:['outelemleft','outelemleft'], //Same positions with close panel
	navPanels_class:['navigationPanelprevious','navigationPanelnext'],
	navPanels_showEffect:['',''],
	navPanels_closeMethod:['scrollUpFading','scrollDownFading'], //<= fadeOut || scrollUp || scrollBottom || scrollUpFading || scrollBottomFading
 
	infoPanels_enable:true,
	infoPanels_topData:['Hi, Welcome to my Programming Blog<br/><br/>As you can see I have spotted first paragraph!!!<br/><br/>Please highSpot next paragraph by:<br/><br/>Clicking on the little down arrow on the left of the paragraph','Wow!!! nice sliding effect.., cool!!!','The next paragraph talks about Lorem.<br /> Author is: <strong style="color:gold;font-size:20px;">LOREM</strong>.<br /> lol '],
	infoPanels_dataIfNotDefined:['','<div style="float:left;">If you like this, please prove it: </div><div style="float:left;margin-left:10px"><iframe src="http://www.facebook.com/plugins/like.php?app_id=135312789861036&amp;href=www.jbaron.gr%2Fprogramming&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe></div>'],
	infoPanels_xPosition:["elemcenter","elemright"], //Place Top Panel Text in the center of the p tag
	infoPanels_yPosition:['top','bottom'],
	infoPanels_navigationEffect:['slide','slide'],
	infoPanels_width:[425,null],
	infoPanels_class:['topData_demo1','bottomData_demo1'],
	infoPanels_offset:[0,0,0,-2],
	infoPanels_opacity:[1,1],
	infoPanels_includeMargin:true,
	infoPanels_closeMethod:['scrollDowncxv',''],
 
	extraPanel_enable:true,
	extraPanel_opacity:0.8,
	extraPanel_xPosition:'elemleft', //Same positions with close panel
	extraPanel_yPosition:'bottom', //Same positions with close panel
	extraPanel_offset:[-150,10],
	extraPanel_data:['Hello',null,'I am an Extra Panel'],
	extraPanel_navigationEffect:'slide',
	extraPanel_dataIfNotDefined:'<div style="float:right;" class="closeEP">X</div>You can also use the <strong>DOWN</strong> or <strong>UP</strong> Keyboard arrow to navigate through elemtents.<br /> You can even click on the top or botton black panels.<br /> You can even use your <b style="color:green;">mouse wheel</b>!!!.',
	extraPanel_width:400,
	extraPanel_class:'extraPanel_demo1',
 
	extraPanel_showOn:2
 
});
 
 
});
 
jQuery("div.closeEP").live('click',function(e){
 
jQuery("#My_Paragraph_Wrapper").highspotter ({extraPanel_close:true,extraPanel_enable:true});
 
});

<table id="myTable" cellpadding="10" style="margin: auto; text-align: justify;" border="1" width="50%">
	<thead>
		<tr class="doNotSpotThisElement">
			<th align="center">LOREM HEADER</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="text-align: justify;" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravit.</td>
		</tr>
		<tr class="doNotSpotThisElement">
			<td style="text-align: justify;">Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
		</tr>
		<tr>
			<td style="text-align: justify;">Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamd</td>
		</tr>
	</tbody>
</table>

jQuery("#myTable").click(function(e){
 
jQuery("#myTable").highspotter ({
 
	spotElements:"tr", //for spotting table rows
	circular:false,
	useMouseWheel:true,
 
	scrollPageOnMouseWheel:true,
 
	closePanel_data:"Close Table Spotting",
	closePanel_xPosition:"outelemleft",
	closePanel_yPosition:"top_inside",
	closePanel_closeMethod:'scrollUp',
	closePanel_offset:[-20,2],
	closePanel_fade:true,
	closePanel_opacity:0.8,
 
	infoPanels_enable:true,
	infoPanels_topData:["The next table row has a class with name: <span style='color:yellow'>doNotSpotThisElement</span>.<br /><br />Such as the table header. This tells higspotter not to spot them.","I have set the option <span style='color:orange;font-size:22px;'>circular</span> to false.<br />This means that you cannot spot the first element by clicking on bottom panel."],
	infoPanels_bottomData:["","Scroll you mouse wheel to see what happens"],
	infoPanels_xPosition:['elemcenter','elemcenter'],
	infoPanels_width:[null,800],
	infoPanels_class:['topData_demo7','topData_demo7'],
	infoPanels_offset:[0,50,0,50]
});
 
});

<img id="myImage" style="cursor: pointer;" src="http://www.xesemesa.gr/wp-content/themes/project_arxwn/images/people.png" alt="xesemesa" />

jQuery("#myImage").click(function(e){
 
jQuery('#myImage').highspotter ({
 
        spotElements:'',
 
	closePanel_xPosition:"outelemleft",
	closePanel_yPosition:"top_inside",
	closePanel_offset:[-225,55],
	closePanel_opacity:0.8,
	closePanel_data:'close me',
 
	infoPanels_enable:true,
	infoPanels_class:['topData_demo5',''],
	infoPanels_xPosition:['outelemleft','elemcenter'], 
	infoPanels_offset:[50,-80,0,10],
	infoPanels_opacity:[1,0.8],
 
	infoPanels_dataIfNotDefined:['','<div style="float:left;">Please, Consider Making A Donation</div><div style="width:74px; height:21px; float: right; cursor: pointer; color: navy; text-align: center;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="L9Q8LBJG5HHQE" /> <input alt="PayPal!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" /></form></div>'],
	infoPanels_width:[null,320],
 
	extraPanel_offset:[-155,30],
	extraPanel_enable:true,
	extraPanel_dataIfNotDefined:'HighSpotter is awesome!!!<br /> Dont you think?',
	extraPanel_class:'extraPanel_demo5',
	extraPanel_xPosition:'outelemleft',
	extraPanel_navigationEffect:'slide',
 
	extraPanel_yPosition:'top',
	extraPanel_closeMethod:'fadeOut'
 
});
 
});