2 Cycle Galleries, One Page

[oakstreet]

I am trying to do a before and after of 2 cycle galleries on one page.
Here is what I have tried:
1. added the two galleries {Gallery dir='416before'}{Gallery dir='416after'} using same cycle code
2. added the two galleries {Gallery dir='416before'}{Gallery dir='416after'} 2 separate templates, omitting the jquery in the send cycle code
3. adding the two galleries in a cms template to separate, still the after gallery wont rotate...like the javascript is broken.
for the second cycle template I removed the last code section. Suggestions?

Code: Select all

{* note that the thumbs are shown in stead of the original images, just to make sure all images are of the same size due to the crop image-resize option *}
<div id="slides" style=" margin:auto;width:315px; height:420px;">
{foreach from=$images item=image}
	{if !$image->isdir}
		<img src="{$image->thumb}" alt="{$image->titlename}" />
	{/if}
{/foreach}
</div>

Code: Select all

/* height and width should be the same as the thumbnail sizes */
#slides {
  max-width: 315px;
  height: 475px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}

Code: Select all

<__script__ type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></__script>
<__script__ type="text/javascript" src="{$gallery_module_root}/templates/cycle/jquery.cycle.lite.js"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
	$('#slides').cycle({ 
		delay:  2000, 
		speed: 500,
		before: onBefore
	});

	function onBefore() {
		$('#caption').html(this.alt);
	};
});

[DIGI3]

Looks like you'd need to give each gallery a unique ID, then either call the script twice or have it apply to both ID's. CSS requires that all IDs be unique, unlike classes.

[oakstreet]

That is exactly what I wound up doing and it fixed it. Thank you!