PDA

View Full Version : 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.



// 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:



<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:


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

jscheuer1
12-04-2017, 03:22 PM
Looks like it's now working right. Let me know if there are any problems or questions.