makeGallery/functions.js at master · setrin/makeGallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/*jshint latedef: true */
/*global console */
/*global jQuery */
/*global $ */

(function ($) {
    "use strict";
    $.fn.makeGallery = function (options) {
        var parentElement = this,
            defaultImages = parentElement.children(),
            newGallery = null,
            numberOfChlids = defaultImages.length - 1,
            settings = $.extend({
                position: 0
            }, options),

            /**
             * Convert data to object
             * @param int defaultImagesIndex
             * @return object
             */
            convertData = function (defaultImagesIndex) {
                var holder = defaultImages[defaultImagesIndex],
                    dataAttrs = {
                        dataTitle: $(holder).attr("data-title"),
                        dataAuthor: $(holder).attr("data-author"),
                        dataClass: $(holder).attr("class"),
                        dataHref: $(holder).attr("href"),
                        dataImage: $(holder).attr("data-img")
                    };
                return dataAttrs;
            },

            /**
             * Append new gallery to parentElement
             * @return void
             */
            appendNewGallery = function () {
                var i,
                    defaultImagesLength = defaultImages.length,
                    imageDataHolder = null,
                    pageing = "",
                    newGalleryString = "<div class='gallery'><div class='navigationHolder' data-position='prev'><a href='#' class='navigation' data-position='prev'><</a></div>";
                for (i = 0; i < defaultImagesLength; i++) {
                    imageDataHolder = convertData(i);
                    newGalleryString += "<a href='" + imageDataHolder.dataHref + "' class='picture hidden' data-order='" + i + "'><img src='" + imageDataHolder.dataImage + "' /><ul><li>" + imageDataHolder.dataTitle + "</li><li>@" + imageDataHolder.dataAuthor + "</li></ul></a>";
                    pageing += "<a href='#' class='pageing' data-position=" + i + ">" + (i + 1) + "</a>";
                }

                $(parentElement).children().addClass("hidden");
                newGalleryString += "<div class='navigationHolder' data-position='next'><a href='#' class='navigation' data-position='next'>></a></div><ul class='pageingUl'>" + pageing + "</ul></div>";
                newGallery = $(newGalleryString);
                $(parentElement).append(newGallery);
            },

            /**
             * Highlight currently selected page
             * @param int pastPage
             * @return void
             */
            highlitePage = function (pastPosition) {
                $(newGallery).children(".pageingUl").children(".pageing[data-position*=" + pastPosition + "]").removeClass('highlight');
                $(newGallery).children(".pageingUl").children(".pageing[data-position*=" + settings.position + "]").addClass('highlight');
            },

            /**
             * Show/Hide navigation arrows
             * @return void
             */
            manageNavigation = function () {
                if (settings.position === 0) {
                    $(newGallery).children(".navigationHolder[data-position=prev]").children(".navigation").addClass("hidden");
                    $(newGallery).children(".navigationHolder[data-position=next]").children(".navigation").removeClass("hidden");
                } else if (settings.position === numberOfChlids) {
                    $(newGallery).children(".navigationHolder[data-position=next]").children(".navigation").addClass("hidden");
                    $(newGallery).children(".navigationHolder[data-position=prev]").children(".navigation").removeClass("hidden");
                } else {
                    $(newGallery).children(".navigationHolder[data-position=prev]").children(".navigation").removeClass("hidden");
                    $(newGallery).children(".navigationHolder[data-position=next]").children(".navigation").removeClass("hidden");
                }
            },

            /**
             * Go to specific page
             * @param int dataPosition
             * @return void
             */
            goToPage = function (dataPosition) {
                var children = null,
                    i,
                    pastPosition = settings.position;

                $(newGallery).children(".picture[data-order*=" + pastPosition + "]").addClass('hidden');
                if (dataPosition === "next") {
                    settings.position++;
                    if (settings.position > numberOfChlids) {settings.position = numberOfChlids; }
                } else if (dataPosition === "prev") {
                    settings.position--;
                    if (settings.position < 0) {settings.position = 0; }
                } else {
                    settings.position = parseInt(dataPosition);
                }

                highlitePage(pastPosition);
                manageNavigation();
                $(newGallery).children(".picture[data-order*=" + settings.position + "]").removeClass('hidden');
            };

        if (settings.position > 0) {settings.position -= 1; }
        appendNewGallery();
        goToPage(settings.position);
        $(parentElement).on("click", '.navigation', function () {
            goToPage($(this).attr("data-position"));
        });

        $(parentElement).on("click", '.pageing', function () {
            goToPage($(this).attr("data-position"));
        });
    };
}(jQuery));

window.onload = function () {
    "use strict";
    $("#myGallery").makeGallery({position: 5});
};