Skip to content

Instantly share code, notes, and snippets.

@berinhard
Created April 3, 2012 03:39
Show Gist options
  • Save berinhard/2289099 to your computer and use it in GitHub Desktop.
Save berinhard/2289099 to your computer and use it in GitHub Desktop.
Javascript slider with lazyload
$(function(){
//Lazyload function
$.fn.lazyload = function(){
var image = $(this);
if (image.attr('real-src')){
image.attr('src', image.attr('real-src'));
image.removeAttr('real-src');
}
return this;
};
//Slider constructor
$.fn.imageSlider = function(){
this.each(function(){
var $slider = $(this);
var $active = $slider.find('img:first');
$active.addClass('active');
$active.lazyload();
//Slider control buttons
var $nextButton = $slider.find('.next');
var $prevButton = $slider.find('.previous');
$prevButton.toggle();
//Handle if next button should appear
$nextButton.click(function(){
var $next = $active.next();
$active.removeClass('active');
$next.addClass('active');
$active = $next;
$active.lazyload();
if ($active.next().length == 0){
$nextButton.toggle();
}
$prevButton.show();
})
//Handle if next button should appear
$prevButton.click(function(){
var $prev = $active.prev();
$active.removeClass('active');
$prev.addClass('active');
$active = $prev;
$active.lazyload();
if ($active.prev().length == 0){
$prevButton.toggle();
}
$nextButton.show();
})
})
return this;
};
})
$(document).ready(function(){
var $slider = $('#slider');
$slider.imageSlider();
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment