lundi 25 février 2019

How to get Random Images from a Thumbnail Click

Morning everyone, I've got a particular issue with an assignment of mine.

The assignment is called Random Otters.

  1. Design the Ottergram base page. DONE.
  2. Apply given CSS styles. DONE.
  3. Add thumbnail-scroll menu to the side. DONE.
  4. Develop javascript functions to transition between images. DONE.
  5. Alter/Add to the code so one of the icons shows random images instead of the chosen otter. In Progress.

My teacher's instructions for this last part are as follows:

  1. Use a random number generator to pick out one of the thumbnail images.
  2. When that image is clicked, show a random image instead of the otter.
  3. Use an array to store images and math.random to select the thumbnail.

OK, so I know I'll need something along the lines of:

var pic = new 
Array("images/pic1.jpg","images/pic2.jpg","images/pic3.jpg");

function choosePic() {
var randomNum = Math.floor(Math.random() * pic.length);
document.getElementById("newPic").src = pic[randomNum];

However, I'm not certain how to implement it with the code I've already written. I know I'll need the math.random but I don't know how it applies to a series of thumbnails. I've had some practice with button clicks randomizing images and window.onload but I'm admittedly lost with this one.

Anyway here's the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ottergram</title>
<link rel="stylesheet" 

</head>
<body>
    <header class="main-header">
        <h1 class="logo-text">Ottergram</h1>
    </header>
    <main class="main-content">
    <ul class="thumbnail-list">
        <li class="thumbnail-item">
            <a href="img/barry.jpg"
                                    data-image-role="trigger"
                                    data-image-title="Stayin' Alive"
                                    data-image-url="img/barry.jpg">
                <img class= "thumbnail-image" src="img/barry.jpg" alt="">
            <span class="thumbnail-title">Barry</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="img/robin.jpg"
                                   data-image-role="trigger"
                                   data-image-title="How Deep Is Your Love"
                                   data-image-url="img/robin.jpg">
                <img class= "thumbnail-image" src="img/robin.jpg" alt="">
                <span class="thumbnail-title">Robin</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="img/maurice.jpg"
                                   data-image-role="trigger"
                                   data-image-title="You Should be Dancing"
                                   data-image-url="img/maurice.jpg">
                <img class= "thumbnail-image" src="img/maurice.jpg" alt="">
                <span class="thumbnail-title">Maurice</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="img/lesley.jpg"
                                    data-image-role="trigger"
                                    data-image-title="Night Fever"
                                    data-image-url="img/lesley.jpg">
                <img class= "thumbnail-image" src="img/lesley.jpg" alt="">
                <span class="thumbnail-title">Lesley</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="img/barbara.jpg"
                                    data-image-role="trigger"
                                    data-image-title="To Love Somebody"
                                    data-image-url="img/barbara.jpg">
                <img class= "thumbnail-image" src="img/barbara.jpg" alt="">
                <span class="thumbnail-title">Barbara</span>
            </a>
        </li>
    </ul>

    <div class="detail-image-container">
        <div class="detail-image-frame">
            <img class="detail-image" data-image-role="target" src="img/barry.jpg" alt="">
            <span class="detail-image-title" data-image-role="title">Stayin' Alive</span>
        </div>
    </div>
    </main>
    <script src="scripts/main.js" charset="utf-8"></script>
</body>
</html>

Here's the css, though I don't know if I'll be manipulating much in it.

@font-face{
font-family: 'lakeshore';
/*src: url('fonts/LAKESHOR-webfont.eot');*/
/*src: url('fonts/LAKESHOR-webfont.eot?#iefix') format('embedded-opentype'),*/
    /*url('fonts/LAKESHOR-webfont.woff') format('woff'),*/
    /*url('fonts/LAKESHOR-webfont.ttf') format('truetype'),*/
    /*url('fonts/LAKESHOR-webfont.svg#lakeshore')format('svg');*/



font-weight: normal;
font-style: normal;
}


@font-face{
font-family: 'airstreamregular';
/*src: url('fonts/Airstream-webfont.eot');
src: url('fonts/Airstream-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Airstream-webfont.woff') format('woff'),
url('fonts/Airstream-webfont.ttf') format('truetype'),
url('fonts/Airstream-webfont.svg#airstreamregular')format('svg');*/

font-weight: normal;
font-style: normal;
}

html, body{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;

    font-size: 10px;
    background: rgb(149, 194, 215);
}

a {
text-decoration: none;
}

.main-header{
flex: 0 1 auto;
}

.logo-text{
background: white;

text-align: center;
text-transform: uppercase;
font-family: Algerian, serif;
font-size: 37px;
}

.main-content{
flex: 1 1 auto;
display: flex;
flex-direction: column;
}

.thumbnail-list{
flex: 0 1 auto;
order: 2;
display: flex;
justify-content: space-between;
list-style: none;

white-space: nowrap;
overflow-x: auto;
}

.thumbnail-item{
display: inline-block;
min-width:120px;
max-width: 120px;
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);

transition: transform 133ms ease-in-out;
}

