summaryrefslogtreecommitdiffstats
path: root/parts/gallery-genre.php
blob: 265109441bd8601295949321f0dafda47d6461a9 (plain)
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
<div class="container-fluid"> <!-- top container start -->

    <div class="row"> <!-- loading img start -->
        <div class="col-sm-12">
            <img id="vm-loading-img" class="img-responsive loading-vm"
                 src="/assets/img/loading-vm.gif"
                 alt="[ Loading... ]">
        </div>
    </div> <!-- loading img end -->

    <!-- photoset row start -->
    <div class="row">
        <div class="col-sm-12">

            <!-- photoset grid start -->
            <div class="photoset-grid-custom" style="visibility: hidden;">
                <?php foreach($images as $i => $img) { ?>
		    <img class="img-responsive" src="<?=$images_root?>/<?=$img?>"
			 alt="[ <?=$gallery_name?> - <?=$img?> ]"/>
                <?php } ?>
            </div>
            <!-- photoset grid end -->

        </div>
    </div>
    <!-- photoset row end -->

</div>
<!-- top container end -->

<script>
 $(document).ready(setupPhotoGrid);

 function setupPhotoGrid() {
     var layout_spec = '';
     var screenWidth = $(window).width();
     var no_images = <?=count($images)?>;

     var l = [];
     var li; // index for array `l'.
     var layout_array = [];
     var i = 0; // index for array `layout_array'.

     if(screenWidth <= 736) {
         l = [1, 2];
     }
     else {
         l = [3, 3];
     }

     var sum = 0;
     var iter = 0;
     while(sum != no_images) {
         li = iter++ % 2;
         if(sum + l[li] > no_images)
             continue;

         sum += l[li];
         layout_array[i++] = l[li];
     }

     for(i = 0; i < layout_array.length; i++) {
         layout_spec += layout_array[i];
     }

     $('.photoset-grid-custom').photosetGrid({
         highresLinks: true,
         gutter: '5px',
         layout: layout_spec,
         rel: 'category',
         onInit: function(){},
         onComplete: function(){
             $('img').remove('#vm-loading-img');
             $('.photoset-grid-custom').attr('style', '');
             $('.photoset-grid-custom a').colorbox({
                 photo: true,
                 scalePhotos: true,
                 maxHeight:'90%',
                 maxWidth:'90%'
             });
         }
     });
 }

 function adjustHLine() {
     $('.hr-long').css('width',
                       $('.photoset-grid-custom').width() - 20);
 }
 $(document).ready(adjustHLine);
 $(window).resize(adjustHLine);
</script>