Image & content slider
How to use
Jumpeye framework's content slider is an easy to use JavaScript slider component that works exclusively with Jumpeye framework on the latest versions of browsers and also Internet Explorer 8. To add a content slider to your webpage simply include the Jumpeye framework and slider JavaScript libraries together with the grid CSS file, setup the slider's content and setup the slider itself:
1. Download the latest version of Jumpeye framework from the Free version page or from your account (My account -> My downloads).
2. Extract the content of the package. It is recommended to preserve the structure of the framework in your project, but it is not mandatory.
3. Import the required files into your HTML page and insert the viewport meta tag in order to work properly on mobile devices:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" href="/css/JFGrid.css" />
<script type="text/javascript" src="/js/JFCore.js"></script>
<script type="text/javascript" src="/components/contentSlider/JFBlurrySlider.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" href="/css/JFGrid.css" />
<script type="text/javascript" src="/js/JFCore.js"></script>
<script type="text/javascript" src="/components/contentSlider/JFBlurrySlider.js"></script>
</head>
4. Within the <body> tag of your HTML page specify the content for each slide of the slider component. Within a master <div> tag for the slider component use <div> tags to specify the information for each slide. The slider component will use the unique id of the master <div> tag to identify and retrieve content.
Note! The HTML code of the slider must be placed in a row and column inside the grid in order to work responsively.
Note! The HTML code of the slider must be placed in a row and column inside the grid in order to work responsively.
<body>
<div class="container">
...
<div class="row">
<div class="grid_12 columns">
<div id="mySlider">
<div name="jf-slider_content" style="display: none">
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Image title</div>
<div name="jf-description">Description for the image</div>
<div name="jf-content">images/image_1.jpg</div>
<div name="jf-target_url">http://www.somesite.com</div>
<div name="jf-target_window">_blank</div>
</div>
<div name="jf-slide">
<div name="jf-type">html</div>
<div name="jf-title"></div>
<div name="jf-description"></div>
<div name="jf-content">
<div id="slide2">
<p>This is some HTML content for the slide.</p>
<br />
<p>I can even place an image:</p>
<img src="images/image_2.jpg" alt="Image" />
</div>
</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Image title</div>
<div name="jf-description">Image description</div>
<div name="jf-content">images/image_3.jpg</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
</div>
</div>
</div>
</div>
...
</div>
</body>
<div class="container">
...
<div class="row">
<div class="grid_12 columns">
<div id="mySlider">
<div name="jf-slider_content" style="display: none">
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Image title</div>
<div name="jf-description">Description for the image</div>
<div name="jf-content">images/image_1.jpg</div>
<div name="jf-target_url">http://www.somesite.com</div>
<div name="jf-target_window">_blank</div>
</div>
<div name="jf-slide">
<div name="jf-type">html</div>
<div name="jf-title"></div>
<div name="jf-description"></div>
<div name="jf-content">
<div id="slide2">
<p>This is some HTML content for the slide.</p>
<br />
<p>I can even place an image:</p>
<img src="images/image_2.jpg" alt="Image" />
</div>
</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Image title</div>
<div name="jf-description">Image description</div>
<div name="jf-content">images/image_3.jpg</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
</div>
</div>
</div>
</div>
...
</div>
</body>
6. Within the <script> tag initialize the content of the slider component for the <div> tag with the id attribute of mySlider.
<script type="text/javascript">
JFBase.JFBlurrySlider.init({
appendToID: 'mySlider',
maxWidth: 800,
maxHeight: 450,
imageScaleMode: 'scaleCrop',
loopContent: false,
animationType: 'slide',
animationDuration: 0.3,
autoSlideshow: false,
slideshowSpeed: 6,
pauseOnMouseOver: false,
startIndex: 0,
captionAlignment: left,
captionColor: '#FFF',
autoHideControls: false,
autoHideDelay: 3,
disableAutohideOnMouseOver: false,
showTimer: true,
showControlBar: true,
showNavButtons: true
});
</script>
JFBase.JFBlurrySlider.init({
appendToID: 'mySlider',
maxWidth: 800,
maxHeight: 450,
imageScaleMode: 'scaleCrop',
loopContent: false,
animationType: 'slide',
animationDuration: 0.3,
autoSlideshow: false,
slideshowSpeed: 6,
pauseOnMouseOver: false,
startIndex: 0,
captionAlignment: left,
captionColor: '#FFF',
autoHideControls: false,
autoHideDelay: 3,
disableAutohideOnMouseOver: false,
showTimer: true,
showControlBar: true,
showNavButtons: true
});
</script>
7. If you open the HTML document in a browser, you should be able to see the slider and interact with it.
The slider component supports HTML content too. Below you can see a content slider example. The content of each slide is composed of HTML code (text, images).
It is recommended to build the HTML content of the slides using the grid, else the content will not work responsively.