jQuery Background Loader Slideshow: Display a responsive image slideshow

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 213 All time: 233 This week: 5Up
Version License JavaScript version Categories
background-slideshow 1.0.0GNU General Publi...1.0AJAX, jQuery, Graphics
Description 

Author

John Diaz

This jQuery plugin can display a responsive image slideshow.

It takes a list of images to be loaded from a given base URL and displays them inside a given page element.

The images are displayed one after another with a given time delay.

The size of the images is adjusted to the size of the container element.

The images are preloaded in the background if they are not already cached by the browser.

Picture of John Diaz
  Performance   Level  
Name: John Diaz <contact>
Classes: 3 packages by
Country: Colombia Colombia
Age: 42
All time rank: 551 in Colombia Colombia
Week rank: 6 Up1 in Colombia Colombia Equal

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 1x

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example background SlideShow</title>
<script src="javascript/jquery-1.9.1.js"></script>
<script src="javascript/jquery-ui-1.10.3.custom.min.js"></script>
<script src="javascript/lazyLoad.slideShow.1.0.0.js"></script>
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div>
<div id="example-container" style="margin:10px auto; width:600px; background:#333; height:270px;">
</div>
<script type="text/javascript">// <![CDATA[
    $(function($) {
        $("#example-container").slideShow({
            imagePath: "images/",
            useAsBackground: false,
            images: ["1.jpg","2.jpg"]
        });
    });
// ]]>
</script>
</div>
</body>
</html>

  Files folder image Files (39)  
File Role Description
Files folder imagecss (2 files, 1 directory)
Files folder imageimages (2 files)
Files folder imagejavascript (3 files)
Plain text file lazyLoad.slideShow.1.0.0.js Class Main plugin file
Accessible without login Plain text file style.css Data Styles for the slideshow
Accessible without login Plain text file example.html Example Example file

  Files folder image Files (39)  /  css  
File Role Description
Files folder imageimages (29 files)
  Accessible without login Plain text file jquery-ui.min.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files (39)  /  css  /  images  
File Role Description
  Accessible without login Image file ui-bg_diagonals-me...20_d34d17_40x40.png Icon Icon image
  Accessible without login Image file ui-bg_flat_0_aaaaaa_40x100.png Icon Icon image
  Accessible without login Image file ui-bg_flat_30_cccccc_40x100.png Icon Icon image
  Accessible without login Image file ui-bg_flat_35_f1f1f1_40x100.png Icon Icon image
  Accessible without login Image file ui-bg_flat_50_5c5c5c_40x100.png Icon Icon image
  Accessible without login Image file ui-bg_glass_10_FFC835_1x400.png Icon Icon image
  Accessible without login Image file ui-bg_glass_25_474a45_1x400.png Icon Icon image
  Accessible without login Image file ui-bg_glass_25_feeced_1x400.png Icon Icon image
  Accessible without login Image file ui-bg_glass_55_fbf9ee_1x400.png Icon Icon image
  Accessible without login Image file ui-bg_glass_65_ffffff_1x400.png Icon Icon image
  Accessible without login Image file ui-bg_gloss-wave_20_fbcd46_500x100.png Icon Icon image
  Accessible without login Image file ui-bg_gloss-wave_25_060504_500x100.png Icon Icon image
  Accessible without login Image file ui-bg_gloss-wave_70_ffdd57_500x100.png Icon Icon image
  Accessible without login Image file ui-bg_gloss-wave_90_fff9e5_500x100.png Icon Icon image
  Accessible without login Image file ui-bg_highlight-so...00_feeebd_1x100.png Icon Icon image
  Accessible without login Image file ui-bg_highlight-soft_35_100e0e_1x100.png Icon Icon image
  Accessible without login Image file ui-bg_inset-soft_30_ffffff_1x100.png Icon Icon image
  Accessible without login Image file ui-icons_0c0303_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_222222_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_2e83ff_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_3d3d3d_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_454545_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_bd7b00_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_cd0a0a_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_d19405_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_eb990f_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_ed9f26_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_fadc7a_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_ffe180_256x240.png Icon Icon image

  Files folder image Files (39)  /  images  
File Role Description
  Accessible without login Image file 1.jpg Data Auxiliary data
  Accessible without login Image file 2.jpg Data Auxiliary data

  Files folder image Files (39)  /  javascript  
File Role Description
  Accessible without login Plain text file jquery-1.9.1.js Aux. Auxiliary script
  Accessible without login Plain text file jquery-ui-1.10.3.custom.min.js Aux. Auxiliary script
  Plain text file lazyLoad.slideShow.1.0.0.js Class Class source

Downloadbackground-slideshow-2021-11-28.zip 663KB
Downloadbackground-slideshow-2021-11-28.tar.gz
 Version Control Unique User Downloads Download Rankings  
 94%
Total:213
This week:0
All time:233
This week:5Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.