I've taken over management of my company's website, which was initially created by someone else at a cost of $24,000. We recently made some edits to the slideshow feature on the site, adding buttons that allow users to navigate to corresponding photos. While this new functionality works seamlessly in Chrome, we're encountering issues with Internet Explorer (IE). In IE, the last button displays a blank image and there is a strange border around the first added image. The HTML code for these changes includes inserting an image with a link and button into the slideshow. Despite looking through the JavaScript and jQuery scripts, I can't seem to find any limitations on the number of images or buttons allowed. I understand this might be a lengthy explanation but thank you for taking the time to review it.
<a href="http:\\www.supplysourceoutlet.com" target="_blank">
<img src="/images/home-slideshow/photo-outlet.jpg" alt="" width="684" height="325"></a><img src="/images/home-slideshow/photo-01.jpg" alt="" width="684" height="325"><img src="/images/home-slideshow/photo-02.jpg" alt="" width="684" height="325"><img src="/images/home-slideshow/photo-03.jpg" alt="" width="684" height="325"><img src="/images/home-slideshow/photo-04.jpg" alt="" width="684" height="325"><img src="/images/home-slideshow/photo-05.jpg" alt="" width="684" height="325"> </div>
</div>
<div class="paging">
<a href="#" rel="1"> </a>
<a href="#" rel="2"> </a>
<a href="#" rel="3"> </a>
<a href="#" rel="4"> </a>
<a href="#" rel="5"> </a>
<a href="#" rel="6"> </a>'
Javascript utilized for the slideshow:
$(document).ready(function() {
//Display paging options and activate the first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Calculate image size, total images, and adjust reel size
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};
rotateSwitch();
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
//OnClick
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});