Solved

Pause Jquery Cycle when Fancybox opened

Posted on 2010-09-03
3
1,500 Views
Last Modified: 2012-05-10
Hi,

I have a little issue with my site that I cannot solve. you can see the issue at conceptparadise.com/dm The problem is that when I open a flash animation in fancybox over the top of jquery cycle, the flash animation stahhers when the banners in the background rotate.

What I am trying to do and failing at it pausing the cycle plugin when the fancybox is opened and then resuming the cycle plugin once fancybox is closed.

I have attached the two example of code that I have at the moment and where i have got to. What I am going is probably wrong!!!

I would really appreciate any help that anyone could give me as I am going crazy with this..

Thank you in advance
<!-- Banner Rotator -->    
 <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(function() {
    $('#s3').cycle({fx: 'fade',speed: 1500 });
});
/*
$('#pauseButton').click(function() { 
    $('#s3').cycle('pause'); 
});
$('#resumeButton').click(function() { 
    $('#s3').cycle('resume', true); 
});
*/
$('#fancybox-wrap').show('slow', function() {
	alert('fancybox show');
    $('#s3').cycle('pause'); 
});
$('#fancybox-wrap').hide('slow', function() { 
    $('#s3').cycle('resume', true); 
});
</script>


<!-- Example of Fancybox call -->

$("#Dentiframe4buttons1").fancybox({
				'width':700, 
				'height':405,		
				'type':'iframe', 
				'autoScale':'false' 
			});

Open in new window

0
Comment
Question by:flashjordan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33602312
like this....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Fancybox Jquery Cycle Combined</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://fancybox.net/js/fancybox/jquery.easing-1.3.pack.js"></script>
	<script type="text/javascript" src="http://fancybox.net/js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="http://fancybox.net/js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
	<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>

	<link rel="stylesheet" href="http://fancybox.net/js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
	
	<script type="text/javascript">
		$(document).ready(function() {

			$("#various6").fancybox({
				'width':700, 
				'height':405,		
				'type':'iframe', 
				'autoScale':'false',
				'onStart': pauseCycle,
				'onClosed': resumeCycle				
			});
			
			$('#s6').cycle({ 
				fx:    'fade', 
				speed:  2500 
			 })
			
		});
	
		function pauseCycle(){
			$('#s6').cycle('pause');
		}
		function resumeCycle(){
			$('#s6').cycle('resume'); 
		}
	</script>
	<style type="text/css">
		.pics {  
			height:  232px;  
			width:   232px;  
			padding: 0;  
			margin:  0;  
		} 
		 
		.pics img {  
			padding: 15px;  
			border:  1px solid #ccc;  
			background-color: #eee;  
			width:  200px; 
			height: 200px; 
			top:  0; 
			left: 0 
		} 
	</style>
</head>
<body>
<div id="s6"class="pics"> 
    <img src="http://www.topnews.in/files/GoogleCL.jpg" width="200" height="200" /> 
    <img src="http://cdn.lastclicknews.com/wp-content/uploads/2010/04/Bing-Logo.jpg" width="200" height="200" /> 
    <img src="http://nfsmi-web01.nfsmi.olemiss.edu/adobe-logo.jpg" width="200" height="200" /> 
</div> 
<ul>
	<li><a id="various6" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a></li>
</ul>
</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:flashjordan
ID: 33602825
That is amazing, if I could give you more points I would as you have solved somethi9ng that has been causing me nightmares... Thank you so much!!!
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33602878
Thank you :)
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question