I have a "Hero Image" div that has an array of images that is picked randomly upon loading. I am wondering, is it possible to add a video file to this array and have that as an option of one of the random picks? If this is not possible, does anyone know how to achieve this?
I am very new to JS, so any advice or information would be much appreciated!!
Here is my JS:
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg']; //the video file is not in the array yet!
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
And here is my html:
<body>
<div id="heroImage">
<source>
<script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</source>
</div>
<div class="uk-h3">Captured moments</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
<div>
<a class="uk-inline" href="images/photo.jpg" >
<img src="images/photo.jpg" alt="">
</a>
</div>
<div>
<a class="uk-inline" href="images/dark.jpg" >
<img src="images/dark.jpg" alt="">
</a>
</div>
<div>
<a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
<img src="images/light.jpg" alt="">
</a>
</div>
</div>
</body>
I am getting confused on this because in html videos need their own tag. I though about trying to add a video tag around the inline script tag so perhaps that would allow the page to read the video contained inside the array? Something like this:
<div id="heroImage">
<video>
<script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</video>
</div>
But this may be may be the totally wrong approach!
Again, I am very new and just learning, so any help or information on this would be much appreciated! Thank you!!
Aucun commentaire:
Enregistrer un commentaire