PiNGO v0.5

Previous Next Group Object Active for Jquery

by Andrey Aires

HTML

<div class="list">
  <ul>
    <li class="item"><a href="/link1">Link Listed One</a></li>
    <li class="item"><a href="/link2">Link Listed Two</a></li>
    <li class="item"><a href="/link3">Link Listed Three</a></li>
    <li class="item"><a href="/link4">Link Listed Four</a></li>
    <li class="item"><a href="/link5">Link Listed Five</a></li>
    <li class="item"><a href="/link6">Link Listed Six</a></li>
    <li class="item"><a href="/link7">Link Listed Seven</a></li>
    <li class="item"><a href="/link8">Link Listed Eight</a></li>
    <li class="item"><a href="/link9">Link Listed Nine</a></li>
    <li class="item"><a href="/link10">Link Listed Ten</a></li>
    <li class="item"><a href="/link11">Link Listed Eleven</a></li>
    <li class="item"><a href="/link12">Link Listed Twelve</a></li>
    <li class="item"><a href="/link13">Link Listed Thirteen</a></li>
    <li class="item"><a href="/link14">Link Listed Fourteen</a></li>
    <li class="item"><a href="/link15">Link Listed Fifteen</a></li>
    <li class="item"><a href="/link16">Link Listed Sixteen</a></li>
    <li class="item"><a href="/link17">Link Listed Seventeen</a></li>
    <li class="item"><a href="/link18">Link Listed Eighteen</a></li>
    <li class="item"><a href="/link19">Link Listed Nineteen</a></li>
    <li class="item active"><a href="/link20">Link Listed Twenty</a></li>
    <li class="item"><a href="/link21">Link Listed Twenty One</a></li>
    <li class="item"><a href="/link22">Link Listed Twenty Two</a></li>
    <li class="item"><a href="/link23">Link Listed Twenty Three</a></li>
    <li class="item"><a href="/link24">Link Listed Twenty Four</a></li>
  </ul>

  <button class="prev">&lt;</button>&nbsp;
  <button class="next">&gt;</button>
</div>

CSS

.active-item {
  font-weight: bold;
}

JavaScript

var loopColunas = function (list, show, activeItem) {

        var groupSize = Math.ceil(list.length / show);
        var activeGroup = 0;
        var currentGroup = {};
        var activeGroupForItem = Math.floor(list.index(activeItem) / show);

        var resetList = function () {
            list.each(function () {
                $(this).css('display', 'none');
            });
        }

        var showCurrentGroup = function () {
            resetList();
            $.each(currentGroup, function () {
                $(this).css('display', 'inline-block');
            });
        };

        var setCurrentGroup = function () {

            var result = {};
            for (var i = activeGroup * show; i < (activeGroup * show) + show; i++) {
                result[i] = list[i];
            }
            currentGroup = result;

            showCurrentGroup();
        };
        
        var nextGroup = function () {
            if (activeGroup >= groupSize - 1) {
                activeGroup = 0;
            } else {
                activeGroup++;
            }
            setCurrentGroup(activeGroup);
        };

        var prevGroup = function () {
            if (activeGroup <= 0) {
                activeGroup = groupSize - 1;
            } else {
                activeGroup--;
            }
            setCurrentGroup(activeGroup);
        };

        var init = function () {
            if (activeItem.length > 0) {
                activeGroup = activeGroupForItem;
            }

            setCurrentGroup();
        }

        $('.next').click(nextGroup);
        $('.prev').click(prevGroup);

        init();
    };
  loopColunas($('.list > ul > li'), 3, $(".active.item"));