Can anyone figure out how this site's image navigation works?

JavaScript
1

Been giving myself a headache trying to reverse engineer this ‘enlarge on mouseover’ image navigation - http://www.yamaha-motor.co.uk/uk/. I posted in here because I’m assuming that there’s some JS going on somewhere, or maybe it’s pure CSS, I can’t tell and I haven’t been able to recreate it.

Can someone point me in the right direction or maybe suggest a Joomla plug in or script that can replicate that functionality?

2

Sure there is some JS going on, if you look in the <head>, you see a lot of links referring to .js files:


<script type="text/javascript" src="http://cdn.yamaha-motor.eu/static/js/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://cdn.yamaha-motor.eu/static/js/jquery.plugins.js"></script>
<script type="text/javascript" src="http://cdn.yamaha-motor.eu/static/js/jquery.galleria.js"></script>
<script type="text/javascript" src="http://cdn.yamaha-motor.eu/static/js/functions.js"></script>
<script type="text/javascript" src="http://cdn.yamaha-motor.eu/static/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://cdn.yamaha-motor.eu/static/js/gftya.font.js"></script>

I suppose the animating part is done by jquery, as that is the most simple to do this.

3

If you open the functions.js script, you’ll notice some things like for their navigation:


// product navigation:
function initProductNav() {
	$(function() {
		$("div#productsnav").addClass("activenav");
		$("div#productsnav ul li:not(.active) img").bubbleup({ tooltips: true });
	});
}

You’ll need to read through the rest of the code sometime, it’s quite long…
Don’t have time for this right now, but hopefully you’re on the right way with this already.

It’s that .bubbleup thingy that probably bubbles it up :wink:

4

Thanks for the pointers bulvardi, now to see if I can figure out how to nick it. (Kidding, we have permission from Yamaha but not sure if that includes asking them to supply the actual script)