Submit your widget

Professional Images & title & button slideshow with jquery plugin

Created 9 years ago   Views 26567   downloads 4352    Author n/a
Professional Images & title & button slideshow with jquery plugin
View DemoDownload 91.0 KB
165
Share |

Usage

Add js and css files

<link href="css/slideshow_buttontitle.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/slideshow_buttontitle.js"></script>

Add html code

        <div id="slideshow" class="slideshow_buttontitle">
<ul>
<li><a href="#" title="title1"><img src="images/slideshow_large_1.jpg" alt="slideshow_large"/></a></li>
<li><a href="#" title="title2"><img src="images/slideshow_large_2.jpg" alt="slideshow_large"/></a></li>
<li><a href="#" title="title3"><img src="images/slideshow_large_3.jpg" alt="slideshow_large"/></a></li>
<li><a href="#" title="title4"><img src="images/slideshow_large_4.jpg" alt="slideshow_large"/></a></li>
</ul>
<div class="slideshow_simple1_title">
title
</div>
<ul class="slideshow_simple1_nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>

Add start script

        <script language="javascript" type="text/javascript">
$(function() {
$("#slideshow").slideshow_buttontitle({
time_interval: '3000',
window_background_color: "#FFF",
window_padding: '1',
window_width: '300',
window_height: '250',
border_size: '1',
border_color: 'black',
title_text_color: 'white',
title_background_color: '#42AEC2',
button_color: '#84C5D2',
button_current_color: '#2C7E8F',
button_size: '15'
});
</script>