.thumbnail-item:hover{
transform: scale(1.01);
}

.thumbnail-style{
list-style: none;
}

.thumbnail-image{
display: block;
width: 100%;
}

.thumbnail-title{
display: block;
margin: 0;
padding: 4px 10px;

background: rgb(96, 125, 139);
color: rgb(202, 238, 255);

font-size: 18px;
}

.detail-image-container{
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}

.detail-image-frame{
position: relative;
text-align: center;

transition: transform 333ms cubic-bezier(1,.06,.28,1);
}

.is-tiny{
transform: scale(0.001);
transition: transform 0ms;
}

.detail-image{
width: 90%;
}

.detail-image-title{
position: absolute;
bottom: -16px;
left: 4px;

font-family: "Freestyle Script", serif;
color: white;
text-shadow: rgba(0,0,0,0.9) 1px 2px 9px;
font-size: 60px;
}

.hidden-detail .detail-image-container{
display: none;
}

.hidden-detail .thumbnail-list{
flex-direction: column;
align-items: center;
}

.hidden-detail .thumbnail-item{
max-width: 80%;
}

@media all and (min-width: 768px){
.main-content{
    flex-direction: row;
    overflow: hidden;
}
.thumbnail-list{
    flex-direction: column;
    order: 0;
    margin-left: 20px;

    padding: 0 35px;
}

.thumbnail-item{
    max-width: 260px
}

.thumbnail-item + .thumbnail-item{
    margin-top: 20px;
}
}

And lastly the .js:

var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';
var DETAIL_TITLE_SELECTOR = '[data-image-role="title"]';
var DETAIL_FRAME_SELECTOR = '[data-image-role="frame"]';
var THUMBNAIL_LINK_SELECTOR = '[data-image-role="trigger"]';
var HIDDEN_DETAIL_CLASS = 'hidden-detail';
var TINY_EFFECT_CLASS = 'is-tiny';
var ESC_KEY = 27;

function setDetails(imageUrl, titleText){
    'use strict';
    var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);
    detailImage.setAttribute('src', imageUrl);

    var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
    detailTitle.textContent = titleText;
}

function imageFromThumb(thumbnail){
    'use strict';
    return thumbnail.getAttribute('data-image-url');
}

function titleFromThumb(thumbnail){
    'use strict';
    return thumbnail.getAttribute('data-image-title');
}

function setDetailsFromThumb(thumbnail){
    'use strict';
    setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail));

}

function addThumbClickHandler(thumb){
    'use strict';
    thumb.addEventListener('click', function (event)
    {
        event.preventDefault();
        setDetailsFromThumb(thumb);
        showDetails();
    });
}

function getThumbnailsArray(){
    'use strict';
    var thumbnails = document.querySelectorAll(THUMBNAIL_LINK_SELECTOR);
    var thumbnailArray = [].slice.call(thumbnails);
    return thumbnailArray;
}

function hideDetails(){
    'use strict';
    document.body.classList.add(HIDDEN_DETAIL_CLASS);
}

function showDetails(){
    'use strict';
    var frame = document.querySelector(DETAIL_FRAME_SELECTOR);
    document.body.classList.remove(HIDDEN_DETAIL_CLASS);
    frame.classList.add(TINY_EFFECT_CLASS);
    setTimeout(function (){
    frame.classList.remove(TINY_EFFECT_CLASS);
    }, 50);
}

function addKeyPressHandler(){
    'use strict';
    document.body.addEventListener('keyup', function(event){
        event.preventDefault();
        console.log(event.keyCode);
        if (event.keyCode ===ESC_KEY){
            hideDetails();
        }
    });
}

function initializeEvents(){
    'use strict';
    var thumbnails = getThumbnailsArray();
    thumbnails.forEach(addThumbClickHandler);
    addKeyPressHandler();
}

initializeEvents();

I could really use some help here.




Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)