https://www.lagrange.edu/js/hero-rotation.js

1    // In this function, we declare a variable array 
2    // that contains each of the hero images (img) 
3    // with corresponding copy (mainText and subText) and links (imgLink).
4    
5    // the aspect ratio of hero images should be 2.12 (width) to 1 (height)
6    // for optiminal placement of copy from desktop to mobile.
7    
8    function homeHeroRandom() {
9      var heroArray = [
10          
11        // HERO IMAGE 1
12        {
13        mainText: "EXPERIENCE",
14        subText: "inspiration",
15        imgLink: 'https://www.lagrange.edu/academics/index.html',
16        img: '../ADMISSIONS/_hero_images/Aviation-checklist.jpg'
17          },
18          
19        // HERO IMAGE 2
20        {
21        mainText: "EXPLORE, DREAM, DO",
22        subText: "Experience LaGrange",
23        imgLink: 'https://www.lagrange.edu/future-students/index.html', 
24        img: '../ADMISSIONS/_hero_images/Choir-in-concert.jpg'
25          },
26          
27        // HERO IMAGE 3
28        {
29        mainText: "EXPERIENCE LAGRANGE",
30        subText: "Schedule a campus visit",
31        imgLink: '../ADMISSIONS/VISIT LAGRANGE',
32        img:'../ADMISSIONS/_hero_images/LC arch.jpg'
33          },          
34          
35          
36      ];
37      
38    //   Here we set up the random hero selector. The following variable looks to the above array and 
39    //   selects one set of key/value pairs to render on each page load. The HTML tags and CSS
40    //   classes below the JavaScript define how the content from the array will render.
41    
42      var heroDisplay = heroArray[Math.floor(Math.random() * heroArray.length)];
43      document.getElementById("homepage-hero").innerHTML =
44
45        '<a href="' +  heroDisplay.imgLink + '"target="_blank">' +
46        '<img src="' + heroDisplay.img + '" alt="homepage hero image" width="100%"/>' +
47        '<div class="home-hero-message">' + heroDisplay.mainText + '</div>' +
48        '<div class="home-hero-submessage">' + heroDisplay.subText + '</div>' +
49        '</a>'
50        ;
51        
52        console.log("hero with text");
53        
54    }
55
56// Here we call the function defined above that will run every time we load or refresh the page.
57    homeHeroRandom();
58
59
60
61
62
63
64
65