I’m making a commission website for fun.
I have made a jQuery function which parses for divs with #portfolio ids and then creates a custom bootstrap carousel to populate them.
The issue is the .each function is ignoring my second #portfolio div
My website is actually running right now and you can check out the issue here: https://pinkflamess.com/
here’s the html snippet:
<h3>Pixel Sprite</h3>
<div id = "portfolio" count = 8 gifs="https://i.imgur.com/S5jceRT.gif,https://i.imgur.com/hsz8u5H.gif,
https://i.imgur.com/Tv3MJJo.gif,https://i.imgur.com/6jNkVn4.gif,https://i.imgur.com/ifahlQx.gif,
https://i.imgur.com/I5JrulB.gif,https://i.imgur.com/Q3DAk0f.gif,https://i.imgur.com/aPAa3Hf.gif">
</div>
<p><em>An animation in a pixelated style. 80 by 80 pixels, 4 frames, any fps </em><br/>
Price: $10 to $15
</p>
<h3>Simple Chibi</h3>
<div id = "portfolio" count = 8 gifs="https://i.imgur.com/OeE0lK4.gif,https://i.imgur.com/6VVvchn.gif,
https://i.imgur.com/tr8lxoL.gif,https://i.imgur.com/SMH69wR.gif,https://i.imgur.com/mSkbr6J.gif,
https://imgur.com/MILhBUn.gif,https://imgur.com/oLUxK6N.gif,https://imgur.com/dreYSnx.gif">
</div>
here’s the jQuery snippet:
$(document).ready(function(){
//BOOTSTRAP CAROUSELS
$('#portfolio').each(function() {
var gifs = $(this).attr('gifs').split(",");
var count = $(this).attr('count');
console.log($(this).attr("gifs"));
var strToAppend = '<div id="portfolioControls" class="carousel slide data-interval="10000" data-ride="carousel"><div class="carousel-inner">';
//Mobile carousel (one image per slide))
if($(window).width() < 480){
strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-100" src="' + gifs[0] + '"></div>';
for(var i = 1; i < count; i++){
strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-100" src="' + gifs[i] + '"></div>';
}
}
//Tablet carousel (two images per slide))
else if($(window).width() < 768){
strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-50" src="' + gifs[0] + '"><img class="d-block w-50" src="' + gifs[1] + '"></div>';
for(var i = 2; i < count; i = i + 2){ //must be divisble by 2
strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-50" src="' + gifs[i] + '"><img class="d-block w-50" src="' + gifs[i+1] + '"></div>';
}
}
//Desktop carousel (three images per slide))
else{
strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-25" src="' + gifs[0] + '"><img class="d-block w-25" src="' + gifs[1] + '"><img class="d-block w-25" src="' + gifs[2] + '"><img class="d-block w-25" src="' + gifs[3] + '"></div>';
for(var i = 4; i < count; i = i + 4){ //must be divisble by 4
strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-25" src="' + gifs[i] + '"><img class="d-block w-25" src="' + gifs[i+1] + '"><img class="d-block w-25" src="' + gifs[i+2] + '"><img class="d-block w-25" src="' + gifs[i+3] + '"></div>';
}
}
strToAppend = strToAppend + '</div><a class="carousel-control-prev" href="#portfolioControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span>' +
'<span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#portfolioControls" role="button" data-slide="next">' +
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>'
//Adds arrows to every carousel type
$(this).append(strToAppend);
});
});
The console.log only prints out the gifs=”” of the first div, and not the second. (it also only prints once)
Thanks for reading, hope you have a good day/night!