Results 1 to 5 of 5

Thread: Iframe issue to view full page

  1. #1
    Join Date
    Oct 2017
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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
    Last edited by jscheuer1; 12-01-2017 at 01:55 PM. Reason: format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Oct 2017
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. DHTML Window widget (v1.1) - Full Page Iframe?
    By nando99 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-22-2009, 03:12 PM
  2. Lightbox V2.03 - Full Screen View
    By barrett01535 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-07-2007, 06:01 AM
  3. iFrame SSI II script issue - page up and page down
    By jameseoeo in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-07-2007, 10:45 PM
  4. Full Screen Fade In Issue
    By tomyknoker in forum Flash
    Replies: 4
    Last Post: 07-06-2007, 06:08 AM
  5. Replies: 0
    Last Post: 06-16-2005, 03:16 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •