Skip to content

Commit

Permalink
fixed pager, next and previous buttons from not loading through js op…
Browse files Browse the repository at this point in the history 
…tions. Added smartRelativeSearch function for loading pager, next and previous buttons.
  • Loading branch information
@mmonkey
mmonkey committed Feb 17, 2015
1 parent 08761aa commit 4e8bc34
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 34 deletions.
20 changes: 13 additions & 7 deletions build/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@
<h1>FireSlider - Development</h1>

<div class="section fireslider js-fireslider">
<ul id="fireSlider" data-fireslider-prev="#prev" data-fireslider-next="#next" data-fireslider-pager="#pager" data-fireslider-delay="4000" data-fireslider-effect="fadeInOut">
<ul id="fireSlider"
data-fireslider-delay="4000"
data-fireslider-effect="fadeInOut"
data-fireslider-pager="#pager">
<li class="slide-1">1
<ul>
<li>1</li>
Expand All @@ -35,13 +38,13 @@ <h1>FireSlider - Development</h1>
<div id="pager"></div>
</div>

<a id="prev" href="">Prev</a>
<a id="next" href="">Next</a>
<a class="prev" href="">Prev</a>
<a class="next" href="">Next</a>

<h2>Slider with Thumbnail Pager</h2>

<div class="section fireslider js-fireslider">
<ul id="fireSlider2" data-fireslider-show="5" data-fireslider-active="3" data-fireslider-prev="#prev2" data-fireslider-next="#next2" data-fireslider-pager="#thumbnailPager" data-fireslider-pager-template='<li class="slide-{{ num }}"><a href="">{{ description }}</a></li>' data-fireslider-speed="400" data-fireslider-delay="2000" data-fireslider-direction="backward" data-fireslider-effect="slideInOut" data-fireslider-easing="[200, 18]" data-fireslider-breakpoints='[
<ul id="fireSlider2" data-fireslider-show="5" data-fireslider-active="3" data-fireslider-pager="#thumbnailPager" data-fireslider-pager-template='<li class="slide-{{ num }}"><a href="">{{ description }}</a></li>' data-fireslider-speed="400" data-fireslider-delay="2000" data-fireslider-direction="backward" data-fireslider-effect="slideInOut" data-fireslider-easing="[200, 18]" data-fireslider-breakpoints='[
{"breakpoint": 360, "show": 1, "active": 1},
{"breakpoint": 580, "show": 2, "active": 1},
{"breakpoint": 720, "show": 3, "active": 2},
Expand All @@ -64,8 +67,8 @@ <h2>Slider with Thumbnail Pager</h2>
</div>

<ul id="thumbnailPager"></ul>
<a id="prev2" href="">Prev</a>
<a id="next2" href="">Next</a>
<a class="prev" href="">Prev</a>
<a class="next" href="">Next</a>

<script type="text/javascript">

Expand All @@ -78,7 +81,10 @@ <h2>Slider with Thumbnail Pager</h2>
// FireSlider.effect.register('slideInOut', slideInOut);

// Calling fireSlider with only JS
var slider = FireSlider.slider('.js-fireslider > ul');
var slider = FireSlider.slider('.js-fireslider > ul', {
next: ".next",
prev: ".prev"
});

// Calling fireSlider with jQuery
//$('.js-fireslider > ul').fireSlider({speed: 600});
Expand Down
62 changes: 40 additions & 22 deletions build/js/fireSlider.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,9 @@
/*! fireSlider (1.2.3) (C) 2014 CJ O'Hara and Tyler Fowle. MIT @license: en.wikipedia.org/wiki/MIT_License */
/*! fireSlider (1.2.4) (C) 2014 CJ O'Hara and Tyler Fowle. MIT @license: en.wikipedia.org/wiki/MIT_License */
var V = (window.jQuery) ? $.Velocity : Velocity;

