Last active
January 18, 2018 23:41
-
-
Save tsulli/e42d63500f5bc0c1aacb to your computer and use it in GitHub Desktop.
jQuery Loader for Slideshow on Large Screens, Single Image on Small Screens
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// jQuery script to pull images and load bxslider slideshow for large screen, load single image (no slideshow) for small screens and old IE | |
// Tested on Chrome, FF, IE11, iOS, Surface | |
function slideshow_loader() { | |
var dir = "slideshow/"; | |
var large_width = "780"; | |
var small_width = "530"; | |
var $img; | |
if ($(window).width() > 568) { | |
// hide slideshow from older versions of IE | |
if (!$('html').hasClass('ie')) { | |
$.ajax({ | |
//This will retrieve the contents of the folder if the folder is configured as 'browsable' | |
url: dir, | |
success: function (data) { | |
// sort through each jpg in directory | |
$(data).find('a').each(function () { | |
if ($(this).attr('href').match(/(jpg)$/i) !== null) { | |
var filename = this.href.split('/').pop(); | |
if ($(window).width() > 840) { | |
//load larger photos for large screens | |
if (filename.indexOf(small_width) === -1) { | |
$img = $("<img>", {src: "slideshow/" + filename}); | |
$img.appendTo("#bxslider"); | |
$img.wrap("<li></li>"); | |
} | |
} else { | |
//smaller photos for small <840 screens | |
if (filename.indexOf(large_width) === -1) { | |
$img = $("<img>", {src: "slideshow/" + filename}); | |
$img.appendTo("#bxslider"); | |
$img.wrap("<li></li>"); | |
} | |
} | |
} | |
}); | |
$('#bxslider').bxSlider({ | |
auto: true, | |
autoControls: true, | |
mode: 'fade', | |
captions: true, | |
pause: 5000, | |
speed: 1200, | |
preloadImages: 'all' | |
}); | |
} | |
}); | |
} else { | |
// older versions of IE get a static image | |
$img = $("<img>", {src: "slideshow/slide1_" + large_width + ".jpg"}); | |
$img.appendTo("#bxslider"); | |
$img.wrap("<li class='slide_photo'></li>"); | |
} | |
} else { | |
// static image for the smallest mobile devices to save bandwidth | |
$img = $("<img>", {src: "slideshow/slide1_" + small_width + ".jpg"}); | |
$img.appendTo("#bxslider"); | |
$img.wrap("<li class='slide_photo'></li>"); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment