MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

MMM-ImagesPhotos hide black screen between images

  • I am building a digital photo frame, large (cheaper that buying one). anyhow, using a linked folder to my linux box with a samba server…

    all is good, except, between images there is a big black screen… is there a way (with the html approach) to hide the image transition?

    I know in one of my modules, I had to write code to wait for the image load completed before showing the image, but I am writing directly to electron apis

    my config

    	module: "MMM-ImagesPhotos",
    	position: "middle_center",
    	config: {
    		opacity: 0.9,
    		animationSpeed: 500,
    		updateInterval: 20000,

  • well, i found a solution…

    I modified the ImagePhotos.js to

    • create the div once. instead of each time. this reduces the flash.

    • added an onload handler for the image in the div., start with the image hidden

    • the onload handler changes the just loaded image to the required opacity and transitions this over 1.25 seconds.
      also getting current image size, and size of screen and adjusting to not clip or zoom

    • it then checks to see if there is more than ONE image in the div
      (current and just loaded)…
      if so, it hides the old image, and then deletes that image from the div.

    repeat for next image.

Log in to reply