1. Download "slideshow Demo.zip" from our dropbox folder onto a Flash drive and uncompress. [Or download all files and folders in slideshow Demo folder on our dropbox)
2. Create a new html document and save in slideshow Demo folder.
3. Copy and paste following code into <head> tag. This code attached necessary javascript files.
<!-- REQUIRED: attach external javascript files and
scripts-->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="scripts/jquery-1.7.1.min.js"></script>
<script
type="text/javascript"
src="scripts/jquery.nivo.slider.js"></script>
<script
type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:
'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, //
For slice animations
boxCols: 8, //
For box animations
boxRows: 4, //
For box animations
animSpeed:
500, // Slide transition speed
pauseTime:
5000, // How long each slide will show
startSlide: 0,
// Set starting Slide (0 index)
directionNav:
true, // Next & Prev navigation
controlNav:
true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover:
false, // Stop animation while hovering
manualAdvance:
false, // Force manual transitions
prevText:
'Prev', // Prev directionNav text
nextText:
'Next', // Next directionNav text
randomStart:
false, // Start on a random slide
beforeChange:
function(){}, // Triggers before a slide transition
afterChange:
function(){}, // Triggers after a slide transition
slideshowEnd:
function(){}, // Triggers after all slides have been shown
lastSlide:
function(){}, // Triggers when last slide is shown
afterLoad:
function(){} // Triggers when slider has loaded
});
});
</script>
4. Copy and paste following code into <head> tag. This code attached necessary stylesheets.<!--OPTIONAL: additional stylesheets to change slideshow interface theme, default, light, dark or bar -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<!--REQUIRED: provided stylesheet required for basic slideshow styles-->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
5. Copy and paste following code into <body> tag. This code sets up images in your slideshow
<!-- REQUIRED: two divs to set up slideshow interface-->
<!--change "default" to light,dark or bar to switch visual themes-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!-- REQUIRED: img tag will display image in slideshow, src is location and name of image, can add caption text with title attribute and value-->
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" title="This is an example of a caption" />
</div>
</div>
6. Add this css rule for the "slider-wrapper" class selector either in an internal or external css file. This will set up the size and position of the slideshow.
.slider-wrapper {
/* adjusts size of slideshow, % will scale*/
width: 500px;
/* can use margin set to auto to center on page, or absolute positioning values*/
margin: 10px auto;
}
No comments:
Post a Comment