Menu
Hi
I am trying to select a folder based on veiwport size to display images on a bootsrap slider.
The idea here is to find the veiwport size and populate a variable called folderName then use this to build the img tag.
all works well if I use the folderName without the veiwport conditiuonal statements I would prefare it to have an event listener to monitor browser resize if possible
I am using the code within an asp page
Thank you
Paul M
[CODE]
<script>
//path to img folder based on viewport size
if ($(window).width() < 768) {
// do something for small screens
var folderName = “http://www.myweb.co.uk/bootstrap/images/slider/768/”
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
// do something for medium screens
var folderName = “http://www.myweb.co.uk/bootstrap/images/slider/768/”
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
// do something for big screens
var folderName = “http://www.myweb.co.uk/bootstrap/images/slider/1024/”
}
else {
// do something for huge screens
var folderName = “http://www.myweb.co.uk/bootstrap/images/slider/1600/”
}
//images
var imgslide1 = “01.jpg”;
var imgslide2 = “02.jpg”;
var imgslide3 = “03.jpg”;
var imgslide4 = “04.jpg”;
var imgslide5 = “05.jpg”;
//image tag build
document.getElementById(“slide1”).innerHTML = (‘<img src=”‘) + folderName + imgslide1 + (‘”/>’);
document.getElementById(“slide2”).innerHTML = (‘<img src=”‘) + folderName + imgslide2 + (‘”/>’);
document.getElementById(“slide3”).innerHTML = (‘<img src=”‘) + folderName + imgslide3 + (‘”/>’);
document.getElementById(“slide4”).innerHTML = (‘<img src=”‘) + folderName + imgslide4 + (‘”/>’);
document.getElementById(“slide5”).innerHTML = (‘<img src=”‘) + folderName + imgslide5 + (‘”/>’);
</script>