Figcaption для случайно сгенерированного img - PullRequest
Новая
       41

Figcaption для случайно сгенерированного img

0 голосов
/ 08 января 2019

На моем сайте я играю с абстракцией шрифта. Каждый src изображений является случайной «буквой», и я хотел бы иметь подписи под источником изображения с точной буквой. Однако отображение изображений является случайным.

Нечто подобное; если этот div содержит определенный img, тогда используйте (this) заголовок img. И делать это для каждого изображения и подписи, которые принадлежат друг другу.

или создайте классы с подписями к рисункам и покажите или скройте их, если присутствует определенный img, но это будет много работы и будет очень грязно.

Может быть, я тоже слишком много думаю, потому что, если ссылка на изображение не верна, он показывает точный путь к изображению, включая имя с расширением, что заставляет меня думать, что это легко показать под ним?

Код, я еще ничего не пробовал, но может быть полезно посмотреть, как он настроен ..

https://jsfiddle.net/7dn3j5qL/1/

JavaScript, который я использовал 

  $('.test').each(function() {

    var num = Math.floor(Math.random() * 26 + 1),
        img = $(this);

    img.attr('src', 'img/number'+num+'.gif');
    img.attr('alt', 'Src: '+img.attr('src'));

});

1019 * CSS * 

body{
}


.container1{
    width: 1425px;
    height: 100%;
    position: absolute;
    background-color: pink;
}

.container1 img{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.container{
    position: absolute;
    width: 1425px;
    height: 2262px;
    text-align: center;
}


.image1{
    width: 520px;
    height:300px;
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    overflow: hidden
    background-color:red;

}

.image2{
    width: 400px;
    height:231px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}


.image3{
    width: 268px;
    height:155px;
    vertical-align: top;
    display: inline-block;
     background-color:red;
}


.image4{
    width: 199px;
    height:115px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}


.image5{
    width: 158px;
    height:91px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}

.image6{
    width: 130px;
    height:75px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}


img{
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

и HTML 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <link href="index.css" rel="stylesheet" />

</head>
<body>

<div class="container">
    <div class="image1"><img src="" class="test"/></div><p></p>

    <div class="image2"><img src="" class="test"/></div>
    <div class="image2"><img src="" class="test"/></div><p></p>

    <div class="image3"><img src="" class="test"/></div>
    <div class="image3"><img src="" class="test"/></div>
    <div class="image3"><img src="" class="test"/></div><p></p>

    <div class="image4"><img src="" class="test"/></div>
    <div class="image4"><img src="" class="test"/></div>
    <div class="image4"><img src="" class="test"/></div>
    <div class="image4"><img src="" class="test"/></div><p></p>

    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div><p></p>

    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div><p></p>

    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>


</div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="index.js"></script>

<!-- the body ends here -->
</body>
</html>
...