Go to random key frame on key press

[MarkHunte]

Javascript .

Just one idea of probably many…

Small images

Give each Small image the same class name personSmall
Give each Small image the same data attribute name data-person and and each value the persons name.

large images

Give each large image the same class name personLarge l
Give each large image the same data attribute name data-person and and each value the persons name.

---

Group all the Large images and give the group the id of personLargeGroup

---

We can then run a function that counts in this case button clicks and runs different functions depending on the click number.

In the function that randomises the images. We gather the list of small and large elements in array lists.

And use a randomiser to try and always pick a different one.

The code then hides and shows the elements as needs.

The other two functions will show the name a and reset.

All of this example is really a mute point as you will have your own setup of how the images are displayed.

The main thing here is how to associate the images and text with each other simply by using the data attribute.

And some randomiser code that randomly picks an element from a generated list.

		 //-- init image lists and the current random image  this section will only run once
		 if(typeof  hypeDocument.customData.rand_ == "undefined") {hypeDocument.customData.rand_ = "" } //- 
	 	
	 	if(typeof   hypeDocument.customData.imageList_small == "undefined") { 
	 	
	 	//-- image lists
	 	hypeDocument.customData.imageList_small = document.querySelectorAll('.personSmall')
	 	hypeDocument.customData.imageList_large = document.querySelectorAll('.personLarge')
 	
	 	//-- random image element
	 	hypeDocument.customData.imageIndex = hypeDocument.customData.imageList_small[Math.floor(Math.random()*hypeDocument.customData.imageList_small.length)]; 
 
	 	}  
	 	
	 	
	 	//--- This section will always run
	 
	 //-- get large image group
	 var personLargeGroup_ = hypeDocument.getElementById('personLargeGroup')
 
  //-- compare last image with this random image and keep doing so until they do not match
      while ( hypeDocument.customData.imageIndex ===  hypeDocument.customData.rand_){ 
       hypeDocument.customData.imageIndex = hypeDocument.customData.imageList_small[Math.floor(Math.random()*hypeDocument.customData.imageList_small.length)];
      }
      
      hypeDocument.customData.rand_ =  hypeDocument.customData.imageIndex
       
     
   var thisLarge =hypeDocument.customData.rand_.dataset.person
      
   var largeImage =  personLargeGroup_.querySelectorAll("[data-person='" + thisLarge  + "']")[0]  
  


        .....

//Slight update

randPersonV2.hype.zip (2.0 MB)

---