(function (FireSlider, window, undefined) {

var fireSlider = {
length: 0,
nextSlide: {},
pause: {},
play: {},
prevSlide: {},
reverse: {},
selector: null,
sliders: [],

slider: function(sel, opts, breakpoints) {

var elements = document.querySelectorAll(sel);
Expand All @@ -24,7 +15,7 @@ var V = (window.jQuery) ? $.Velocity : Velocity;

// Initialize each slider independently that match the selector
for(var i = 0; i < elements.length; i++) {
var slider = fireSlider.init(elements[i], this.options, this.breakpoints);
var slider = fireSlider.init(elements[i], opts, breakpoints);

elements[i].nextSlide = slider.next;
elements[i].pause = slider.pause;
Expand Down Expand Up @@ -82,6 +73,7 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
data: {},
isPaused: false,
next: {},
num: 0,
options: {},
pause: {},
play: {},
Expand All @@ -95,6 +87,9 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
windowTimer: {},
};

// Set slider number
fs.num = this.sliders.length + 1;

// Load element
fs.slider = elem;

Expand Down Expand Up @@ -169,16 +164,12 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
windowWidth: window.innerWidth
};

fireSlider._utilities.smartElementSearch(fs.options.prev, fs.slider, fs.num);

// Load prev, next, and pager elements
if(typeof fs.options.prev !== "undefined" || typeof fs.data.firesliderPrev !== "undefined") {
fs.settings.prev = (typeof fs.options.prev !== "undefined") ? document.querySelectorAll(fs.options.prev)[0] : document.querySelectorAll(fs.data.firesliderPrev)[0];
}
if(typeof fs.options.next !== "undefined" || typeof fs.data.firesliderNext !== "undefined") {
fs.settings.next = (typeof fs.options.next !== "undefined") ? document.querySelectorAll(fs.options.next)[0] : document.querySelectorAll(fs.data.firesliderNext)[0];
}
if(typeof fs.options.pager !== "undefined" || typeof fs.data.firesliderPager !== "undefined") {
fs.settings.pager = (typeof fs.options.pager !== "undefined") ? document.querySelectorAll(fs.options.pager)[0] : document.querySelectorAll(fs.data.firesliderPager)[0];
}
fs.settings.prev = (typeof fs.options.prev !== 'undefined') ? fireSlider._utilities.smartElementSearch(fs.options.prev, fs.slider, fs.num) : 'undefined';
fs.settings.next = (typeof fs.options.next !== 'undefined') ? fireSlider._utilities.smartElementSearch(fs.options.next, fs.slider, fs.num) : 'undefined';
fs.settings.pager = (typeof fs.options.pager !== 'undefined') ? fireSlider._utilities.smartElementSearch(fs.options.pager, fs.slider, fs.num) : 'undefined';

function reloadSlider() {
fs.slides = fireSlider._utilities.getDirectChildren(fs.slider, fs.options.slide);
Expand Down Expand Up @@ -668,7 +659,7 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
}

// Disable link interaction if slide is not active slide
if(fs.options.disableLinks && typeof fs.slider !== 'undefined') {
if(fs.options.disableLinks) {
fireSlider._utilities.listen(fs.slider, 'click', function(e) {
var target = (e.target) ? e.target : e.srcElement;
if(target.tagName === "A") {
Expand All @@ -677,7 +668,6 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
else e.returnValue = false;
}
}
return false;
});
}

Expand Down Expand Up @@ -883,6 +873,7 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
return options;
},

// Removes properties from object that are 'undefined'
removeUndefined: function(object) {
for(var key in object) {
if(typeof object[key] === "undefined") delete object[key];
Expand All @@ -894,6 +885,33 @@ var V = (window.jQuery) ? $.Velocity : Velocity;
return (string.toLowerCase() === 'true') ? true : false;
},

// Returns the best matching element relative to the relativeElement or slide number
smartElementSearch: function(sel, relativeElem, num) {
// If selector ends with an id attribute, return matching element
var parts = sel.split(' ');
var last = parts[parts.length - 1];
if(last.indexOf('#') > -1) {
return document.querySelectorAll(sel)[0];
}

// If selector is found in sibling elements, return matching sibling
var siblingMatches = fireSlider._utilities.getDirectChildren(relativeElem.parentNode, sel);
if(typeof siblingMatches !== 'undefined') {
if(siblingMatches.length === 1) {
return siblingMatches[0];
}
}

// If number of matches is >= this slide's number return matching element of the same index
var allMatches = document.querySelectorAll(sel);
if(allMatches.length >= num) {
return allMatches[num - 1];
}

// Else return first match
return document.querySelectorAll(sel)[0];
},

// Custom events will bind to these htmlEvents in ie < 9
htmlEvents: {
onload:1,
Expand Down
Loading

0 comments on commit 4e8bc34

Please sign in to comment.