I have a page I'm testing in which I would like to include a "before and after" gallery of auto work. I have seen it done and the example of what I'm trying to achieve can be found at:
http://www.blackhillsautobody.com/autobody_pictures.htmHowever, this site uses tables to set this up and I see no need for all that coding in html so I have chosen to format it with CSS. I'm not sure if the script is bad or not or if that is where the error is, but since I'm so new to javascript, I would not be surprised. If you look at my site at:
http://www.callaydesign.com/armstrong4/gallery.htmlyou can roll over the red image placeholder files and see what happens. It doesn't complete the rollover. The reason I'm not sure if its the javascript is because it looks like it completes its function...and the browsers all indicate no errors since I have the error panels set to show them.
It looks almost as if the image file it's calling is bad or not found...but I have checked and rechecked the file and it is correct as far as I can tell.
my javascript and the subsequent html are as follows:
CODE
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery img').each(function() {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');
$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function () {
$(this).attr('src', imgFile);
}
); // end hover
}); // end each
}); // end ready()
</script>
<div id="gallery">
<a href="images/redtest2.jpg"><img src="images/redtest.jpg" width="240" height="180" alt="Red"></a>
<a href="images/redtest2.jpg"><img src="images/redtest.jpg" width="240" height="180" alt="Red"></a>
<a href="images/redtest2.jpg"><img src="images/redtest.jpg" width="240" height="180" alt="Red"></a>
<a href="images/redtest2.jpg"><img src="images/redtest.jpg" width="240" height="180" alt="Red"></a>
<a href="images/redtest2.jpg"><img src="images/redtest.jpg" width="240" height="180" alt="Red"></a>
<a href="images/redtest2.jpg"><img src="images/redtest.jpg" width="240" height="180" alt="Red"></a>
</div>
the CSS for this portion of the page is:
CODE
#gallery a {
padding:5px;
display: block;
float: left;
margin: 0 10px 8px 0;
width: 240px;
}
#gallery {
width: 650px;
float: left;
padding: 0 20px 30px 10px;
}
#gallery img {
display:block;
}
#gallery a.selected {
background-color: #000;
outline:none;
}
Thanks so much for any help you have...or if you know of an easier way to do this that would be so greatly appreciated!
5 Oct, 2008 - 04:43 AM
| 