Iframe issue to view full page

**asarker@eircom.ie** · 11-30-2017, 05:19 PM

Hi there,
Hope all of you doing well. I am having issue with Java script. It is an iframe issue. I put a page in another page as an Iframe. It is a kind of gallery. But when click to enter full screen it shows within the page. As a result it does not show full picture. Can any one please help me on this issue to resolve.

Not sure if this is useful code.

Code:

// Load the classic theme
    Galleria.loadTheme('galleria.twelve.min.js');
    
    
    // Initialize Galleria
    $('#galleria').galleria({
    
	    // Toggles the fullscreen button
	    _showFullscreen: true,
	
	    // Toggles the lightbox button
	    _showPopout: false,
	
	    // Toggles the progress bar when playing a slideshow
	    _showProgress: true,
	
	    // Toggles tooltip
	    _showTooltip: true,
	
	    // Localized strings, modify these if you want tooltips in your language
	    _locale: {
	        show_thumbnails: "Show Thumbnails",
	        hide_thumbnails: "Hide Thumbnails",
	        play: "Play",
	        pause: "Pause",
	      	enter_fullscreen: "Enter Fullscreen",
	        exit_fullscreen: "ExitFullscreen",
	        popout_image: "Popout image",
	        showing_image: "Image %s sur %s"
	    }
	});

    </script>

Site : http://irelandawamileague.com/new_demo/demo/ActivitiesPages/15thAug_2016.php

**jscheuer1** · 12-01-2017, 02:01 PM

Add this (highlighted) to your script as shown:

Code:

    <script>

    // Load the classic theme
    Galleria.loadTheme('galleria.twelve.min.js');
    
    
    // Initialize Galleria
    $('#galleria').galleria({
    
	    // Toggles the fullscreen button
	    _showFullscreen: true,
	
	    // Toggles the lightbox button
	    _showPopout: false,
	
	    // Toggles the progress bar when playing a slideshow
	    _showProgress: true,
	
	    // Toggles tooltip
	    _showTooltip: true,
	
	    // Localized strings, modify these if you want tooltips in your language
	    _locale: {
	        show_thumbnails: "Show Thumbnails",
	        hide_thumbnails: "Hide Thumbnails",
	        play: "Play",
	        pause: "Pause",
	      	enter_fullscreen: "Enter Fullscreen",
	        exit_fullscreen: "ExitFullscreen",
	        popout_image: "Popout image",
	        showing_image: "Image %s sur %s"
	    }
	});

if(window.location.href !== top.location.href){
	(function(){
		var topdoc = top.window.document, topiframe = topdoc.getElementsByName('iframe1')[0].style;
		$('body').on('click', '.galleria-fullscreen', function(){
			if($(this).parents('.galleria-container').eq(0).hasClass('fullscreen')){
				topdoc.documentElement.style.overflow = 'hidden';
				topiframe.height = '100%';
				topiframe.width = '100%';
				topiframe.position = 'fixed';
				topiframe.top = 0;
				topiframe.left = 0;
			} else {
				top.location.href = widow.location.href;
				topdoc.documentElement.style.overflow = '';
				topiframe.height = '';
				topiframe.width = '';
				topiframe.position = '';
				topiframe.top = '';
				topiframe.left = '';
			}
		});
	})();
}

</script>

I tested this as much as I could using the console, but if there are any problems or questions, just let me know.

The browser cache may have to be cleared and/or the page(s) (probably both of them, top and in the iframe one) refreshed to see changes.

Note: don't copy code from email notifications it could be corrupted.

**jscheuer1** · 12-02-2017, 05:02 PM

OK, I see that sort of worked. But I made a typo (left in some earlier code that didn't belong) and I see now that we also need to add a timeout. Replace what I just gave you with this:

Code:

if(window.location.href !== top.location.href){
	(function(){
		var topdoc = top.window.document, topiframe = topdoc.getElementsByName('iframe1')[0].style;
		$('body').on('click', '.galleria-fullscreen', function(){
			var $t = $(this);
			setTimeout(function(){
				if($t.parents('.galleria-container').eq(0).hasClass('fullscreen')){
					topdoc.documentElement.style.overflow = 'hidden';
					topiframe.height = '100%';
					topiframe.width = '100%';
					topiframe.position = 'fixed';
					topiframe.top = 0;
					topiframe.left = 0;
				} else {
					topdoc.documentElement.style.overflow = '';
					topiframe.height = '';
					topiframe.width = '';
					topiframe.position = '';
					topiframe.top = '';
					topiframe.left = '';
			}}, 300);
		});
	})();
}

**asarker@eircom.ie** · 12-04-2017, 01:55 PM

Hi John,
thanks very much I also found that issue that it didnot come to the main page after exit of full screen. Let me check this out. I will get back to you.

Thanks