jQuery Image Switcher
In a previous iteration of my portfolio I wanted to display my recent work on my home page in a slightly different way from the norm. A result of this was a very simple jQuery Image Switcher, which allowed me to create a different way of laying out my work.
This was achieved using a very small amount of HTML, CSS and used a dusting of jQuery to add the interaction to it. The HTML used was, quite simply, a list of the images I wanted to display.
<ul id="latest">
<li><img src="http://flickholdr.com/300/150/cheetah" alt="Photograph of a Cheetah" class="latest1" /></li>
<li><img src="http://flickholdr.com/300/150/puma,cat" alt="Photograph of a Puma" class="latest2" /></li>
<li><img src="http://flickholdr.com/300/150/jaguar,cat/1" alt="Photograph of a Jaguar" class="latest3" /></li>
<li><img src="http://flickholdr.com/300/150/panther/2" alt="Photograph of a Panther" class="latest4" /></li>
<li><img src="http://flickholdr.com/300/150/tiger/1" alt="Photograph of a Tiger" class="latest5" /></li>
<li><img src="http://flickholdr.com/300/150/leopard/1" alt="Photograph of a Leopard" class="latest6" /></li>
<li><img src="http://flickholdr.com/300/150/snowleopard,cat" alt="Photograph of a Show Leopard" class="latest7" /></li>
<li><img src="http://flickholdr.com/300/150/lion/1" alt="Photograph of a Lion" class="latest8" /></li>
</ul>
This was supported by a small amount of CSS to position elements within the list itself. I’ve tried to keep this as simple as possible, but the more elements that get added the messier things become.
#latest{
height:100px;
position:relative;
}
#latest li{
display: inline;
float: left;
}
#content img{
position:absolute;
bottom:0;
}
#content .latest1{
left:0px;
width:9.375%;
}
#content .latest2{
left:6.25%;
width:12.5%;
}
#content .latest3{
left:12.5%;
width:15.625%;
}
#content .latest4{
left:18.75%;
width:18.75%;
}
#content .latest5{
left:29.166666667%;
width:21.875%;
}
#content .latest6{
left:41.666666667%;
width:25%;
}
#content .latest7{
left:54.166666667%;
width:28.125%;
}
#content .latest8{
left:66.666666667%;
width:33.5%;
}
I should note that the dimensions were originally worked out using pixels, but I have adjusted things to use percentages, to fit with my flexible site design.
Finally, user interaction was added to the elements using what turned out to be a very small amount of jQuery. This code watches for the images being clicked, and switches the src and alt attributes around on the clicked image and the last image in the list.
$(’#latest img’).click(function(){
// do my image switching logic here.
var src = $(this).attr("src"),
alt = $(this).attr("alt"),
src2 = $(".latest8").attr("src"),
alt2 = $(".latest8").attr("alt");
$(this).attr(’src’, src2).attr(’alt’,alt2);
$(".latest8").attr(’src’, src).attr(’alt’,alt);
});
One of the things I felt that was really important with this was that regardless of how nice things looked and worked with JavaScript that things didn’t break or work poorly in the event that someone has disabled it. This is something I still hold true, and feel that the final piece carried this across nicely.