SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Cannot remove fullscreen image after make it displayed

    I've an image that I want to toggle between full screen and its original size as the code below:
    HTML
    Code:
    <img id='fullscreen_image' src='' /> <!-- I place it on top of everything -->
    JS
    Code:
    var full = document.getElementById("fullscreen_image");
    var origin = document.getElementById("origin");
    
    function fullscreenImage(){
    	full.style.position = 'absolute';
    	full.style.display = 'block';
    	full.width = window.innerHeight;
    	full.height = window.innerWidth;
    	full.src = 'original.png';
    }
    function removeFullscreenImage(){ 
    	full.style.display = 'none';
    }
    
    origin.addEventListener('click', fullscreenImage, false);
    full.addEventListener('click', removeFullscreenImage, false);
    I want the fullscreen being removed when I click on it, especially on Chrome.
    Thank you,

  2. #2
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Edit: the codes work properly. But the block below doesn't work.
    Code:
    function fullscreenImage(){
    	full.style.position = 'absolute';
    	full.style.display = 'block';
    	full.width = window.innerHeight;
    	full.height = window.innerWidth;
    	full.src = 'imageData';
            requestAnimationFrame(fullscreenImage);
    }
    In this case I display animation images grabbing from a canvas.


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
  •