Super Tiny jQuery Slideshow Plugin - omHDP

File Size: 194KB
Views Total: 577
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Super Tiny jQuery Slideshow Plugin - omHDP

omHDP is a super simple but useful jQuery plugin that make it easier to create a slideshow with animation effects and optional auto-play functionality. It can help you to quickly create a clean slideshow for showcasing your featured content with a bit codes.

Features:

  • Super simple
  • Easy to implement
  • 3 Animations: fade in/out, slide up/down, slide left/right
  • Auto play supported
  • Image title overlay supported

How to use it:

1. Include jQuery library and omHDP plugin on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="omHDP.js" language="javascript"></script>

2. The html

<div class="hdp_container">
<a title="Title 1" href="#"><img src="1.jpg"></a> 
<a title="Title 2" href="#"><img src="2.jpg"></a> 
<a title="Title 3" href="#"><img src="3.jpg"></a> 
<a title="Title 4" href="#"><img src="4.jpg"></a> 
</div>

3. Style your slidshow

.hdp_container {
width: 400px;
height: 300px;
margin: 0px auto;
position: relative;
font-size: 12px;
overflow: hidden;
border:1px solid #000;
}

4. Call the plugin with options

<script>
$(function(){
$(".hdp_container").OM_HDP({
delay:300, // duration of animation (ms)
time:5000, // ms
title:1, // display image title, 0=false, 1=true
type:1 // type of animations, 0=fade in/out, 1=slide left/right, 2=slide up/down
});
})
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.