In order to display and convey the content for each project type, I needed to find a slider that would allow me to portray thumbnail images of each project, and a main image. As planned, this main image would then be linkable to a page which would be used to discuss the project in detail if the user wished to find out more.

I searched for days trying to find a slider that looked exactly like the one on the designs given to me at the beginning of the project. Alas, I could not find one like this that had its own scrolling area. I decided to look at a few that had thumbnail scrollers or at least displayed more than one image at a time so that the user would know that there were more images than just the one they could see.

The first one I found was this: jquery Boxslider (below). As you can see, it looked awful. The thumbails weren’t big enough, the parameters just didn’t exist so I could barely change anything to make it suit my needs, and it just didn’t function as well as i’d hoped.

project slider2

The next was this resposive thumbnail gallery. Although it functioned well, it was, unfortunately, just a thumbnail gallery. There was no central or main image to focus on, although I could still link these to a main page which was the idea of the project page in the first place.

responsivethumbnail

The Refineslide slider was one of the most visually appealing i’d found in my hunt. It allowed me to add html links, captions, all sorts. However, as you can see there is a distinct lack of thumbnails. It seemed as though I could find really good examples of both, but not together in the same slider!

refineslide

I decided to take a different approach, and look for something like this (below). This is CoolCarousel. You see previews of the image before and after the main image, and there are navigational buttons to switch through slides and cycle through. The transitions weren’t brilliant, and the fact you could only see three at a time was a bit disappointing, however it was probably the strongest contender so far, and certainly one of the ones i’d planned to pitch to my client.

coolcarousel

I found another similar slider, and incorporated it into a project page to see how it faired. Without actual images the visual appeal wasn’t strong, but the transitions were good.

project slider3

After many hours/days of searching, I finally found this slider (below). It’s called Elastislide, and contains a thumbnail gallery where the thumbnails link to the main image, which changes upon clicking any thumbnail image. Showing this to my client, he preferred this over any of the others. I began incorporating it into the site, but despite it being visually pleasing, coding it was a nightmare. It was virtually impossible to turn an image into a link. A function so simple, but impossible to word around the code used to allow the slider to function. This was disappointing, but I persuaded my client to allow me to search for a premium slider rather than a free one, giving us more flexibility as well as the increased likelihood of  locating a slider that does everything we want it to do.

project slider

Advertisements