Is space really the final frontier?
Space time came into existence after the big bang!
The Earth looks half dark because the Sun is not shining on all of it.
The lowest temprature on the surface of the Moon is -233°C
Avoid the navigation.
To the left
bold italic underline
Do you like oranges?
Africa
Europe
Russia
USA
11 ghgfdfg ghgfhdfg1
11gh ghdgf ghg hdgdf1
uyjg jhgjh gjhfgjhfg hjfgjhfgj gjhgjhg jhgjhgj gjhgjh jhg
11dg ghg f ghdgdf1
11df ghfgh ghg hgdfg1
11dgf ghh gh hgfhgfh dgdf1
11dg hgfdgdf1
11dfg hg dfg1
11dg fghgfh fdgdf1
11d ghgf hgfdgdf1
11dg fhgh fdgdf1
11dfgh ghg dfg1
11 gh ghh dgfdgdf1
1 fghg 1dgfdgdf1
11dg gfhghfdgdf1
11dgf ghgdgdf1
ghgh ghh fggh
ghgh gh hghghghg gh
ghgh gh ghghgh gh g
fghg gfh gh gh
ghg ghg ghh gh gh g
fhfgh fgh gh gh
hghg h gh gh gfh hgh gh
ghjgh ghj dfgdfg dfg
ghjghjh ghjh gjghj hgj
jkjhkjhkjhk ghjgh jghjgh ghj
The images can be covered with hover over information points.
lklk dfgdf g jljk
jkljkl dg dfgfkjl
klkjlkjlkj
lkjkljkld fgfkjlkj jkl jkljk
Move the mouse over the images to see the InfoPoints; they will disappear when the mouse stops for a short
time. Place the mouse over any box to see the associated caption. Click on the info icon at the top left
hand corner to toggle the alt tag text of the image.
How to use
JavaScript & CSS
Firstly you must include the following jQuery and CSS code in the head element.
<link rel="stylesheet" type="text/css" href="css/ipstyle.min.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ipstyle_ie.min.css"/>
<![endif]-->
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.18.custom.min.js" ></script>
<script type="text/javascript" src="scripts/jquery.ipslider-1.0.min.js" ></script>
The jQuery UI custom code includes the slide effect and the effects core.
HTML
The slider is created using a div tag and it's class is
ipslider. The
height and
width is provided using
CSS. All images are placed within this div tag. The
alt attribute will hold the info icon text in the top left hand
corner of the slider. The InfoPoint captions are created by placing div tags uder the respective images. The location
of each caption is specified using the
top and
left attributes in CSS. There is no limit on the number of captions
that each image can have but care must be taken that the coordinates do not place them out of the image area.
<div class="ipslider" style="height:480px; width: 800px;">
<img src="images/a.jpg" alt="this is an image"/>
<div style="top: 410px; left: 500px;">text for caption</div>
<div style="top: 240px; left: 770px;">text for caption</div>
<img src="images/b.jpg" alt="another image"/>
<div style="top: 370px; left: 400px;">text for caption</div>
<div style="top: 140px; left: 570px;">text for caption</div>
</div>
Running the plugin
The following JavaScript code is used to start the plugin. Multiple InfoPoint sliders can be executed on each page.
$(document).ready(function(){
$('.ipslider').caption_slider();
});
Extra support can be given to those who contact me via the CodeCanyon website.
Created by
A. H. Rahim