Gallery is not showing in Full Screen

[asarker@eircom.ie]

Hi All,
I have an issue with one of my website page where I attached two pages with iframe. In a single page my gallery shows in full screen when I enter full screen.

But I attached two pages with iframe the "Enter Full Screen" of gallery doesnot work.

Now this was sorted by jscheuer1 before but recently I have used some updated version of .js which casued me blocking me to enter full screen.

This is the link where I used iframe to attached two pages..

http://irelandawamileague.com/new_de..._Done_2017.php


Heres the code of Java Script currently I have

<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(){
			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);
		});
	})();
}

</script>

Please help me on this.

Thanks

[jscheuer1]

I had taken a quick look at this around the time you first posted it and everything was as you said it was. Right now, however, I don't see the gallery anywhere on the page you linked to. Can't fix something that's not there.

But the code I gave you should be completely insulated from other javascript, so perhaps that's not the problem. Did you change the name of the iframe, or take away it's name, or name another one on the page the same as it?

[asarker@eircom.ie]

Hi jscheuer1,
the gallery is there on that linked page.
Here's the link again. You will find it end of this page.
http://irelandawamileague.com/new_de..._Done_2017.php

I havent change anything. It was the same as it is now. but this stopped working with updated version of css and .js

[jscheuer1]

Oh I see it, it was hidden by the cute scrollbar. It's getting a cross domain violation. If there really is no cross domain issue, this often happens when one page is www. whatever and the other doesn't include the www part. Or it can happen when one page is https and the other http. But as far as I can tell, neither of those are the problem. But I might have missed it. Still I think it's something else. Did you update the galleria script or change its initialization? You did say you updated something, what was it that you updated? You may have to revert that. Possibly though, you might be able to get your own copy of it. See, if the updated script is on another domain, that might be what's causing the violation.

[asarker@eircom.ie]

Hi jscheuer1,
See, these were updated to play video on this galleria, specially this one
http://irelandawamileague.com/new_de...a-1.3.5.min.js

also Updated vs are
http://irelandawamileague.com/new_de....twelve.min.js

and the last one is the css
http://irelandawamileague.com/new_de...ria.twelve.css

but what I believe it is the galleria-1.3.5.min.js which is casuing such issue.

This galleria is good where you can play image and videos

thses issues I found when I inspect the page in chrome.

[jscheuer1]

Yes, I saw those too. There's no cross origin issue with the code I gave you. Both pages are on the same domain. I was thinking that perhaps a video in the slideshow has an iframe from another domain. But that would likely mean that it wouldn't go fullscreen even without your iframe. But there are so many layers of code and things happening, the browser may and/or the code (the other code, I don't think mine would cause that*) may be overreacting. Let me check the page by itself. It works fine. What I would suggest is putting it on the page where you want it instead of using an iframe. Then you wouldn't need my code, and whatever the problem is with your iframe should go away.

*one way to test would be to remove my code and see if the error goes away. I know the slideshow will likely no longer go fullscreen on the top page, but it might. That might be part of the problem. It may be duplicating what you and I worked out.

Still the best way to fix this is to put the slideshow on the top page. If you tried that before, and there were conflicts, those should be easier to figure out than where this cross domain issue is coming from.

[asarker@eircom.ie]

Hi jscheuer1,
As you advised I tried to do that removing your codes but that didnt work. but it works on full screen if I put the gallery on the top of the page. Please find below link.

http://www.irelandawamileague.com/ne...g-Daytest.html

I am also trying to figure it out why its showing cross browser violation? I have removed those video links and tried with only pictures when I used gallery with Iframe, but that didnt work. This is kinda strange..

[jscheuer1]

It's not called a cross browser violation, it's a cross domain violation. This can happen sometimes when it's not warranted. It's meant to prevent javascript code from one domain from affecting a page on another domain, it's also meant to prevent AJAX from acquiring content from one domain and displaying it on another. This second thing can be overridden with the appropriate header (basically either giving the other domain, or all domains, depending upon the header, permission to fetch the content), but I don't think that's the issue here, at least not from the error we are seeing. As I already mentioned sometimes we see this error even on the same domain when one page uses www in its address and the other does not, or when one page uses https and the other does not. But again, I don't see that happening here.

I think that this is something different, something I haven't seen before. I think that somehow the updated code was mistaking your top page for the page with the gallery on it and then tried to communicate down the chain of iframes from there. Vimeo uses iframes, at least sometimes, so once the updated code started looking for them it also tried to 'talk' to that one, which definitely is on a different domain. If I'm right, or if it's anything like that, then the choices are:

1.) Put up with it and don't allow the gallery to go fullscreen
2.) Debug or have someone debug the updated code
3.) Revert to the previous code
4.) Put the gallery on the top page.

#2 really should be done by the folks writing the code or someone with more time and patience than I have for wading through what appears to be a very complicated glitch. You can easily choose any of the others, but I think #4 is best. We know it works, now we just have to figure out how to do it without messing up your layout or creating any conflicts on that top page.

[asarker@eircom.ie]

Hi Jscheuer1,
Thanks very much for all the effots that you have made. You are right, this is a cross domain violation and looks like it wont be possible to sorted this time. I had sopken to few my collegues and agreed to keep the gallery as it is now despite of not going in full screen. To put the gallery on top page will be another hassle and it wont looks good. So I have decided on your option-1. I will still search for solution though.Thanks again.

[jscheuer1]

Two things you might try, and I have no idea if they will help or not would be:

Get rid of the canonical link from the page in the iframe (near the beginning):

       <link rel="canonical" href="https://vimeo.com/25750735">

This shouldn't be needed, and might somehow be the cause or contributing to it.

The other thing would be to host your own copy of jQuery and use it instead of (also near the beginning of the page in the iframe):

        <!-- load jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

to do that, download that version of jQuery, put it in the same folder as the iframe, and change the above to:

        <!-- load jQuery -->
        <script src="jquery.js"></script>

Use whatever name you saved your copy of jQuery as.

The cache will have to be emptied and the page in the iframe should be refreshed to see changes.