jSlide Inline is a lightweight but versatile image slideshow that displays slideshows on your web page. jSlide Inline is easy to install and completely customizable.
You may also be interested in the original version.
Demo
Download
Upload this Javascript file to your server:
Click the above file to copy the text directly, or right-click and choose "Save Link As..."
Install
Step 1 - Include jQuery
jSlide Inline requires jQuery to run. If you don't already have jQuery on your page, include the following line in the <head> tag:
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
jSlide Inline has been tested to work with jQuery 1.9.0.
Step 2 - Include jSlide Inline
Include the following line in the <head> tag of your page, after jQuery has been included:
<script type="application/javascript" src="/jslide.js"></script>
Modify the src attribute so that it points to the file you downloaded above.
Step 3 - Setup slideshow
Create a <div> with a unique id for the slideshow:
<div id="slider_id"></div>
After the div, open a <script> tag and call jslide('slider_id').setup(); where 'slider_id' is the unique id of the div above.
Optionally, inside the parenthesis of setup(), insert a JavaScript object containing your settings preferences. See example below:
<script type="text/javascript">
jslide('slider_1').setup({
width: 800,
height: 200,
scale: 'fit',
speed: 1200,
autoplay: true,
images: [
['images/01.jpg','caption 1'],
['images/02.jpg','the second caption'],
'images/03.jpg',
['images/04.jpg','last caption']
],
controls:{
rounded: 10,
height: 200,
opacity:0.8
},
captions: {
background:'blue',
position: 'top',
width: '500',
rounded: 10,
align: 'right'
}
});
</script>
Settings
The following settings should be inserted into a JavaScript object and used when calling setup() (see Install above). Any combination of settings can be used—the default for a particular setting will be used if that setting is not specified.
| Field | Description | Values | Examples | Default |
|---|---|---|---|---|
| images | an array of images to use in the slideshow. Each element should be either a path to an image or an array in the form of [path, caption] | |||
| width | width of the slideshow container | integer pixel value percent | 800 "800px" "50%" | "100%" |
| height | height of the slideshow container | integer pixel value | 400 "400px" | change height dynamically with images |
| scale | how smaller images are handled. | "fill" enlarge each image to completely fill the slideshow container, even if some of it is cut off "fit" enlarge smaller images so that they touch the slideshow container on two sides "none" do not enlarge any images. (Images will always be shrunk if they are larger than the slideshow container) | "none" | |
| background | background color of the slideshow container | css color value "none" | "black" "#000000" "none" | "none" |
| click | defines the click areas that control slideshow movement | false clicking on the image will be disabled integer or pixel value the boundary between left and right will be placed this many pixels from the left percent the boundary between left and right will be placed this far across the container from left to right | false 200 or "200px" "50%" | 150 or 25%, whichever is smaller |
| speed | the number of milliseconds spent on each image during playback | integer | 5000 | 5000 |
| transition | the number of milliseconds taken by transitions | integer | 400 | 400 |
| fade | enable fading between images | true or false | true | |
| slide | enable sliding between images | true | ||
| autoplay | the slideshow will start automatically on pageload | true or false | false | |
| loop | enable looping from the last image to the first image | true or false | true |
Controls
The following settings should be within the controls object in the main settings object.
| Field | Description | Values | Examples | Default |
|---|---|---|---|---|
| disabled | disable left/right controls for the whole slideshow | true or false | false | |
| height | height of each control button | integer pixel value | 100 "100px" | 100 |
| width | width of each control button | integer pixel value | 46 "46px" | 46 |
| background | background color of the control buttons | css color value | "black" "#000000" | "black" |
| opacity | opacity of the control buttons | decimal value between 0 and 1 | 0 1 0.5 | 0.5 |
| rounded | amount to round corners of control buttons | integer pixel value | 5 "5px" | 0 (corners not rounded) |
Captions
The following settings should be within the captions object in the main settings object.
| Field | Description | Values | Examples | Default |
|---|---|---|---|---|
| disabled | disable captions for the whole slideshow | true or false | false | |
| position | vertical position of captions | "top" or "bottom" | "bottom" | |
| align | horizontal position of captions | "left", "right", or "center" | "center" | |
| text_align | alignment of text within caption box | "left", "right", or "center" | "center" | |
| size | caption text size | integer point value | 14 "14pt" | "medium" |
| padding | padding around text in caption box | integer pixel value | 8 "8px" | 8 |
| width | width of caption box | integer pixel value percent | 800 "800px" "75%" | "100%" |
| shrink_width | caption box will be shrunk to fit text, down to a minimum of this size | integer pixel value percent | 200 "200px" "30%" | same as width (no shrinking) |
| color | color of caption text | css color value | "lightskyblue" "#87CEFA" | "white" |
| background | background color of caption box | css color value | "black" "#000000" | "black" |
| opacity | opacity of caption box | decimal value between 0 and 1 | 0 1 0.5 | 0.5 |
| rounded | amount to round corners of caption box | integer pixel value | 5 "5px" | 0 (corners not rounded) |
API
You can make external JavaScript calls to the slideshow.
| Call | Description |
|---|---|
| jslide('slider_id').moveImage(1); | Move to the next image |
| jslide('slider_id').moveImage(-1); | Move to the previous image |
More API calls coming soon.