*Update 2
After identifying that the images were not fading in/out due to being considered unloaded, I resolved the issue by incorporating the initial 3 lines of jQuery code. I anticipate refactoring this and will provide an update once completed.
HTML Code Snippet:
<div class="gallery">
<div class='thisImg activeImg'><img src='img/hair/hair-colour-5.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-1.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-2.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-3.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-4.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-6.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-7.jpg' /></div>
<div class='thisImg'><img src='img/hair/hair-colour-8.jpg' /></div>
<div class='nextImg'><p><a>></a></p></div>
<div class='prevImg'><p><a><</a></p></div>
</div>
CSS Styles:
.gallery {
position:absolute;
top:2px;
right:0;
float:right;
height:400px;
width:400px;
border:3px solid #CFC;
}
.thisImg {
overflow:hidden;
position:absolute;
top:0;
left:0;
display:hidden;
}
.activeImg {
display:block;
z-index:2;
}
.prevImg, .nextImg {
position:absolute;
background-color:#CFC;
box-shadow: inset 0 0 10px #9C0;
-moz-box-shadow: inset 0 0 10px #9CO;
-webkit-box-shadow: inset 0 0 10px #9CO;
text-align:center;
top:175px;
height:50px;
width:50px;
font-size:42px;
z-index:2;
opacity:0.5;
}
.prevImg {
left:10px;
}
.nextImg {
right:10px;
}
.nextImg p, .prevImg p {
position:absolute;
left:15px;
top:-5px;
color:#630;
}
.nextImg:hover, .prevImg:hover {
opacity:1;
color:#630;
display:block;
cursor:pointer;
}
jQuery Implementation:
$(document).ready(function() {
$(".thisImg").hide();
$(".activeImg").show();
$("#thisImg").bind("load", function () { $(this).fadeIn(); });
});
var main = function() {
$('.nextImg').click(function() {
var currentImg = $('.activeImg');
var nextImg = currentImg.next(".thisImg");
if(nextImg.length == 0) {
nextImg = $('.thisImg').first();
}
currentImg.fadeOut(3000).removeClass('activeImg');
nextImg.fadeIn(3000).addClass('activeImg');
});
$('.prevImg').click(function() {
var currentImg = $('.activeImg');
var prevImg = currentImg.prev(".thisImg");
if(prevImg.length == 0) {
prevImg = $('.thisImg').last();
}
currentImg.fadeOut(3000).removeClass('activeImg');
prevImg.fadeIn(3000).addClass('activeImg');
});
}
$(document).ready(main);