2 Cycle Galleries, One Page
Posted: Wed Jan 08, 2020 4:26 pm
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?
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);
};
});