I've got the fancybox module installed and I need to incorporate the elements to work inside it.

http://drupal.org/project/fancybox

The bulk of the site is to be viewed via the fancybox, but I am not sure if there is a jquery conflict going on, also when I try and call the gmap panel containing the google map, the page kind of refreshes and nothing happens?

Please any thoughts, suggestions would be welcome.

Comments

zeezack’s picture

has anyone had problems with fancybox like this?

zeezack’s picture

Has anyone here, used fancybox and tried to force the content into it, including jquery and google maps. Can anyone tell me what I should do to try and accomplish this.

zeezack’s picture

Please can anyone help me with this. Does anyone here want to help and earn some cash to resolve this problem?

digger3d’s picture

If you put the whole drupal site into a fancybox box, then you'll have a box waiting for quite a while, probably because fancybox will parse html, removing all screwing tags... or probably it will load all the JS files again... so if you want simple text content - make a php file which just prints a node contents without any formatting/javascript.... something like this:

print($node);

not exactly this, but the idea is reflected here....

zeezack’s picture

I think the problem is that the javascript does not get loaded in the fancybox. Is there a way of getting it integrated on a startup callback?

WillHall’s picture

You have to initiate it inside of a domfunction and add the overlayShow option

<script type="text/javascript">
jQuery(function() {
 jQuery('#yourwrapper').fancybox({overlayShow: true})
});
</script>

overlayShow will cause the fancybox to automatically open on pageload.

Check the API for more info
http://fancybox.net/api

What you are trying to do may be better suited with colorbox.

zeezack’s picture

My problem is that jquery won't work INSIDE the fancybox. I can not get the accordion view to work inside fancybox. I can not get googlemaps to work either.

zeezack’s picture

My code inside page.tpl.php is as follows

  <?php print $scripts; ?>

	<script type="text/javascript">
	
function initJQuery() {
		/*$.getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', function() {
		  alert('Load jquery.min.js was performed.');
		});
		$.getScript('http://localhost/salon_tao/tao/sites/all/modules/contributed/views_accordion/views-accordion.js', function() {
		  alert('Load views-accordion.js was performed.');
		});
*/

$.ajax({
   type: "GET",
   url: "http://localhost/salon_tao/tao/sites/all/modules/contributed/views_accordion/views-accordion.js",
   dataType: "script"
 });
 
			$('.views-field-title').live('click', function(){
					alert("jquery works");
			});	
			//accordion test
}
	
		$(document).ready(function() {
			/*
				For all links in lightbox nav, load target into lightbox
			*/
			$('.pager-next a').live('click', function(){
					$('#fancybox-inner').load($(this).attr('href'));
					return false;
			});
			
			$('.pager-previous a').live('click', function(){
					$('#fancybox-inner').load($(this).attr('href'));
					return false;
			});		
		
			function myStartFunction() { 
				//alert('fancy box opened');
				initJQuery();
			}
		
			function myCompleteFunction() { 
				//alert('fancy box opened');
				$("#header-blocks").css({color: '#ffffff' });
				$(".views-field-title ").css({color: '#ffffff' });					
			}

			function myCleanupFunction() { 
				//alert('fancy box opened');
				$("#header-blocks").css({color: '#000000' });
			}
					
			$(".jqueryfancy").fancybox({
				'onStart' : myStartFunction,
				'onComplete': myCompleteFunction,
				'onCleanup': myCleanupFunction
			});
			
			/*
			$(".links li:last-child a").fancybox({
				'onComplete': myCompleteFunction,
				'onCleanup': myCleanupFunction,
				'type' : 'iframe'
			});*/
		});
		
			function myTest() { 
				alert('Handler for .click() called.');
			}		
    </script>

- the fancybox works fine with the menu links with a class of jqueryfancy... this is the nahme of the selector I have assigned.

however it borks on trying to load google maps and the accordion menu view fails to become a jquery accordion when inside the fancy box...

what is going wrong?

zeezack’s picture

This is the site in question. If you open up the menu, the fancybox will open. It fails on the last two links,... google map and view accordion.the only way to fix this is to create the google map as an iframe.