I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change.
My css
<div class="fadein">
<img src="http://www.zabb.co.uk/1.jpg">
<img src="http://www.zabb.co.uk/2.jpg">
<img src="http://www.zabb.co.uk/3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://www.zabb.co.uk/images/1_01.jpg" width="68" height="61" alt="" onclick="document.getElementById('fadein').src='http://www.zabb.co.uk/1.jpg'"></td>
<td>
<img src="http://www.zabb.co.uk/images/1_02.jpg" width="61" height="61" alt=""></td>
<td>
<img src="http://www.zabb.co.uk/images/1_03.jpg" width="61" height="61" alt=""></td>
<td>
<img src="http://www.zabb.co.uk/images/1_04.jpg" width="61" height="61" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
JQuery code
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 6500);
});
HTML Code:-
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
Any help greatly appreciated. Thanks,
shreesh chandra shukla
19-Aug-2013There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:
<div class='fadein' id='fadein'>