StepCarousel conflict with jQuery s3Slider

[zorag]

1) Script Title: stepcarousel.js

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:

When using both StepCarousel and s3Slider on the same page they work absolutely fine, when using s3Slider on it's own it does not work. If I remove the stepcarousel.js file from the HEAD the s3Slider works.

Example:
http://beta.oinkba.com (both working A OK)
http://beta.oinkba.com/?t=news (on it's own - NO - rem stepcarousel.js and YES it works)

Is there a way to get around this conflict by using the oninit:function()

The s3Slider uses this init in the HEAD:

 jQuery(document).ready(function($) { 
		$("div#slider").s3Slider({
			timeOut: 6000
		});
	});

I've tried a few permutations but can't get it to work - any suggestions?

Regards
Huw

[zorag]

Any chance someone could help out with this please.. don't mind paying for your time..

Regards
Huw

[ddadmin]

Looking at the initialization code for Step Carousel on the later page, you have:

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:6000},
	panelbehavior: {speed:500, wraparound:true, persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

This assumes you have a DIV with ID "mygallery" on the page with the full markup of the Carousel contained. I don't see that DIV on your page, however...

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[zorag]

Thank you for your attention - appreciated! And our sincere apologies for the lack of credit notice on the beta site, this has now been included.

The home page with full markup "using StepCarousel and s3Slider" is using the mygallery DIV, this is the code for that instance:

<!-- Step Carousel -->
<div id="carousel-container">
 <div id="stepcarousel-bg">
  <div id="mygallery" class="stepcarousel">
   <div class="belt">
	{jr_ranking mode="artist" order="11" show="3" row_template="artists_carousel.tpl" require_image=$smarty.config.require_images}                                  		        					
   </div>
  </div>
 </div>

Actually, I've just got the s3Slider working on it's own on the News page by including <div id="mygallery"></div> just above the s3Slider code.

I have no problem leaving this in with a notice, however it would be good to ascertain why the mygallery DIV needs to be included, any thoughts or suggestions on this.

Best regards
Huw

[ddadmin]

I'm confused now actually- so on the news page, are you trying to display the slider within the Carousel Viewer? I wonder this because it seems you want to use the same markup for both:

<!-- Blog Slider (Uses StepCarousel id="mygallery") if on it's own -->
<div id="mygallery"></div>
 <div id="slider" align="left">
	<ul id="sliderContent">
	<li class="sliderImage">
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=36&row_template=news_page.tpl"><img src="http://beta.oinkba.com/image.php?mode=message_image&amp;band_id=0&amp;message_id=36&width=520&crop_height=350" width="520" height="350" alt="No pic" /></a>

	<span><div style="font-size: 14px; font-weight: bold; margin-bottom: 6px;">Latest 5</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=36&row_template=news_page.tpl">more</a>
	</span>
</li><li class="sliderImage">
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=35&row_template=news_page.tpl"><img src="http://beta.oinkba.com/image.php?mode=message_image&amp;band_id=0&amp;message_id=35&width=520&crop_height=350" width="520" height="350" alt="No pic" /></a>
	<span><div style="font-size: 14px; font-weight: bold; margin-bottom: 6px;">Latest 4</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=35&row_template=news_page.tpl">more</a>
	</span>

</li><li class="sliderImage">
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=34&row_template=news_page.tpl"><img src="http://beta.oinkba.com/image.php?mode=message_image&amp;band_id=0&amp;message_id=34&width=520&crop_height=350" width="520" height="350" alt="No pic" /></a>
	<span><div style="font-size: 14px; font-weight: bold; margin-bottom: 6px;">Latest 3</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=34&row_template=news_page.tpl">more</a>
	</span>
</li><li class="sliderImage">
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=31&row_template=news_page.tpl"><img src="http://beta.oinkba.com/image.php?mode=message_image&amp;band_id=0&amp;message_id=31&width=520&crop_height=350" width="520" height="350" alt="No pic" /></a>
	<span><div style="font-size: 14px; font-weight: bold; margin-bottom: 6px;">Latest 2</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=31&row_template=news_page.tpl">more</a>

	</span>
</li><li class="sliderImage">
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=28&row_template=news_page.tpl"><img src="http://beta.oinkba.com/image.php?mode=message_image&amp;band_id=0&amp;message_id=28&width=520&crop_height=350" width="520" height="350" alt="No pic" /></a>
	<span><div style="font-size: 14px; font-weight: bold; margin-bottom: 6px;">Latest 1</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
	<a href="http://beta.oinkba.com/ranking.php?mode=blog&message_id=28&row_template=news_page.tpl">more</a>
	</span>
</li>
	</ul>
      <div class="clear sliderImage"></div>

   </ul>
</div>

While the above carries the correct ID value of "mygallery", the DIVs inside do not have the correct CSS classes as defined in your Carousel's initialization code:

// For instructions how how to modify go to this URL
// http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:6000},
	panelbehavior: {speed:500, wraparound:true, persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

The structure of your markup also doesn't conform to that required by Step Carousel. At the moment is it catered to the Slider?

[zorag]

No we need the s3Slider on it's own on the News page, if we remove the mygallery DIV above the s3Slider CSS on that page:

<div id="mygallery"></div>

The s3Slider does NOT work on it's own - unless we also remove the stepcarousel.js instance. So, there must be a JS code conflict somewhere relating to the mygallery CSS.

Thanks
Huw