Iframe issue to view full page

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

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.

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

---

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

Looks like it's now working right. Let me know if there are any problems or questions.