1

I have programmed a slider that works well. I intend to have captions, but that doesn't work. What am I doing wrong? The span does show up correctly in the Firefox Developer Edition, but it doesn't show up on screen. Is the CSS incorrect? Or does it not work like this with Javascript? Thanks for any help! http://www.holymountstudios.com/index.php

Javascript:

// PICTURE SLIDER ON MAIN PAGE

function mainPageSlider(imgArray, duration) {
    var curIndex = 0,
        imgDuration = duration,
        slider = document.getElementById("slider"),
        slides = slider.childNodes; 

    buildSlideShow(imgArray);
    slideShow(); 

    function buildSlideShow(arr) {
        for (i = 0; i < arr.length; i++) {
            var img = document.createElement('img');
            img.src = arr[i][0];
            var desc_span = document.createElement('span');
            var desc_spanClass = desc_span.setAttribute('class', 'img_desc');
            var desc = document.createTextNode(arr[i][1]);
            desc_span.appendChild(desc);
            img.appendChild(desc_span);
            slider.appendChild(img);
        }
    }

    function slideShow() {

        function fadeIn(e) {
            e.className = "fadeIn";
        };

        function fadeOut(e) {
            e.className = "";
        };

        fadeOut(slides[curIndex]);
        curIndex++;
        if (curIndex === slides.length) {
            curIndex = 0;
        }

        fadeIn(slides[curIndex]);

        setTimeout(slideShow, imgDuration);     
    };
}

CSS: 

#slider {
    position: static;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#slider img {
    transition: opacity 2.2s;
    position: absolute;
    top:0;
    left:0;
    opacity:0;
    height: 100%;
    width: 100%;
/*    padding-top: 60px; */
    object-fit: cover;
}

#slider img.fadeIn {
    opacity:1;
}

#slider .img_desc, .img_desc {
    font-size: 50px;
    color: white;
    z-index: 5000;
    background-color: red;
    height: 500px;
    width: 90%;
    margin: 100px 0px;
    display: inline-block;
    opacity: 1;
    position: absolute;
    line-height:100px;
}

HTML:

<body onload="mainPageSlider([
    ['', 'Studio'],
    ['images/Fotos/2016-02-01_15.36.22.jpg', 'etwas anderes'],
    ], 
    2000)"> 

<span class = img_desc>Hello</span>

I have deleted one of the ref links of the img, in order to see if the caption was hidden by the img, which wasn't the case. I have added a span with the same class further below, to make sure that I was doing the CSS correctly. The current CSS for the caption (.img_desc) is a pretty random collection of things I have tried out.

Ghadeer R. Majeed
  • 23
  • 8
Rumi
  • 11
  • 3
  • just set the position of caption: left, right, top, bottom: like this : `#slider .img_desc, .img_desc { left:0; bottom:0;}` – Minal Chauhan Nov 03 '17 at 11:59
  • Thank you for your response, Minal Chauhan, but that doesn't seem to work - there are still no captions. – Rumi Nov 03 '17 at 12:12
  • It seems that the CSS is alright, but that the problem lies in the captions being appended as a child to the img. – Rumi Nov 03 '17 at 13:23

1 Answers1

0

Solution:

I changed the relevant Javascript function to

function buildSlideShow(arr) {
    for (i = 0; i < arr.length; i++) {
        var img_with_desc = document.createElement('div');
        var img = document.createElement('img');
        var img_with_descClass = img_with_desc.setAttribute('class', 'main_img');
        img.src = arr[i][0];
        var desc_span = document.createElement('span');
        var desc_spanClass = desc_span.setAttribute('class', 'img_desc');
        var desc = document.createTextNode(arr[i][1]);
        desc_span.appendChild(desc);
        img_with_desc.appendChild(img);
        img_with_desc.appendChild(desc_span);
        slider.appendChild(img_with_desc);
    }

and the CSS to 

#slider {
    position: static;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#slider img {
    transition: opacity 2.2s;
    position: absolute;
    top:0;
    left:0;
    opacity:0;
    height: 100%;
    width: 100%;
    z-index: 1;
/*  padding-top: 200px; */
    object-fit: cover;
}

.img_desc, #slider .fadeIn .img_desc {
    font-size: 36px;
    color: white;
    background-color: #aaa;
    z-index: 2;
    padding: 10px;
    left:100px; 
    bottom: 50px;
    left: 50%;
    width: 60%;
    margin-left: -30%;
    text-align: center;
    opacity: 0;
    position: absolute;
    object-fit: cover; 
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(54, 25, 25, .1);
}

#slider .fadeIn .img_desc {
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#slider .fadeIn img, #slider .fadeIn .img_desc {
    opacity:1;
}

The fade-in is just for a nicer behavior.

Rumi
  • 11
  • 3