Cycle through 8 images, change every 4 days

[Boy_Wonder]

So I'm basically looking for a code that will change an image every 4 days over a 32 day period, with the image looping back to the original one. This will be used for changing a moon phase for a roleplay that the moon phase changes every 4 days

Any help would be great

[Chris]

Is that four literal days or four roleplay days?
Is the image supposed to be located in a specific area and if so where?
Is this on a forum with other codes or plugins that might cause a conflict?
Is this a forum with a custom theme that might cause a conflict?
Is this a forum with an actual url so it can be inspected for other potential conflicts?
Am I overusing the word "conflict"?


First rule of coding requests: never start coding without a forum url, you'll end up wasting a great deal of time making something that doesn't work for the mystery forum

(function cycle_images(image_array, change_frequency, start_timestamp, result){
const _now = +new Date;
const _last = localStorage[start_timestamp + "_time"] || start_timestamp;
let $result = null;

if(_now - start_timestamp > change_frequency){
localStorage[start_timestamp + "_time"] = _now;

if(change_frequency < 30 * 60 * 60 * 1000) setTimeout(cycle_images.bind(this, image_array, change_frequency, start_timestamp, result),change_frequency)
if("function" === typeof result){
return result(image_array[((_now - start_timestamp)/change_frequency)%image_array.length>>0]);
}else{
try{
$result = $(result)
if($result.parent().length)
return $result.html("").append($('<img>',{src:image_array[((_now - start_timestamp)/change_frequency)%image_array.length>>0]}));
}catch{
return result.replace(/%img%/gi,image_array[((_now - start_timestamp)/change_frequency)%image_array.length>>0])
}
}
}
return null;
})([
'http://storage.proboards.com/1/avatar/JrYsJkFBfpfDUWlFQZVO.png',
'http://storage.proboards.com/1/avatar/91jduW6HWqPjPk_0saZx.jpg',
'http://storage.proboards.com/1/avatar/2I0YWTxATBxvLBShcsNV.jpg',
'http://storage.proboards.com/1/avatar/DETjGekzIBykcJuhrlOC.png',
'http://storage.proboards.com/1/avatar/dSHR0mfJDrXZuSBSApGH.png',
'http://storage.proboards.com/forum/images/defaultavatar.png',
'http://storage.proboards.com/1/avatar/vgYkPPwYqSQVeznHGanS.jpg',
'http://storage.proboards.com/1/avatar/MmyMFVPoRUBvXPiXEYPf.jpg'
],
345600000,
1358225775000,
'.container.legend td:last-of-type')

[Boy_Wonder]

It's four literal days - it's going to sit in a location currently indicated with just an image

sonderffxiv.proboards.com/

(Where currently there's just a new moon image) - it is using a custom theme but I've tried to make it as bug free as possible and as conflict free as possible

[Chris]

<script> /* Install in GLOBAL FOOTER */
(function cycle_images(image_array, change_frequency, start_timestamp, result){
	const _now = +new Date;
	const _last = localStorage[start_timestamp + "_time"] || start_timestamp;
	
	window.cycle_images = function (){ return cycle_images.apply(null, arguments)};  /* set global ref */
	
	if(_now - start_timestamp > change_frequency){
	
		let next_image_url = image_array[((_now - start_timestamp)/change_frequency)%image_array.length>>0];
		
		
		localStorage[start_timestamp + "_time"] = _now;
		
		if(change_frequency < 30 * 60 * 60 * 1000) setTimeout(cycle_images.bind(this, image_array, change_frequency, start_timestamp, result),change_frequency)
		
		if("function" === typeof result){ 
			return result(next_image_url);
		}else{
			try{
				let $result = $(result)
				if($result.parent().length) /* part of DOM (preexisting) */
					return $result[0].hasAttribute("src") ? ($result.attr({src:next_image_url}), $result) : $result.html("").append($('<img>',{src:next_image_url}));
				else
					return $result.attr({src:next_image_url})
				
			}catch{
				return result.replace(/%img%/gi,next_image_url)
			}
		}
	}
	return null;
})([
	'http://storage.proboards.com/1/avatar/JrYsJkFBfpfDUWlFQZVO.png',
	'http://storage.proboards.com/1/avatar/91jduW6HWqPjPk_0saZx.jpg',
	'http://storage.proboards.com/1/avatar/2I0YWTxATBxvLBShcsNV.jpg',
	'http://storage.proboards.com/1/avatar/DETjGekzIBykcJuhrlOC.png',
	'http://storage.proboards.com/1/avatar/dSHR0mfJDrXZuSBSApGH.png',
	'http://storage.proboards.com/forum/images/defaultavatar.png',
	'http://storage.proboards.com/1/avatar/vgYkPPwYqSQVeznHGanS.jpg',
	'http://storage.proboards.com/1/avatar/MmyMFVPoRUBvXPiXEYPf.jpg'
], 
345600000, 
1358225775000, 
'#top-section .container.full-width h2 .title_wrapper img')
</script>

This code defines a function that takes 4 parameters

1. image_array
   The list of image URLs that are to be used as the pool source, in this example a random number of Proboards hosted avatars were chosen from this forum to come up with eight images
   
   
2. change_frequency
   The number of milliseconds desired between changes to the image, in this case 4 days equals 345600000 milliseconds
   
   
3. 1358225775000
   The unix epoch start date, used as an anchor date so the code can then make calculations relative to that date to decide which image is next. In this example the arbitrary date chosen was Jan 14, 2013 but has no bearing on the function other than the specific url returned based on what date and time it is now relative to that particular start date.
   
   
4. result
   A selector, template string (not es6) or a callback function that gets passed the results of the calculation. If this is a selector then it should refer to the targeted image or the immediate parent wrapper for that image which will be emptied and refilled with a new image. If it is a template string (perhaps you want to output a bbcode representation of the image) then use the %img% placeholder to have the function fill in the calculated image url. If it is a callback function then the passed in function will be called back with the calculated image url as the single parameter to do with whatever it wishes.
   
   

Notes, Disclaimers, Caveats and Behavioral Analysis

• The code is engineered to show a specific image to all within a specific time frame given a common start date. If someone last saw image 3 and stayed away for some length of time they should be seeing image 5 like everybody else upon return and not resume on image 4.
  
• The code utilizes the user's computer clock so some variance could be expected but with a lead time of 4 days the difference between people's device clocks should not even be noticeable, it can however be changed to using the server's universal time.
  
• The code uses per device localStorage for bookkeeping but it can be converted to a full fledged plugin with a universal plugin key for all devices although I don't see the necessity
  
• The code as presented is encapsulated in an IIFE with parameters prefilled for easy no mess installation customized to the image location of your particular forum but it also exposes a global function which can be called to change a second or third image without interfering with the first. Keep in mind however that the start date epoch is also used as an identifying bookkeeping signature so if using the global reference to address other images be sure to vary the epoch by at least 1 millisecond so it will be unique for the additional images being cycled. Also no value checks are performed on params so do your due diligence when creating any additional image cyclers or modifying the presets for your particular forum.
  

[Boy_Wonder]

Thank you Chris!

All appears to be working!

[Chris]

Nov 12, 2018 22:40:12 GMT -8 Boy_Wonder said:

Thank you Chris !

All appears to be working!

You can temporarily modify the change_frequency from 345600000 (4 days) to 4000 (4 seconds) to quickly test if it is cycling through the images as desired then put it back if satisfied, no need to wait 4 days to verify if it changes

[Boy_Wonder]

Yep all working! Thank you again Chris!

It's greatly appreciated because I -would- forget to switch the image every 4 days