Skip to content
This repository was archived by the owner on May 5, 2021. It is now read-only.

use jquery > 1.7 #363

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README
Original file line number Diff line number Diff line change
@@ -1 +1 @@
Nivo Slider is "The Most Awesome jQuery Image Slider". See http://nivo.dev7studios.com for more info.
Lazy Load v2
148 changes: 114 additions & 34 deletions jquery.nivo.slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Lee Powers, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Code updates from jQuery Lazy Nivo Slider 1.0
*/

(function($) {
Expand Down Expand Up @@ -49,39 +55,84 @@
child.css('display','none');
vars.totalSlides++;
});

// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);

// START ADDED
// Parse image source from an element.
// Checks in data-src, then in src
var parse_src = function(elem) {
return elem.data('src') || elem.attr('src');
}

// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
// Parse out the image URL string at the given child index.
// Does no bounds checking!
var parse_image = function(idx) {
if($(kids[idx]).is('img')) {
return $(kids[idx]);
} else {
return $(kids[idx]).find('img:first');
}
}

// Preload the image in the kids collection at the given step from the current slide
var preload_image = function(step) {

var nxt = vars.currentSlide + step;
if (nxt >= kids.length) nxt = 0
else if (nxt < 0) nxt = 0;
var img = parse_image(nxt);
img.attr('src', img.data('src'));
}
// END ADDED

// Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}

// Set first background
var sliderImg = $('<img class="nivo-main-image" src="#" />');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
//preload_image(0); //the first image is a src image
var sliderImg = $('<img class="nivo-main-image" src="#" />');
//sliderImg.attr('src', vars.currentImage.attr('src')).show();
sliderImg.attr('src', parse_src(vars.currentImage)).show();//ADDED
slider.append(sliderImg);

// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}

// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
}

preload_image(1);

//START ADDED
// Preload second image to transition into.
// Given the first image some time to load!
//if (!settings.manualAdvance && kids.length > 1) {
// setTimeout(function() {
// preload_image(1);
// //}, Math.max(1000, settings.pauseTime - 1000));
// //}, settings.pauseTime / 2);
// }, 0);
//}
//END ADDED

// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
//sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.attr('src', parse_src(vars.currentImage)); //ADDED
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
Expand Down Expand Up @@ -164,7 +215,8 @@
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
//sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.attr('src', parse_src(vars.currentImage)); //ADDED
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
Expand All @@ -187,7 +239,9 @@

// Event when Animation finishes
slider.bind('nivo:animFinished', function(){
sliderImg.attr('src', vars.currentImage.attr('src'));
//sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.attr('src', parse_src(vars.currentImage)); //ADDED

vars.running = false;
// Hide child links
$(kids).each(function(){
Expand All @@ -200,25 +254,39 @@
$(kids[vars.currentSlide]).css('display','block');
}
// Restart the timer
if(timer === '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
//REMOVED
//if(timer === '' && !vars.paused && !settings.manualAdvance){
// timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
//}
//START ADDED
if(!vars.paused && !settings.manualAdvance){
// Preload the next image (when found)
preload_image(1);
// Restart the timer
if (timer == '' ) {
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
}
//END ADDED

// Trigger the afterChange callback
settings.afterChange.call(this);
});

// Add slices for slice animations
var createSlices = function(slider, settings, vars) {
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();

//$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
$('img[src="'+ parse_src(vars.currentImage) +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); //ADDED
//var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();
var sliceHeight = ($('img[src="'+ parse_src(vars.currentImage) +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ parse_src(vars.currentImage) +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ parse_src(vars.currentImage) +'"]', slider).not('.nivo-main-image,.nivo-control img').height(); //ADDED
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);

if(i === settings.slices-1){
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
//$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
$('<div class="nivo-slice" name="'+i+'"><img src="'+ parse_src(vars.currentImage) +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ //ADDED
left:(sliceWidth*i)+'px',
width:(slider.width()-(sliceWidth*i))+'px',
height:sliceHeight+'px',
Expand All @@ -228,7 +296,8 @@
);
} else {
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
//$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
$('<div class="nivo-slice" name="'+i+'"><img src="'+ parse_src(vars.currentImage) +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ //ADDED
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:sliceHeight+'px',
Expand All @@ -248,16 +317,19 @@
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
//$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
$('img[src="'+ parse_src(vars.currentImage) +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); //ADDED
var boxWidth = Math.round(slider.width()/settings.boxCols),
boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows);
//boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows);
boxHeight = Math.round($('img[src="'+ parse_src(vars.currentImage) +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows); //ADDED


for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols === settings.boxCols-1){
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
//$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ parse_src(vars.currentImage) +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ //ADDED
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
Expand All @@ -268,7 +340,8 @@
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
} else {
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
//$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ parse_src(vars.currentImage) +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ //ADDED
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
Expand Down Expand Up @@ -303,13 +376,16 @@

// Set current background before change
if(!nudge){
sliderImg.attr('src', vars.currentImage.attr('src'));
//sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.attr('src', parse_src(vars.currentImage)); //ADDED
} else {
if(nudge === 'prev'){
sliderImg.attr('src', vars.currentImage.attr('src'));
//sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.attr('src', parse_src(vars.currentImage)); //ADDED
}
if(nudge === 'next'){
sliderImg.attr('src', vars.currentImage.attr('src'));
//sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.attr('src', parse_src(vars.currentImage)); //ADDED
}
}

Expand All @@ -321,11 +397,15 @@
}
if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); }
// Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//REMOVED
//if($(kids[vars.currentSlide]).is('img')){
// vars.currentImage = $(kids[vars.currentSlide]);
//} else {
// vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
//}
//START ADDED
vars.currentImage = parse_image(vars.currentSlide);
//END ADDED

// Set active links
if(settings.controlNav){
Expand Down Expand Up @@ -643,7 +723,7 @@
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
Expand Down
Loading