You can download complete code for slide show that is very simple to use in your website or webpage. It is easy to use.
You can set the time interval between two images, width and height of slide show, border size, border color for this slide show. If you does not want to show numbers on this slide show then you can exclude number on slide show means you can customize this image slide show as your requirement. you can see the screen shot of the sample slide show.
[wpfilebase tag=file id=6]
How to use image slide show
download all code from above, you can see these files and folder:
You can see all neccessary files in these folder.
you can place the code of demo.html on your webpage and include css, images and javascript files.
Code
<html >
<head>
<title>Slideshow</title>
<link href="css/webwidget_slideshow_simple.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/webwidget_slideshow_simple.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(function() {
$(".webwidget_slideshow_simple").webwidget_slideshow_simple({
slideshow_autoplay: 'enable',//enable disable
slideshow_time_interval: '3000',
slideshow_window_background_color: "#ccc",
slideshow_window_padding: '1',
slideshow_window_width: '300',
slideshow_window_height: '200',
slideshow_border_size: '1',
slideshow_border_color: 'black',
slideshow_show_button: 'enable',//enable disable
slideshow_button_text_color: '#666',
slideshow_button_text_size: '12',
slideshow_button_background_color: '#f4f4f4',
slideshow_button_current_background_color: '#CCC',
slideshow_button_border_color: '#CCC',
slideshow_button_border_size: '1',
directory: 'images'
});
});
</script>
<div class="webwidget_slideshow_simple">
<ul>
<li><a href="link1"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link2"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link3"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
</ul>
<ul class="webwidget_slideshow_simple_nav">
<li><a href="link1">1</a></li>
<li><a href="link2">2</a></li>
<li><a href="link3">3</a></li>
<li><a href="link4">4</a></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
</html>How to customize this slide show
You can change appearance of this slideshow through these lines of codes:
slideshow_autoplay: ‘enable’,//enable disable
slideshow_time_interval: ‘3000’,
slideshow_window_background_color: “#ccc”,
slideshow_window_padding: ‘1’,
slideshow_window_width: ‘300’,
slideshow_window_height: ‘200’,
slideshow_border_size: ‘1’,
slideshow_border_color: ‘black’,
slideshow_show_button: ‘enable’,//enable disable
slideshow_button_text_color: ‘#666′,
slideshow_button_text_size: ’12’,
slideshow_button_background_color: ‘#f4f4f4’,
slideshow_button_current_background_color: ‘#CCC’,
slideshow_button_border_color: ‘#CCC’,
slideshow_button_border_size: ‘1’,
Good one..
Awasome…