EvoGallery and jQuery cycle: Synchronisation problem

- 793 Posts
ottogal Reply #1, 15 years, 8 months ago
Hi all!

I use [tt]EvoGallery[/tt] to create a page of thumbnails for each of my galleries and a single Image Page to show the big images on.

The Image Page contains a [tt]div#EG_img[/tt] to diplay the big image and another [tt]div#EG_info[/tt] to show details of the image like title and description.

To transfer the image details of the clicked thumb from the thumbnails page to the Image Page (which has ID = 72) I use a URL parameter [tt]picDataString[/tt] : The link of a thumb is
```
<a href="[~72~]?picDataString=[+content_id+]~[+id+]~[+filename+]~[+title+]~[+description+]"><img src="[+thumbs_dir+][+filename+]" alt="[+title+]" title="[+title+] ~ [+description+]" /></a>
```
On the Image Page I get the details back through a few small snippets (analyzing the [tt]picDataString[/tt] ), f.i. a snippet [tt]getPicFolder[/tt] which retreives the [tt]content_id[/tt] of the picture).

Now I wanted to have a cycling slideshow on the Image Page, starting with the image the user clicked the thumb of.

I managed to write a snippet [tt]getStartingSlide[/tt] to get the correct starting point.

In the [tt]<head>[/tt] section of the template for the Image Page I have this script:
```
<script type="text/javascript">
$(document).ready(function() {
	  $startS = [!getStartingSlide!];

	  $('#EG_img').cycle({
		fx: 'fade',
		speed: 200,
		timeout: 6000,
		startingSlide: $startS
	  });

	  $('#EG_info').cycle({
		fx: 'fade',
		speed: 200,
		timeout: 6000,
		startingSlide: $startS
	  });	  
});
</script>
```
The EvoGallery call for the image is this:
```
[!EvoGallery? &docId=`[[getPicFolder]]` &display=`images` &type=`jquery-cycle` &tpl=`tpl_EG_img_cycle` &itemTpl=`tpl_EG_img_item` &sortBy=`filename` !]
```
Here the templates are
[tt]tpl_EG_img_cycle:
<div id="EG_img" class="EG_img">[+items+]</div>[/tt]
and
[tt]tpl_EG_img_item:
<img src="assets/galleries/[+content_id+]/[+filename+]" alt="[+title+]" title="[+title+] ~ [+description+]" />[/tt]

The EvoGallery call for the details is this:
```
!EvoGallery? &docId=`[[getPicFolder]]` &display=`images` &type=`jquery-cycle` &tpl=`tpl_EG_info_cycle` &itemTpl=`tpl_EG_info_item` &sortBy=`filename` !]
```
Here the templates are
[tt]tpl_EG_info_cycle:
<div id="EG_info" class="EG_info">[+items+]</div>[/tt]
and
[tt]tpl_EG_info_item:
<div><h6>[+title+]</h6><p>[+description+]</p></div>[/tt]

All works great so far.

But now I would like to use the option [tt]pause: 1[/tt] in the cycles which stops the slideshow as long as the mouse is over the respective div block.

The problem is obvious: Only that one cycle the mouse is over will stop - the other one continues cycling, and all gets immediately out of synchronisation.

So my question is: Is there any way to let both of the cycles stop and start synchronousely?

Any help is much appreciated!
ottogal