To make carousel work uCarausel.js file is used
Add the following code to your html page and in the "src" image attribute define path to the image files.
To add more images to the carousel duplicate the following code: <li><img src="YourImage.jpg" alt=""></li>, don't forget to define path to images in the "src" attribute.
<div class="car-wrapper"> <div class="carousel"> <ul> <li><img src="YourImage.jpg" alt=""></li> <!-- Your Image --> ... </ul> </div> <a href="#" class="btn prev" data-type="prevPage"><span></span></a> <!-- Previous Page Button --> <a href="#" class="btn next" data-type="nextPage"><span></span></a> <!-- Next Page Button --> </div>
To make accordion work jquery-ui-1.8.17.custom.min.js file is issued
To add according to the page use the following code:
<dl id="accordion"> <dt><a href=""><span></span> Heading </a></dt> <dd> Content </dd> .... </dl>
Here you will simply need to add slide-down-box class to any dl-list (<dl class="slide-down-box">).
<dl class="slide-down-box"> <dt> Heading </dt> <dd> Content </dd> </dl>
Add slide-down-box and absol classes to any dl-list (<dl class="slide-down-box absol">).
<dl class="slide-down-box absol"> <dt> Heading </dt> <dd> Content </dd> </dl>
To make the tabs work jquery.tools.min.js file is used
Using the following code you can create a tabs with the menu in the top left corner:
<div class="tabs-horz-top"> <ul class="tabs-nav"> <li><a href="">Tab 1</a></li> <li><a href="">Tab 2</a></li> <li><a href="">Tab 3</a></li> </ul> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> </div>
Using the following code you can create a tabs with the menu in the top right corner:
<div class="tabs-horz-top2"> <ul class="tabs-nav"> <li><a href="">Tab 1</a></li> <li><a href="">Tab 2</a></li> <li><a href="">Tab 3</a></li> </ul> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> </div>
To make the tabs work jquery.tools.min.js file is used
Using the following code you can create a tabs with the menu in the bottom left corner:
<div class="tabs-horz-bottom"> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <ul class="tabs-nav"> <li><a href="">Tab 1</a></li> <li><a href="">Tab 2</a></li> <li><a href="">Tab 3</a></li> </ul> </div>
Using the following code you can create a tabs with the menu in the bottom right corner:
<div class="tabs-horz-bottom2"> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <ul class="tabs-nav"> <li><a href="">Tab 1</a></li> <li><a href="">Tab 2</a></li> <li><a href="">Tab 3</a></li> </ul> </div>
To make the tabs work jquery.tools.min.js file is used
Using the following code you can create a tabs with the left menu:
<div class="tabs-vert-left"> <ul class="tabs-nav"> <li><a href="">Tab 1</a></li> <li><a href="">Tab 2</a></li> <li><a href="">Tab 3</a></li> </ul> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> </div>
Using the following code you can create a tabs with the right menu:
<div class="tabs-vert-right"> <ul class="tabs-nav"> <li><a href="">Tab 1</a></li> <li><a href="">Tab 2</a></li> <li><a href="">Tab 3</a></li> </ul> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> <div class="tab-content"> Tab content </div> </div>
class="normaltip" title="Text"
Fixed Tooltipclass="fixedtip" title="Text"
On Click Tooltipclass="clicktip" title="Text"
“Lorem ipsum dolor amet consectetu adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris...”
“Cras ultricies, quam ac lobortis porta, ante sapien mollis dui. Etiam vel enim lorem. Etiam vel enim lorem. Nunc lorem sapien....”
“Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui...”
This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
<button id="opener" class="exampletip">Open Dialog</button>
<div id="dialog" title="Heading"> Content of Dialog </div>
$.fx.speeds._default = 1000;
$(function() {
$( "#NEWdialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade"
});
$( "#NEWopener" ).click(function() {
$( "#NEWdialog" ).dialog( "open" );
return false;
});
});
This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
<button id="opener2" class="exampletip">Open Dialog</button>
<div id="dialog2" title="Heading"> Content of Dialog </div>
$.fx.speeds._default = 1000;
$(function() {
$( "#NEWdialog2" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal:true
});
$( "#NEWopener2" ).click(function() {
$( "#NEWdialog2" ).dialog( "open" );
return false;
});
});
To make Testimonials SlideShow work jquery.cycle.all.min.js file is used
The Testimonials SlideShow HTML structure:
<div id="testimonials"> <div> Slide Box Content </div> <div> Slide Box Content </div> .... </div> <div class="testim_buttons"> <a href="#" id="prev_testim"><span></span></a> <a href="#" id="next_testim"><span></span></a> </div>
Into the <div>Slide Box Content</div> you can add any content either text or images. The amount of such content divs is unlimited.
In the <div class="testim_buttons"> block you can see buttons that are used to navigate slides.