navigation syncing

by ashleycam3ron

HTML

<div>
        <ul id="square">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
    <div>
        <ul id="nav">
            <li><a href="#"><img src="http://ashley-cameron.com/interiordesign/img/seating/01.jpg"></a></li>
           <li><a href="#"><img src="http://ashley-cameron.com/interiordesign/img/seating/02.jpg"></a></li>
            <li><a href="#"><img src="http://ashley-cameron.com/interiordesign/img/seating/03.jpg"></a></li>
        </ul>
    </div>

CSS

div {
    width:40%;
    float:left;
    background-color:#F0F0F0;
    border:1px solid #000;
    margin:10px;
    height:250px;
}

div ul li img{width:80px;height:100px;} 

    ul#square,ul#square li{float:left;padding:0;}
    ul#square li a{width:15px;height:15px;float:left;background:#999;padding: 0; text-indent:-9999px;}
    ul#square li.activeSlide a{background:black;}

JavaScript

var j = jQuery.noConflict();

j('#square a').click(function() {
    j('#nav li').eq(
    j(this).parent().index()).find('img').trigger('click');
    return false;
});
// Proof of concept listener
j('#nav img').click(function() {
    j(this).css('border', '3px solid red');
});
j('#nav a').click(function() {
    j('#square li').eq(
    j(this).parent().index()).find('a').trigger('click');
    return false;
});
j('#nav li a').click(function() {
    j('#square li a').css('border', '3px solid red');
});