Jamie Balfour BSc

Welcome to my personal website!

Technology enthusiast

I am very interested in technology, particularly relating to computer science. I am most interested in web design and development.

My main hobby is programming. One of my most well known products from this is ZPE. I also am the sole creator of BalfBlog, BalfBar and BalfSlider.

A little bit about me

In 1997, when I was six years of age, I got my very first computer. I was always very interested in the ins and outs of it and dismantled it to see how it worked.

Years later, in 2016 I received my BSc (with honours) in Computer Science, obtaining a First class degree.

I'd like to welcome you to my website and hope you enjoy using it as much as I have enjoyed building it!

Google Plus
Ghost
Me
Jamie Balfour BSc
Full stack developer

BalfSlider

Welcome to the page on BalfSlider.

BalfSlider is a very lightweight and functional image slideshow. It will feature a range of different transition styles (coming soon) and currently contains a single style that's easy to use.

I decided on the 12th of October 2016 to begin my next major project in my Web Neutral Project.

    Getting started

    As with BalfBar and BalfRibbon, BalfSlider is a jQuery plugin. This makes it easy to setup and use.

    First ensure you have jQuery 1.10 or later and a copy of the stylesheet:

    HTML
    ...
    <head>
        ...
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <link href="balfslider.css" rel="stylesheet" type="text/css">
        ...
    </head>
    ...
    					

    I provide a compiled version of the style used on this sample page and indeed the one on my personal website, but you most likely want to compile the SCSS file so that it works better with your website.

    There are several notes to make on the slideshow:

    • By default, the slideshow looks out of place. I suggest adding a display : none property to the slideshow. BalfSlider will automatically set it to a block element when it is ready. This means that users do not see a mess whilst it loads.
    • The height should not be modified unless you are not using the aspect ratio tools. BalfSlider will handle this otherwise.

    I think defering until the document is ready is the best way to load BalfSlider, but that choice is yours. Continuing in the head element, open a new script and put the following code in it:

    JavaScript
    $(document).ready(function(){
        $("#images").BalfSlider();
    });
    					

    Functions are bound within the plugin to specific events which will trigger automagically. There is no need for you to change any of this.

    Although this is designed as an image slideshow, anything can be used. I use div elements with images and captions inside, but you can do whatever you like.

    JavaScript
    $(document).ready(function(){
        $("#images").BalfSlider({SlideDuration : 2000, TransitionDuration : 500});
    });
    					

    As you can imagine, this will mean that each slide is up for 2000 milliseconds and then it switches to the next slide across 500 milliseconds.

    Modes

    The following frame demonstrates some different modes which you can configure using the selector below:

    Aspect ratio

    The HTML img tag features aspect ratio resizing. Unfortunately the div element does not. BalfSlider gets around this by providing an option to enable aspect ratio based resizing:

    JavaScript
    $(document).ready(function(){
        $("#images").BalfSlider({
    		AspectRatioWidth : 4,
    		AspectRatioHeight : 3
        });
    });
    					

    The above sample would set the aspect ratio to 4:3 since the width in a 4:3 aspect ratio is 4 and the height is 3. Also, feel free to set a maximum width or maximum height on the slideshow since this is considered into any aspect ratio sizing.

    This not only keeps images the right size but also allows BalfSlider to become responsive - something many sliders do not feature.

    License

    BalfSlider is, as with all of my projects in my Web Neutral Project, free to use. The source code is available on request, but by default, the file included is minified but non-minified source code can be given on request (I cannot be bothered updating my website with the latest each time). You can download a non-minified custom one from the generator on this webpage.

    Effects generator

    Generate your own BalfSlider using this plugin creator (I will add more of these from time to time as they become available):

    BalfSlider generator

    Before generating a slider, you should test each effect in the Modes section on this page.

    Comments

    Please do not abuse this comment system.

    Site accessibility

    A lot of the original functionalities that once existed here have been removed.

    This page was generated in 0.25 seconds using 2097152 bytes. Slow? Let me know.

    To use project mode, the window must be greater than 920 pixels in width.
    Click here to disable Project Mode.
    This site uses cookies to deliver its services, to personalise ads, to store preferences and to analyse traffic. Information about your use of this site is shared with other companies. By using this site, you agree to its use of cookies.
    Contact me
    Contact Jamie Balfour

    Get in touch with me via this form.