Home > About us > Meet the team

Each of these is typically a hyperlink back to the relevant section. Now these are great, but what happens if your breadcrumb isn't that small? It's easy to see a situation where you have a bunch of really long titles that cause the breadcrumb to span over two or three lines. This isn't always what you want, since it can make the breadcrumb look broken. You might just decide to make some of the titles smaller, but with content managed sites and page names stuffed with SEO keywords, this is often easier said than done.

So I came up with a solution to this problem using JQuery. It relies on a certain kind of markup; you must use <ul> and <li> tags to build your breadcrumb rather than a continuous string of text. Hopefully you already know how to style a <ul> as a breadcrumb, but if not, the following should help:

• Use either float:left, display:inline, or display:inline-block on your <li> tags.
• If you want to seperate each item with an image, use the following as well:
  • padding-left:24px (or whathever you need) on your <li> tag
  • background:url(/images/breadcrumb.gif) left no-repeat; on your <li>

(I realise the background image could be applied instead as a bullet image, but this doesn't look great in some older browsers, so the above method is a little safer)

You should be able to figure out the rest of the styling from there, but if not, drop me a comment and I'll help you out.

The Javascript

Ok, let me explain what the script does and then I'll post the code. Firstly, the script has two properties: "breadcrumb" and "maxWidth". The first is a JQuery selector for the <ul> element. If not supplied, this defaults to "$('div#breadcrumb > ul'); a <ul> that is the immediate descendant of a div with the ID of "breadcrumb". The second is the maximum width in pixels the breadcrumb should be, which defaults to the outerWidth of the <ul>. If it goes over this width, the breadcrumb is shortened until it fits.

Essentially, what the script does is check the combined width of the breadcrumb's <li> elements. If this total exceeeds the "maxWidth" property, the script will shorten the first non-shortened list item and check again. It continues doing this until the combined width of all of the list items is less than "maxWidth". When each item in shortened, the text is replaced by "…" and to keep things nice and accessible, a title tag is added with the original text.

And that's that. All that's left is to show you the script and how to call it:

function shortenBreadcrumb(options){
    /*
        Shortens the breadcrumb to a specified width by removing the text from one list item
        at a time and replacing it with "..." - accepts an options object as an optional
        parameter with two options:
            shortenBreadcrumb({
                breadcrumb : $('div#breadcrumb > ul'),
                maxWidth : 725
            });

        The first is the selector for the breadcrumb ul, the second is the maximum width you
        want it to be.
    */

    var breadcrumb = $('div#breadcrumb > ul');
    var maxWidth = $('div#breadcrumb').innerWidth();

    if (options != undefined){
        if (options.breadcrumb != null) { breadcrumb = options.breadcrumb; }
        if (options.maxWidth != null) { maxWidth = options.maxWidth; }
    }

    var levelCount = breadcrumb.find('li').size();
    var shortEnough = false;
    var totalWidth;
    while (shortEnough == false) {
        totalWidth = 0;
        breadcrumb.children('li').each (function(){
            totalWidth += $(this).outerWidth(true);
        });
        if (totalWidth > maxWidth){
            var li = breadcrumb.children('li').not('.short').eq(1);
            li.addClass('short');
            li.children('a').attr('title', li.children('a').html());
            li.children('a').html('...');
        }
        else {
            shortEnough = true;
        }
    }
}

Include this script in your page and call using:

$(document).ready(function(){
    shortenBreadcrumb({
        breadcrumb : $('ul#breadcrumb'),
        maxWidth : 600
    });
});

Of course, any of these two options can be left blank, so you can call it like so:

    shortenBreadcrumb();

It goes without saying that this script requires the JQuery library. If you want to use the script in your site, please do, but a mention of Blue Arena or a comment would be appreciated.

(requires JQuery v1.3.2)

New in v1.1

• You can now add captions for each image
• You can now add a link for each image to navigate to

Instructions

To create a new gallery, you need to first include the script in your page, after you have included the JQuery script.

<script src="includes/galleryCarousel-1.1.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into.  If you want to put captions somewhere for each image, you will also need a div or span for this:

<img id="featuredImg" />
<span id="caption"></span>
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag (“alt”) and thumbnail (“thumb”) can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Captions

When you have specified a caption for an image, it will be shown – you can specify text or html for your caption.  When there is no caption specified for an image, the caption container will be hidden.

images[0] = {
    src : '/path/to/my/image.jpg',
    caption : 'This is my image caption.'
}

Main Image Hyperlink

You can specify a page to navigate to when clicking on an image, which is useful for portfolios and such.  To specify an image, simply add a url property like so:

images[0] = {
    src : '/path/to/my/image.jpg',
    url : '/path/to/my/page.html'
}

Property List

Here is a list of the configuration options and their defaults:

The following is a list of the properties for the images object:

Download packed code for Gallery Carousel v1.0

Here is a stripped down version.  First, include the galleryCarousel javascript file in the <head> section of your page:

<script src="includes/galleryCarousel-1.0.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into:

<img id="featuredImg" />
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag ("alt") and thumbnail ("thumb") can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Here is a list of the configuration options and their defaults:

The following is a list of the properties for the images object: