Random Quote Generator background image on button push

I am using Unsplash Source for background images for my random quote machine. I am aware that you can use /random to randomize the image with button push; however, I was hoping to pull a random photo from a specific collection only. I cannot seem to get this to work. I know that I could pick the pictures that I want and use JSON and Math.random(), but I was hoping there was a way to use it with Unsplash Source. If anyone has any idea how this might work, please let me know! Thanks!

Here’s a link to my code:
http://codepen.io/snsimpson1202/pen/EWEKBw

Here is a link to the specific collection I would like to use:

Here’s a link to unsplash source:

Also, the photo seems to be caching the image because a new image loads when the page is refreshed.

OK, first of all, I am no expert - still learning front end stuff.

That being said, this is more difficult than I expected. At first I thought it would be as easy as sending a url like “https://source.unsplash.com/category/food” to get food category pictures, the site returning a url to a random photo in that categoy. The problem (as I understand it) is that your browser sees that you are sending the same url and just uses it’s cached version, so we never get to see the new random url the site would return. There are various tricks to trick the browser into reloading, usually by appending a unique string to the url, but that seemed to always screw up the url or not work. So, I came up this to get the page to reload:

window.location.href=window.location.href;

That seems to force the page to reload and get the url again. (“location.reload();” was supposed to work too, but it seems that codepen blocks it.

My code is:

<img style = 'width: 100%' src = 'https://source.unsplash.com/category/food' alt = 'random food photo from unsplash.com'>

and:

$(document).ready(function() {
	setInterval( function(){ 
		window.location.href=window.location.href;
	}, 3000);
});

That gets an image that changes every 3 seconds.

If you want more control than that, then you’re going to have to figure out the api which I think involves creating an account with them to get an ID.

Good luck,
Kevin

I’ve found that that works, but I was hoping that there would be something different as that doesn’t seem like the best route. I may just go ahead and make an array with specific photos!

Thank you, I appreciate you taking the time to let me know about that!

Kevin is right. Right now you have declared the background image to be “prettyimage.jpg” on page load. Giving you a nice pretty image. Your function then tells the browser to change that particular property to “prettyimage.jpg,” since it is the same value nothing changes. An easy workaround would be to have two different image collections and toggle between them. Also, you can remove the “obj” from your “changImage” function as you aren’t passing that to anything within your function. You can also remove the css background size from that function as it is already declared in your CSS.

I had a sample almost ready to go in codepen but it crashed and I lost all my changes :frowning:

Good luck!

Well, I wanted the to use the same collection, which would be the same URL, but was hoping that I could use something like Math.random() to pull random images from that specific collection. I don’t know that that is possible without the fully functional API, if it is even then. I know that Math.random() pics a random number dependent on the parameters given and that can correspond with the picture, but the specific picture’s URL is a mix of letters and numbers, so I’m not sure that would work. However, Idk if they are possibly in an array or JSON on Unsplash itself.

If you are tied specifically to that image set you could create an array with all the urls of the individual images and then pick one with Math.random(). Don’t forget to limit the number range to the length of the array. It’s not a very elegant approach, but it should work.