UNPKG

grid-accordion-js

Version:

Modular grid accordion built in Vanilla JavaScript.

bqworks.net/grid-accordion/

bqworks/grid-accordion-js

126 lines (98 loc) • 5.75 kB
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
126
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Grid Accordion - Example 2</title> <link rel="stylesheet" type="text/css" href="../build/grid-accordion.css" media="screen"/> <link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/> <script type="text/javascript" src="../build/grid-accordion.js"></script> <script type="text/javascript"> document.addEventListener( 'DOMContentLoaded', () => { const accordion = new GridAccordion( '#example2', { width: 960, height: 800, responsiveMode: 'custom', columns: 3, rows: 3, autoplay: false, mouseWheel:false, breakpoints: { 600: {columns: 2, rows: 2} } }); }); </script> </head> <body> <!-- Grid Accordion --> <div id="example2" class="grid-accordion"> <div class="ga-panels"> <!-- Panel 1 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image1.jpg" data-retina="https://bqworks.net/grid-accordion/images/image1@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image1@2x.jpg" title="Lorem ipsum dolor sit amet"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image1_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image1_crop@2x.jpg"/> </a> </div> <!-- Panel 2 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image2.jpg" data-retina="https://bqworks.net/grid-accordion/images/image2@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image2@2x.jpg" title="consectetur adipisicing elit"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image2_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image2_crop@2x.jpg"/> </a> </div> <!-- Panel 3 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image3.jpg" data-retina="https://bqworks.net/grid-accordion/images/image3@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image3@2x.jpg" title="sed do eiusmod tempor incididunt"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image3_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image3_crop@2x.jpg"/> </a> </div> <!-- Panel 4 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image4.jpg" data-retina="https://bqworks.net/grid-accordion/images/image4@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image4@2x.jpg" title="ut labore et dolore magna aliqua"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image4_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image4_crop@2x.jpg"/> </a> </div> <!-- Panel 5 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image5.jpg" data-retina="https://bqworks.net/grid-accordion/images/image5@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image5@2x.jpg" title="Ut enim ad minim veniam"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image5_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image5_crop@2x.jpg"/> </a> </div> <!-- Panel 6 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image6.jpg" data-retina="https://bqworks.net/grid-accordion/images/image6@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image6@2x.jpg" title="quis nostrud exercitation ullamco"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image6_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image6_crop@2x.jpg"/> </a> </div> <!-- Panel 7 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image15.jpg" data-retina="https://bqworks.net/grid-accordion/images/image15@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image15@2x.jpg" title="laboris nisi ut aliquip"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image15_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image15_crop@2x.jpg"/> </a> </div> <!-- Panel 8 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image8.jpg" data-retina="https://bqworks.net/grid-accordion/images/image8@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image8@2x.jpg" title="ex ea commodo consequat"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image8_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image8_crop@2x.jpg"/> </a> </div> <!-- Panel 9 --> <div class="ga-panel"> <img class="ga-background" src="https://bqworks.net/grid-accordion/images/image9.jpg" data-retina="https://bqworks.net/grid-accordion/images/image9@2x.jpg"/> <a href="https://bqworks.net/grid-accordion/images/image9@2x.jpg" title="ex ea commodo consequat"> <img class="ga-background-opened" src="https://bqworks.net/grid-accordion/images/image9_crop.jpg" data-retina="https://bqworks.net/grid-accordion/images/image9_crop@2x.jpg"/> </a> </div> </div> </div> <!-- End of Grid Accordion --> </body> </html>