Using the method I found here I'm trying to upgrade the functionality of my previous question.
Basically I want to cycle through my elements with previous and next buttons. I cannot use nextAll() and prevAll() functions because they are not all in the same wrapper, so I used the most upvoted solution from the first link. Next cycling works fine, and previous doesn't.
var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");
var $previous = $('.previous');
var $next = $('.next');
if ($content.length > 0) {
$item_selector.on('click', function(e) {
e.preventDefault();
var $this = $(this);
load_gallery_container($this);
});
$next.on('click', function(e) {
e.preventDefault();
var $next_item = $content.find('.current').findNext('.item');
if ($content.find('.item').hasClass('current')) {
if ($next_item.length) {
$content.find('.item').removeClass('current');
}
load_gallery_container_next_prev($next_item);
}
});
$previous.on('click', function(e) {
e.preventDefault();
var $prev_item = $content.find('.current').findPrev('.item');
if ($content.find('.item').hasClass('current')) {
if ($prev_item.length) {
$content.find('.item').removeClass('current');
}
load_gallery_container_next_prev($prev_item);
}
});
}
//Next all items
$.fn.findNextAll = function(selector) {
var that = this[0],
selection = $(selector).get();
return this.pushStack(!that && selection || $.grep(selection, function(n) {
return that.compareDocumentPosition(n) & (1 << 2);
// if you are looking for previous elements it should be & (1<<1);
}));
}
$.fn.findNext = function(selector) {
return this.pushStack(this.findNextAll(selector).first());
}
//Previous all items
$.fn.findPreviousAll = function(selector) {
var that = this[0],
selection = $(selector).get();
return this.pushStack(!that && selection || $.grep(selection, function(n) {
return that.compareDocumentPosition(n) & (1 << 1);
// if you are looking for previous elements it should be & (1<<1);
}).reverse());
}
$.fn.findPrev = function(selector) {
return this.pushStack(this.findPreviousAll(selector).first());
}
function load_gallery_container_next_prev($container) {
$loaded_content.find('.div_content').html($container.data('content'));
$container.addClass('current');
}
function load_gallery_container($container) {
if ($container.hasClass("current")) {
$loaded_content.slideUp('slow', function() {
$(this).removeClass('open');
$container.removeClass("current");
});
} else {
var $insert_after = $container.parent('.wrappers'),
$current = $('.current');
$current.removeClass('current');
if ($current.parent('.wrappers').is($insert_after)) {
$loaded_content.find('.div_content').html($container.data('content'));
$container.addClass("current");
} else {
if ($loaded_content.hasClass("open")) {
$loaded_content.slideUp('slow', function() {
$(this).removeClass('open');
$container.removeClass("current");
$loaded_content.detach().insertAfter($insert_after);
$loaded_content.find('.div_content').html($container.data('content'));
});
} else {
$loaded_content.detach().insertAfter($insert_after);
$loaded_content.find('.div_content').html($container.data('content'));
}
$loaded_content.slideDown('slow', function() {
$container.addClass("current");
$(this).addClass('open');
});
}
}
setTimeout(function() {
$('html, body').animate({
scrollTop: $loaded_content.offset().top - 300
}, 500);
}, 600);
}.big_container {
background: #141414;
display: block;
padding: 30px;
}
.wrappers {
width: 500px;
margin: 0 auto;
display: block;
}
.item {
width: 31%;
height: 100px;
margin-right: 1%;
margin-bottom: 30px;
text-align: center;
background: #ccc;
color: #fff;
display: inline-block;
}
.details {
background: #ddd;
width: 100%;
padding: 30px;
display: none;
}
.navigation {
display: block;
text-align: center;
color: #fff;
}
.previous,
.next {
font-size: 18px;
display: inline-block;
margin: 0 12px 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big_container">
<div class="navigation">
<div class="previous">
<</div>
<div class="next">></div>
</div>
<div class="wrappers">
<div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
<div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div>
<div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div>
</div>
<div class="wrappers">
<div class="item" data-content="blabla bla bla randomness">Click on meee!</div>
<div class="item" data-content="blabla bla bla ">Click on meee!</div>
<div class="item" data-content="blabla bla bla weeee">Click on meee!</div>
</div>
<div class="wrappers">
<div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
<div class="item" data-content="blabla bla bla???">Click on meee!</div>
<div class="item" data-content="I am done with blaaaaing">Click on meee!</div>
</div>
<div class="details">The content from div goes here:
<div class="div_content"></div>
</div>
</div>Basically when I click previous I get sent back to first element in the list, and not to the previous one. So the findPrev() function needs modifying, and I tried a lot: changing .first() to .last() and .prev() and even .prevAll(); tried changing return that.compareDocumentPosition(n) & (1<<1);
Nothing changed that would make this go to previous item. Anybody has an idea what is wrong with it?
ANSWER
Ok, so the solution is this:
$.fn.findPreviousAll = function( selector ){
var that = this[ 0 ],
selection = $( selector ).get();
return this.pushStack(
!that && selection || $.grep( selection, function(n){
return that.compareDocumentPosition(n) & (1<<1);
// if you are looking for previous elements it should be & (1<<1);
}).reverse()
);
};
$.fn.findPrev = function( selector ){
return this.pushStack( this.findPreviousAll( selector ).first() );
};
What the findPreviousAll function was doing was returning an array from first element to the one I clicked on, so I just needed to reverse it! And a simple .reverse() did it :)
I updated the snippet so it works! :)
