SHOW:
|
|
- or go back to the newest paste.
| 1 | <!DOCTYPE HTML> | |
| 2 | <html lang="en-US"> | |
| 3 | <head> | |
| 4 | <meta charset="UTF-8"> | |
| 5 | <title>Zephyranthes</title> | |
| 6 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| 7 | <meta name="description" content="" /> | |
| 8 | <meta name="keywords" content="Zephyranthes, fairy lily, rainflower, zephyr lily, magic lily, Atamasco lily, rain lily" /> | |
| 9 | <!-- STYLE FOR BOOTSTRAP --> | |
| 10 | <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> | |
| 11 | <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> | |
| 12 | <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"> | |
| 13 | <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css"> | |
| 14 | ||
| 15 | <!-- JS FOR BOOTSTRAP --> | |
| 16 | <script src="bootstrap/js/bootstrap.js"></script> | |
| 17 | <script src="bootstrap/js/bootstrap.min.js"></script> | |
| 18 | ||
| 19 | <!-- STYLE FOR THE SLIDER --> | |
| 20 | <link rel="stylesheet" href="css/slider.css"> | |
| 21 | ||
| 22 | <!-- INCLUDE THE SLIDER.PHP FILE FOR THE AUTOMATIC SLIDER--> | |
| 23 | <?php | |
| 24 | require_once("slider.php");
| |
| 25 | ?> | |
| 26 | ||
| 27 | <!-- JQUERY IS REQUIRED --> | |
| 28 | <script src="js/jquery-1.8.3.min.js"></script> | |
| 29 | ||
| 30 | <!-- JS FOR THE SLIDER --> | |
| 31 | <script src="js/swipe.js"></script> | |
| 32 | <script src="js/rotate-patch.js"></script> | |
| 33 | <script src="js/slider.min.js"></script> | |
| 34 | ||
| 35 | - | width : '0%', //The width of the slider, if it set to 0 it will take the width of the largest image |
| 35 | + | |
| 36 | <script type="text/javascript"> | |
| 37 | ||
| 38 | jQuery(window).load(function(){
| |
| 39 | ||
| 40 | jQuery('#slider1').autoSlider({
| |
| 41 | theme : 'default', //The theme of the slider (default, theme1, theme2, theme3) | |
| 42 | width : '0', //The width of the slider, if it set to 0 it will take the width of the largest image | |
| 43 | autoPlay : true, //auto play the images of the slider when is loaded | |
| 44 | showTimer : true, //show the timer line | |
| 45 | playInterval : 4000, //Time between transitions when auto play is on | |
| 46 | playBtn : true, //show play button | |
| 47 | loop : true, //when play is on if is set to true start slideshow again when it finishes | |
| 48 | navArrows : true, //show prev and next arrows | |
| 49 | navBar : true, //show the navigation bar | |
| 50 | navBarNumeric : false, //If the navigation bar will show the numbers of images | |
| 51 | autoHideNavArrows : false, //if it set to true then show the prev and next arrow only when you do a mouseover | |
| 52 | autoHidePlayBtn : false, //if it set to true then show the play button only when you do a mouseover | |
| 53 | autoHideNavBar : false, //if it set to true then show the navigation bar only when you do a mouseover | |
| 54 | keyboardNav : true, //navigation with arrows right and left of the keyboard | |
| 55 | transitionSpeed : 700, //The speed between transitions | |
| 56 | boxSpeed : 450, //The animation speed of a single box (must be lower than transitionSpeed) | |
| 57 | captionSpeed : 300, //The animation speed of the caption | |
| 58 | captions : false, //Show captions of the images that have text to show | |
| 59 | autoHideCaptions : false, //if it set to true then show the captions only when you do a mouseover | |
| 60 | - | beforeTransition : function(){}, //execute a function before right before the transition begins
|
| 60 | + | |
| 61 | - | afterTransition : function(){}, //execute a function after the transition completes
|
| 61 | + | |
| 62 | - | onSlideshowEnd : function() {}, // Runs when the slideshow finishes ( "loop" must be set to false )
|
| 62 | + | |
| 63 | - | onPlay : function() {}, // Runs when somebody click the button play
|
| 63 | + | |
| 64 | - | onPause : function() {} // Runs when somebody click the button pause
|
| 64 | + | |
| 65 | hideTimerInWidth : 500, //Hide the timer when the width is 500px or less for responsive design | |
| 66 | shadow : true, //A CSS3 shadow of the slider | |
| 67 | // beforeTransition : function(){}, //execute a function before right before the transition begins
| |
| 68 | // afterTransition : function(){}, //execute a function after the transition completes
| |
| 69 | // onSlideshowEnd : function() {}, // Runs when the slideshow finishes ( "loop" must be set to false )
| |
| 70 | // onPlay : function() {}, // Runs when somebody click the button play
| |
| 71 | // onPause : function() {} // Runs when somebody click the button pause
| |
| 72 | ||
| 73 | }) | |
| 74 | }) | |
| 75 | ||
| 76 | </script> | |
| 77 | ||
| 78 | </head> | |
| 79 | ||
| 80 | <body> | |
| 81 | <p> | |
| 82 | <?php | |
| 83 | make_slider("slider1", images);
| |
| 84 | ?> | |
| 85 | </p> | |
| 86 | <p>Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor. Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor.</p> | |
| 87 | <p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit.</p> | |
| 88 | <p>Donec nonummy magna quis risus. Quisque eleifend. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit.</p> | |
| 89 | </body> | |
| 90 | </html> |
