If you’ve visited a website that uses car data, like Kelley Blue Book or any number of parts sites, you’ll notice that they tend to rely on a series of menus to help you find the car you’re looking for. At the very least they’ll have menus for the year, make, and model of the car.
I wondered if it would be possible to create something like this on a manually customized PhotoShelter site. There are some PhotoShelter members that focus on automotive stock photography, and it seems like it would be a handy way for clients to find images of a specific car- as opposed to using the traditional search bar.
To test this, I created two proof of concepts. The first one replaces the search box with a series of menus. You’re still using PhotoShelter’s search capabilities, you’re just inputting the terms using menus. This worked okay, but it has a few drawbacks. The biggest one is that it would be difficult for a member to customize; they’d have to edit the code every time they wanted to add another car. On top of that, it’s possible to get search results that aren’t always useful.
The second proof of concept is a much more polished solution. It uses v3 of the PhotoShelter API to dynamically create the menus. That means that once it has been embedded into the site, the member won’t have to touch the code at all; the menus will automatically reflect the collection/gallery structure of their automotive stock library.
You can check out both proof of concepts for yourself live.
I’ve packaged the code in the way that someone with basic knowledge of JavaScript (like me) should be able to use it. Let’s take a look at how easy it is to embed! You can place it on a manually customized PhotoShelter site, or pretty much any website, really.
1. Organize your images
This system requires you to keep the collections/galleries organized in a predictable way. Start by creating a collection to hold everything. You can name it what you like; I called mine “CarSearch”, but you could call it “Stock”. Inside you’ll want to mimic the following structure: Year(collection) > Make(collection) > Model(gallery).
2. The HTML
Here is the HTML you’ll want to add to your site. Just view the source code, and copy it. You’ll probably want to place it inside of a DIV to keep it from mixing in with other elements of your site.
3. The JavaScript
You have a couple options for the JavaScript. The easy to read, commented version is available here.
Or you can use this somewhat “minified” version here.
How you include this JavaScript is up to you. You could host it yourself and link to it, or just embed it directly on the page by placing it between a couple <script> tags. If you choose to do that, you’ll probably want to use the minified version. Regardless, there are two things you’ll want to edit in this code to make it work on your site. You’ll find it at the top of the code.
This code makes extensive use of the jQuery library, so you’ll probably want to link to it if you haven’t already. I haven’t done extensive testing to be able to say which versions it will work with, but the version I used myself is 1.11.
That’s it! You’ve now got automotive stock search menus built into your website.