Making a single mega-image site with jQuery navigation?

October 3, 2013 2:03 PM

I've got limited HTML and CSS skills, and I'd like to make a Web site that's basically one really, really, really gigantic picture and uses jQuery to jump around from point to point inside it. What's the easiest way to do that?

In keeping with my current site, which has been under construction for a billion years, I'd like to "draw" my new site, and ideally have it all just exist as one really, really big image that the user sort of flies around above.

This seems roughly, approximately possible -- initially I wanted to do a parallax thing, but it seems like everyone and their donkey is doing parallax sites, and since one of the sub-goals of this site will be potentially job-seeking as a creative guy in the ad industry, being somebody who comes across as Late To The Trend would be kind of embarrassing.

I'm not super-gifted at Web design, but I'm good at finding ways to innovate with limited resources (see my current site). But I'd like some guidance on how to approach this before I launch in (if it's even approachable).

My figgerin' is that I make a really, really, really big (but very simple, for file size reasons) image, map the coordinates on it, and use HTML mapping to turn various points on this mega-image into links to other parts of the mega-image.

What I'm not sure of how to handle is the transitions from one part to the next.

Searching for "large-image Web sites" etc. pretty much just deliver lots of pages on how to have full-screen images on your site, which isn't what I'm after: I'm looking for a ridiculously huge image as the background, and a script that turns transitions into fast "flyovers" to destinations on that image.

Possible for a programming numpty? Or a fool's errand?

posted by Shepherd to Computers & Internet (10 answers total)

Maybe you want something like leaflet, which is intended for scrollable maps, but it sounds like your intended site is a lot like a map.
posted by moonmilk at 2:18 PM on October 3, 2013

Have you tried just doing this with fragment identifier (named) hyperlinks?

<div style="background-color:blue;width:3000px;height:3000px;position:relative">
   <div style="background-color:green;padding:3em;position:absolute;top:75%;left:25%"><a name="here"/><a href="#there">Here</a></div>
   <div style="background-color:red;padding:3em;position:absolute;top:25%;left:75%"><a name="there"/><a href="#here">There</a></div>
</div>

If this is what you're thinking of, you might look at some of the templates for putting icons and labels on maps that are used on Wikipedia, as they use the same basic approach. If you don't need multiple resolutions / zoom-in and zoom-out or animations this doesn't even require any javascript.
posted by XMLicious at 2:29 PM on October 3, 2013

(And actually, even if the bit about "fly-overs" means that you need animations, if you don't have to worry about old browsers you might be able to use CSS animations to do the gradual scrolling. Still no programming necessary!)
posted by XMLicious at 2:35 PM on October 3, 2013

I don't think what you're talking about can really be done without some programming. It's maybe theoretically possible through CSS without Javascript, but that probably borders on being more difficult and complicated than doing a little javascript programming.

What you're talking about reminds me a lot of impress.js and maybe a little like reveal.js.
posted by toomuchpete at 2:49 PM on October 3, 2013

If you're not attached to this idea being a website, could you accomplish what you want with a public Prezi?
posted by tinymegalo at 2:55 PM on October 3, 2013

Oddly, it was while watching a Prezi that I thought about the misgivings I was having about doing a parallax site, and thought that if I could pull off something that works like a Pezi but is non-linear, that would be awesome.

I dabble in so many areas that non-linear navigation is a must, though.
posted by Shepherd at 3:34 PM on October 3, 2013

What you're talking about reminds me a lot of impress.js and maybe a little like reveal.js.

Definitely seconding this, impress.js leapt to mind immediately.

Mobile is going to be really really tricky at best with your concept, so if you want your site to work well with mobile browsers, I'd look into media queries and conditional loading to load an alternate layout that bypasses all the zooming/flying about stuff for mobile devices (or just media queries + a redirect to a mobile version of the site if you don't want to do the whole responsive design thing).
posted by jason_steakums at 4:15 PM on October 3, 2013

Perhaps you could combine jQuery.ScrollTo with Zoomooz.js.
posted by macinchik at 10:25 PM on October 3, 2013

I have to confess I'm very taken with the Leaflet/turn it into a map idea, but I'm finding the whole idea super daunting. It's probably too late to alter the direction of the question, but I may be asking another next week about resources on Online Maps 101. The Leaflet documentation and tutorials assume a vast amount of existing knowledge of how to create/find, upload, and use maps.
posted by Shepherd at 6:26 AM on October 4, 2013

If you're really married to images and maps*, rather than using Leaflet, it may be easier to just use google maps (disclaimer: I've never touched leaflet, so I don't know). Using google maps API with your own tiles is really straight-forward and while many of the places out there will focus on zoomable images you definitely don't need to make them zoomable. The biggest hassle is going to be chopping your image up, but there are tools that can help.

If you go this route, mobile will probably still work well enough (google maps tends to be pretty widely supported), but you might want to have a way to view the content in a more traditional way for people who aren't as enamored by the zooming-around-a-map idea as you are.

* -- There are a lot of reasons why this may not be a good idea. Readability, ability to be found in google, mobile, etc.
posted by toomuchpete at 9:09 AM on October 4, 2013