Dutchie432 Dutchie432 - 3 months ago 20
jQuery Question

2 identical "Camera" slideshows. One works, one acts funny

I am working on a VERY old web page that was using JAVA code to display 2 identical slideshows. I have been tasked with updating this to jQuery Camera Plugin.

I have used the plugin before and this seems very straight-forward, however the one slideshow on the right is acting very unusual. The image will transition in and then simply disappear. I am wondering if anyone can shed some light on why this might be happening.

NOTE Please forgive the ridiculous outdated HTML and all of the inline CSS. It is not my code!! :(

JavaScript

<script type="text/javascript">
$(function() {
$('.camera_wrap').camera({
pagination: false,
thumbnails: false,
navigation: false,
playPause: false,
time: 3000,
loader: 'none'
});
});
</script>


HTML

<table style="width:800px;height:220px;margin:0 auto;" border="0">
<tr>
<td style="width:266px">

<div class="camera_wrap" id="cw1" style="width:266px;height:185px;">
<div data-src="../JPEGS/3.jpg"></div>
<div data-src="../JPEGS/4.jpg"></div>
<div data-src="../JPEGS/5.jpg"></div>
<div data-src="../JPEGS/6.jpg"></div>
<div data-src="../JPEGS/7.jpg"></div>
<div data-src="../JPEGS/11a.jpg"></div>
<div data-src="../JPEGS/14.jpg"></div>
</div>


</td>
<td style="width:268px;text-align:center;" valign="middle">
<b><font color="#FFFFCC" face="Arial Black" size=
"5"><i>ENGINEERING</i></font></b>
<p><b><font color="#FFFFCC" face="Arial Black" size=
"5"><i>ARCHITECTURE</i></font></b></p>
<p><b><font color="#FFFFCC" face="Arial Black" size=
"5"><i>SURVEYING</i></font></b></p>
<p><b><font color="#FFFFCC" face="Arial Black" size=
"5"><i>PLANNING</i></font></b></p>
</td>
<td style="width:266px">

<div class="camera_wrap" id="cw2" style="width:266px;height:185px;">
<div data-src="../JPEGS/3.jpg"></div>
<div data-src="../JPEGS/4.jpg"></div>
<div data-src="../JPEGS/5.jpg"></div>
<div data-src="../JPEGS/6.jpg"></div>
<div data-src="../JPEGS/7.jpg"></div>
<div data-src="../JPEGS/11a.jpg"></div>
<div data-src="../JPEGS/14.jpg"></div>
</div>

</td>
</tr>
</table>

Answer

I would try to seperate the slideshows, I can see you have different id cw1 and cw2, then refer by

<script type="text/javascript">
  $(function() {
    $('#cw1').camera({
      pagination: false,
      thumbnails: false,
      navigation: false,
      playPause: false,
      time: 3000,
      loader: 'none'
    });
$('#cw2').camera({
      pagination: false,
      thumbnails: false,
      navigation: false,
      playPause: false,
      time: 3000,
      loader: 'none'
    });
  });
</script>