There are loads of tutorials online which are related to dynamic slideshows and image galleries. Typically web developers have been using jQuery to enhance the media in these content sliders. Many other ideas have come to fruition and this has spurred a generation of brand new plugins for jQuery developers.
In this tutorial I want to focus on one of these plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items. Additionally we will include some dynamic text as seen on the website demo. This UI style is perfect for improving the creativity of more generic or bland website layouts.
Live Demo – Download Source Code
Getting Started
First we want to create our bare HTML5 webpage and setup the core HTML structure. There are a lot of tags we need to include which relate to each image in the slideshow. Plus we are using custom headings and page text inside each of the sliding panels. But first we should take a peek at the document heading section.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>iOS Slider Demo Page</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.easing-1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.iosslider.min.js"></script>
</head>
Take note that I am including a series of JS files to ensure that our plugin works to the maximum capacity. First is the latest jQuery library hosted by Google APIs. Then followed by jQuery easing and finally our iosSlider plugin codes. All of the working JavaScript has been added into the bottom of the HTML body inside <script></script> tags.
Moving on we should now examine the internal HTML and see how this works to generate the basic slideshow. By including a series of content wrappers the goal is to keep our widget fully responsive to display properly on mobile smartphones. The functionality is already built using jQuery so it is worth the extra HTML.
<div class="fluidHeight">
<div class="sliderContainer">
<div class="iosSlider">
<div class="slider">
<div class="item item1">
<div class="inner">
<div class="text1"><span>Touch Me.</span></div>
<div class="text2"><span>Hardware accelerated using<br>CSS3 for supported iOS,<br>Android and WebKit</span></div>
</div>
</div>
The .fluidHeight class will ensure that our full wrapper keeps the same proportions of each internal image. The internal .sliderContainer is what will hold the photos and defines an area for the content to slide between. The .item class is what defines a unique sliding object and .inner is used for absolute positioning. The two text objects will fly in to be animated from the right side, and so we need to have them positioned on top of the photo at all times.
Styling the Sliding Panels
At the bottom of the sliding container after all the images have been listed we close the .slider div and lock them into a single box. Then outside I have added the various circle navigation buttons for users to click and switch between the different views automatically.
<div class="slideSelectors">
<div class="item selected"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
This looks like a basic nav menu list and we could have stuck to using list items or definition lists, per the newer HTML5 documentation. But divs are cleaner and offer more control over the width and height, plus the size of the link items themselves. You can see how these are floated together inside the container which uses different CSS properties than the internal .item slides.
.iosSlider .slider .item { width: 100%; height: 100%; padding: 5px 0 5px 0; }
.iosSlider .slider .item .inner {
position: relative;
top: 0;
left: 0;
width: 1024px;
margin: 0 auto;
height: 100%;
box-shadow: 0 0 10px -5px #000;
background-position: 50% 0;
background-repeat: no-repeat;
}
.iosSlider .slider .item .inner .text1 {
background: none repeat scroll 0 0 #000;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: 150px;
top: 30px;
padding: 5px 2px 0 7px;
}
.iosSlider .slider .item .inner .text1 span { color: #fff; font: 55px/70px Norican; padding: 0 8px; }
.iosSlider .slider .item .inner .text2 {
background: none repeat scroll 0 0 #000;
opacity: 0;
filter: alpha(opacity=0);
padding: 5px 7px 7px;
position: absolute;
right: 0;
top: 100px;
}
.iosSlider .slider .item .inner .text2 span { color: #fff; font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }
.sliderContainer .slideSelectors {
position: relative;
bottom: 20px;
left: 0;
width: 92%;
margin: 0 4%;
z-index: 1;
height: 10px;
}
.sliderContainer .slideSelectors .item {
float: left;
width: 9px;
height: 9px;
border: 1px solid #000;
background: #999;
margin: 0 0 0 10px;
opacity: 0.25;
filter: alpha(opacity=25);
}
.sliderContainer .slideSelectors .selected {
background: #000;
opacity: 1;
filter: alpha(opacity=100);
}
The inner span elements help to define unique font faces we are applying inside CSS. The original page demo includes a small TTF font Norican Regular which looks fantastic as a header. This can be included using CSS @font-face properties and setting up a new typeface style. Keep in mind that you can apply this same effect using any other TTF file based on open GLP licensed fonts.
Merging with JavaScript
By now the last major piece of the puzzle is how to implement this whole iOS Slider effect. We will be using a custom function based off the jQuery plugin file. We need to attach the selector onto our .iosslider container div which holds the other slider items.
$(document).ready(function() {
$('.iosSlider').iosSlider({
desktopClickDrag: true,
snapToChildren: true,
navSlideSelector: '.sliderContainer .slideSelectors .item',
onSlideComplete: slideComplete,
onSliderLoaded: sliderLoaded,
onSlideChange: slideChange,
scrollbar: false,
autoSlide: true,
autoSlideTimer: 3300,
infiniteSlider: true
});
});
The method call is using $().iosSlider for the main function name. Inside we are passing a whole slew of parameters which pertain to this specific demo. The full documentation is listed on the official plugin website where you can see each parameter name and the accepted datatype. There are 3 parameters which call external functions also defined inside my JavaScript code. If you want to save space these may be copied over into the jQuery plugin file, or saved into a new external JS file.
function slideChange(args) {
$('.sliderContainer .slideSelectors .item').removeClass('selected');
$('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
}
function slideComplete(args) {
if(!args.slideChanged) return false;
$(args.sliderObject).find('.text1, .text2').attr('style', '');
$(args.currentSlideObject).find('.text1').animate({
right: '100px',
opacity: '0.8'
}, 400, 'easeOutQuint');
$(args.currentSlideObject).find('.text2').delay(200).animate({
right: '70px',
opacity: '0.8'
}, 400, 'easeOutQuint');
}
function sliderLoaded(args) {
$(args.sliderObject).find('.text1, .text2').attr('style', '');
$(args.currentSlideObject).find('.text1').animate({
right: '100px',
opacity: '0.8'
}, 400, 'easeOutQuint');
$(args.currentSlideObject).find('.text2').delay(200).animate({
right: '70px',
opacity: '0.8'
}, 400, 'easeOutQuint');
slideChange(args);
}
These function calls mostly deal with animating the text and sliding image panels on each slide change. You can dig into the functions as I have copied them below. Please note that it is not imperative that you edit these at all. They should work fine unless you are updating class names, which are very minor changes anyways.
Live Demo – Download Source Code
Final Thoughts
I do hope this tutorial may be of use to some web developers out there. Building a custom slider widget to work properly in modern browsers and smartphones is not easy. Many of the supported browsers for Android and iOS devices are advancing, too. This means we can expect support for greater ideas in the near future.
Along with my live demos feel free to grab a copy of the project source code. I have slimmed down the page to include a very minimal amount of CSS and HTML to keep this slideshow running. It should be easy to copy/paste into your own design and have it working quickly. But if you have additional thoughts or questions on the iosSlider plugin feel free to share with us in the post discussion area.
Source: http://designm.ag/tutorials/how-to-build-an-ios-style-content-slider-using-jquery/
No comments:
Post a Comment