Image Replacement Gallery

Image Replacement Gallery Web-development (JavaScript) Image Replacement Gallery Image Replacement Gallery

Replace the img src attribute with the a href attribute.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2").append('')
$(".thumbs a").click(function(){
 var largePath = $(this).attr("href");
 var largeAlt = $(this).attr("title");
 $("#largeImg").attr({ src: largePath, alt: largeAlt });
 $("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
</script>

<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
</style>

Download

http://dl.dropbox.com/u/3293191/JQUERY/ImageReplacement.zip

Posted by Hodie J