Image Galery

[zombi27]

@Mephiston2K : haha, that’s a good one :D this would be great with 3D tracking via camera ;)

[nuckinfutz]

I’m interested in doing something similar but with random video files

[Woody]

With the origin MM version 1.0 I realized this with Scott Robbins jquery plugin ‘Backstretch’. This was realy simple to integrate and has satisfied my demands. Unfortunately I couldn’t get it running with the new MM version 2.0. Maybe someone with a higher skill level than myself may succeed. http://srobbin.com/jquery-plugins/backstretch/

[mikenewhouse]

Bump, would love the Flickr API worked in. I have it working on DAKBoard but would like to use M2

[Jeff]

Is it important that it’s flickr?
I’m using my picture frame with instagram. I created a new instagram acc, registered as a dev and received the API.
The new instagram account is made private, so it’s just possible for me to see the pictures.
Works perfect!
I used this this modul:
https://github.com/kapsolas/MMM-Instagram

[fragator]

@Jeff
I did exactly the same thing as you,
And it works perfectly well.
J adds, or removes pictures as I wish.
I would like to succeed to change the size of the photos on the mirror, what you do ???

[Jeff]

@fragator
I thought that would be a quick thing ;)
But I can’t find the right parameters neigther…

I was looking at

 getStyles: function() {
        return ['instagram.css', 'font-awesome.css'];

but can’t find font-awesome.css. Maybe just a file the creator forgot to delete.

The pictures are smaller in the mirror, than they are on instagram.
So there must be a parameter somewhere.

I’ll keep searching for them or try to add some.

We should go to the original thread for this modul:
https://forum.magicmirror.builders/topic/396/mmm-instagram-pull-and-animate-photos-from-instagram-feed

[Jeff]

Take this one :)
https://github.com/jeffjoe/MMM-Instagram

Or just change in the config.js:

{
    module: 'MMM-Instagram',
    position: 'top_right',
    config: {
        access_token: '......',
        count: 200,  
        min_timestamp: 0,
        animationSpeed: 5500,
        updateInterval: 12500,
        instaMaxWidth: '20%', // Optional parameter, can be relative (percentage) or absolute (px)
        instaMaxHeight: '' // Optional parameter, can be absolute only (px)
    }
},

and in the MMM-instagram.js use this

// set the first item in the list...
        if (this.activeItem >= this.images.photo.length) {
            this.activeItem = 0;
        }
        
        var tempimage = this.images.photo[this.activeItem];
        
        // image       
	//imageLink.innerHTML = "<img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>";
        

        var imageWrapper = document.createElement("img");
	    imageWrapper.src = tempimage.photolink;
	    imageWrapper.id = "MMM-Instagram-image";
	    imageWrapper.style.maxWidth = this.config.instaMaxWidth;
	    imageWrapper.style.maxHeight = this.config.instaMaxHeight;
	    imageDisplay.appendChild(imageWrapper);
        

	wrapper.appendChild(imageDisplay);
       
        return wrapper;
    },

and for using the css file use:

#MMM-Instagram-image {
    }

e.g.:

#MMM-Instagram-image {
    -webkit-filter: invert(1);
    filter: invert(1);
}

[strawberry 3.141]

@Jeff the font-awesome.css is located in the vendor directory of MagicMirror

[fragator]

@Jeff
I tried the method, it does not always work. He must have a simpler method to enlarge these photos on the mirror.