faizy faizy - 1 month ago 7
jQuery Question

images are not loading in jquery/json slider

I want to acheive jquery slider with external json file,slider is working properly,but when page loads only button of slider appear and image appears after the clicking of button,can anyone sort out the problem?

HTML

<div id="update">

</div>
<!--div block which is to be updated by jquery --->

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
<script>
$(document).ready(function () {
$.getJSON('data.json', function (data) {
var output = '<div class="slideshow-container">';
$.each(data.data, function (key, value) {
output += '<div class="mySlides fade">';
output += '<h3 class="numbertext"> Location: ' + value.location + '</h3>';
output += '<img src="' + value.links.logo2x + '" style="width:100%;"/>';
output += '<div class="text"> Name: ' + value.name + '</div>';
output += '<div class="desc">' + value.description + '</div>';
output += '</div>'; /*myslides*/
});
output += '<a class="prev" onclick="plusSlides(-1)">' + '&#10094;' + '</a>';
output += '<a class="next" onclick="plusSlides(1)">' + '❯' + '</a>';
output += '</div>';
$('#update').html(output);
});
});




Javascript code

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}

}


CSS

body {
margin: 0;
padding: 0;
background-color: #dad7c7;
font-family: 'Roboto', sans-serif;
line-height: 1.2em;
}

* {
box-sizing: border-box
}

.slideshow-container {
width: 520px;
position: relative;
margin: 0 auto;
max-width: 100%;
}

.mySlides {
display: none;
max-width: 100%;
}

mySlides img {
width: 100%;
height: auto;
}

.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid white;
}

.text {
color: #f2f2f2;
font-size: 16px;
display: block;
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
text-align: center;
background-color: black;
padding-top: 5px;
text-transform: uppercase;
}
/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
width: 100%;
text-align: center;
background-color: black;
margin: 0 auto;
}

.desc {
position: absolute;
color: #968888;
line-height: 1.5em;
padding: 10px;
background-color: white;
font-weight: 700;
height: auto;
overflow: auto;
transition: all .3s ease;
}

.desc:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Fading animation */

.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}

@-moz-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}


On page loads only button appears

enter image description here

After clicking on the button image loads

enter image description here

Answer

It's normal because in your function showSlides you hide all img with for loop: Please try

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
       slideIndex = 1
    }
    if (n < 1) {
       slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slides[n].style.display = "block";
}

UPDATE 2

I have found! The problem is because your slides script start before the inner script. I have add this into a function and call this after element created. Please try:

function showThis(){
  $(document).on("click",".prev",function(){
    plusSlides(-1)
  })
  $(document).on("click",".next",function(){
    plusSlides(1)
  })
  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
     showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = $(".mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";

  }
}
body {
     margin: 0;
     padding: 0;
     background-color: #dad7c7;
     font-family: 'Roboto', sans-serif;
     line-height: 1.2em;
 }
 
 * {
     box-sizing: border-box
 }
 
 .slideshow-container {
     width: 520px;
     position: relative;
     margin: 0 auto;
     max-width: 100%;
 }
 
 .mySlides {
     display: none;
     max-width: 100%;
 }
 
 mySlides img {
     width: 100%;
     height: auto;
 }
 
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 16px;
     margin-top: -22px;
     color: white;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     background-color: rgba(0, 0, 0, 0.6);
     border: 1px solid white;
 }
 
 .text {
     color: #f2f2f2;
     font-size: 16px;
     display: block;
     position: absolute;
     bottom: 0px;
     width: 100%;
     height: 30px;
     text-align: center;
     background-color: black;
     padding-top: 5px;
     text-transform: uppercase;
 }
 /* Position the "next button" to the right */
 
 .next {
     right: 0;
     border-radius: 3px 0 0 3px;
 }
 /* On hover, add a black background color with a little bit see-through */
 
 .numbertext {
     color: #f2f2f2;
     font-size: 12px;
     padding: 8px 12px;
     position: absolute;
     top: 0;
     width: 100%;
     text-align: center;
     background-color: black;
     margin: 0 auto;
 }
 
 .desc {
     position: absolute;
     color: #968888;
     line-height: 1.5em;
     padding: 10px;
     background-color: white;
     font-weight: 700;
     height: auto;
     overflow: auto;
     transition: all .3s ease;
 }
 
 .desc:hover {
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
 /* Fading animation */
 
 .fade {
     -webkit-animation-name: fade;
     -webkit-animation-duration: 1.5s;
     animation-name: fade;
     animation-duration: 1.5s;
 }
 
 @-webkit-keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 
 @-moz-keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 
 @-o-keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 
 @keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 /**media queries **/
 
 @media (max-width:562px) {
     div.desc {
         height: 200px !important;
         overflow: auto !important;
         line-height: 1.2em;
         border-bottom: 2px solid #5D5D5D;
         text-align: justify;
     }
     .prev,
     .next {
         padding: 8px;
         font-size: 15px;
     }
     body::-webkit-scrollbar {
         width: 1em;
     }
     body::-webkit-scrollbar-track {
         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     }
     body::-webkit-scrollbar-thumb {
         background-color: indianred;
         outline: 1px solid slategrey;
     }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="update">

    </div>
    <script>
        $(document).ready(function () {
        						output ="";
                    output += '<div class="mySlides fade">';
                    output += '<h3 class="numbertext"> Location:  </h3>';
                    output += '<img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png" style="width:100%;"/>';
                    output += '<div class="text"> </div>';
                    output += '<div class="desc"></div>';
                    output += '</div>'; /*myslides*/
                     output += '<div class="mySlides fade">';
                    output += '<h3 class="numbertext"> Location:  </h3>';
                    output += '<img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png" style="width:100%;"/>';
                    output += '<div class="text"> </div>';
                    output += '<div class="desc"></div>';
                    output += '</div>'; /*myslides*/
                     

                output += '<a class="prev" >' + '&#10094;' + '</a>';
                output += '<a class="next" >' + '❯' + '</a>';
                output += '</div>';
                $('#update').html(output);
          showThis();
        });
    </script>

Comments