Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

The workings of BalfSlider

Today BalfSlider received it's first major update - adding functionality to the slide control buttons and to give more externally available features. It also added newly exposed Back, Forward, Stop and Start functions. This update makes the slider controllable by users through two different accessible options. 

The first of these options is through the slider buttons. The slider buttons are found on almost every slider as a crucial feature allowing users to select a slide of their choice (so if they caught only a glimpse of a slide but missed the main focus of it they can easily go back to it quickly without needing to go through the whole slide show). BalfSlider simply detects whether there is a ul element with the class selectors inside the BalfSlider element. If it detects one it will bind a click event to each of these and it's corresponding slide. Theoretically, this is the best way to prevent any external exposure of these on your website. There's no need for external exposure anyway. 

On the subject of external exposure, the second option is designed for this. This method binds the Back, Forward, Stop and Start functions to the plugin and makes it very easy to go backward, forwards, pause and play your slide show from JavaScript - a feature I've desired on many other sliders out there. This is designed for use at an elementary level meaning you can easily just call the function. Let's take a look at how we do this:

JavaScript
var  s = jQuery('.balfslider').BalfSlider({AspectRatioWidth : 16, AspectRatioHeight : 9});
jQuery('button').click(function(){
   s.Forward();
}

So in this instance we use jQuery to bind a click event to the button which when triggered will call our Forward function on the BalfSlider assigned to the variable s. That's pretty easy to understand. 

The update will be available to play with on the webpage on my website dedicated to this project. It's still in development stages so bugs may be found in the version up there.

This post also was to describe the inner workings of BalfSlider and what it does that's different. Well BalfSlider takes a new concept introduced with one of my projects a few months back of a model that represents the internal functions, basically acting like an interface. This model is an object which all different transitions must follow. The object features several (empty) functions such as the Next function and the Animate function. These functions are placeholders that should be replaced with the transitions own implementations of them. This makes BalfSlider very lightweight and easy to update too but also makes the development easier. This method of development means that all that is needed to develop a transition is a few implementations that fit the model's specifications.

Also, this is my 300th post on my blog! This marks a very important moment for my blog and for BalfBlog in general. 

balf
balfslider
web
neutral
project
wnp
slideshow
update
first
controls
Comments
Powered by DASH 2.0