Skip to content

Instantly share code, notes, and snippets.

@tsulli
Last active January 18, 2018 23:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsulli/e42d63500f5bc0c1aacb to your computer and use it in GitHub Desktop.
Save tsulli/e42d63500f5bc0c1aacb to your computer and use it in GitHub Desktop.
jQuery Loader for Slideshow on Large Screens, Single Image on Small Screens
// 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