Submit your widget

desSlideshow - Stylish featured image slideshow jQuery plugin

Created 3 years ago   Views 74570   downloads 14141    Author htmldrive
desSlideshow - Stylish featured image slideshow jQuery plugin
View DemoDownload 594.3 KB
321
Share |

Usage

Include js files.

 

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="js/desSlideshow.js"></script>

 

 

Add html.

 

 

<div id="desSlideshow" class="desSlideshow">
 <div class="switchBigPic">
  <div>
                    <a title="" href="#"><img class="pic" src="./images/006.jpg" /></a>
                    <p><strong>Description Title1</strong><br/>
                        Description Content1
                    </p>
      </div>
  <div><a title="" href="#"><img class="pic" src="./images/004.jpg" /></a>
      </div>
  <div><a title="" href="#"><img class="pic" src="./images/001.jpg" /></a>
                    <p><strong>Description Title3</strong><br/>
                        Description Content3
                    </p>
      </div>
  <div><a title="" href="#"><img class="pic" src="./images/003.jpg" /></a>
                    <p><strong>Description Title4</strong><br/>
                        Description Content4
                    </p>
      </div>
  </div>
 <ul class="nav">
  <li><a href="#">Slideshow1</a></li>
    <li><a href="#">Slideshow2</a></li>
    <li><a href="#">Slideshow3</a></li>
    <li><a href="#">Slideshow4</a></li>
 </ul>
</div>

 

 

Add startup script.

 

<script language="javascript" type="text/javascript">
    $(function() {
        $("#desSlideshow").desSlideshow({
            autoplay: 'enable',//option:enable,disable
            slideshow_width: '800',//slideshow window width
            slideshow_height: '249',//slideshow window height
            thumbnail_width: '200',//thumbnail width
            time_Interval: '4000',//Milliseconds
            directory: 'images/'// flash-on.gif and flashtext-bg.jpg and loading.gif directory
        });
    });
</script>