-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgaleria.html
141 lines (128 loc) · 7.51 KB
/
galeria.html
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains; preload">
<meta http-equiv="X-Frame-Options" content="deny">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta name="referrer" content="no-referrer">
<title>Banda Little Dolly - Galeria de Fotos</title>
<meta name="description" content="Galeria de fotos da banda Little Dolly.">
<meta name="keywords"
content="littledolly, banda littledolly, banda little dolly, little dolly, littledolly banda, little dolly banda, música em ponta grossa">
<meta name="robots" content="index, follow, all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="Portuguese">
<meta name="revisit-after" content="1 days">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://littledolly.com.br" />
<meta property="og:title" content="Banda Little Dolly" />
<meta property="og:description" content="Galeria de fotos da banda Little Dolly." />
<meta property="og:image" content="https://cdn.littledolly.com.br/imagens/logo.jpeg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://littledolly.fom.br" />
<meta property="twitter:title" content="Banda Little Dolly" />
<meta property="twitter:description" content="Galeria de fotos da banda Little Dolly." />
<meta property="twitter:image" content="https://cdn.littledolly.com.br/imagens/logo.jpeg" />
<!-- CSS/Script -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7BXT0LZ5TW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-7BXT0LZ5TW');
</script>
</head>
<body class="dark-mode">
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="container">
<a style="font-family: 'LetristaScript'; font-size: 26px;" class="navbar-brand" href="/">Little Dolly</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="artistas.html"><i class="fa-solid fa-microphone-lines"></i> Artistas</a></li>
<li class="nav-item"><a class="nav-link" href="shows.html"><i class="fa-solid fa-video"></i> Shows</a></li>
<li class="nav-item"><a class="nav-link" href="equipamentos.html"><i class="fa-solid fa-guitar"></i> Equipamentos</a></li>
<li class="nav-item"><a class="nav-link" href="reportagens.html"><i class="fa-solid fa-camera"></i> Reportagens</a></li>
<li class="nav-item"><a class="nav-link" href="galeria.html"><i class="fa-solid fa-images"></i> Galeria de Fotos</a></li>
<li class="nav-item"><a class="nav-link" href="contato.html"> <i class="fa-solid fa-envelope"></i> Contato</a></li>
</ul>
</div>
</nav>
</header>
<section class="container mt-5 mb-5 section bg-dark text-white animate__animated animate__fadeInLeft">
<h2 class="text-center mb-4">Galeria de Fotos</h2>
<div class="row row-cols-1 row-cols-md-3 g-4" id="photos-container">
<!-- Fotos seram carregadas aqui -->
</div>
</section>
<footer class="bg-dark text-white py-3">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>© 2023 <a href="/">Banda Little Dolly</a>. Todos os direitos reservados.</p>
</div>
<div class="col-md-6 text-center">
<ul class="list-unstyled">
<li><a class="footer" href="artistas.html"><i class="fa-solid fa-microphone-lines"></i> Artistas</a></li>
<li><a class="footer" href="shows.html"><i class="fa-solid fa-video"></i> Shows</a></li>
<li><a class="footer" href="equipamentos.html"><i class="fa-solid fa-guitar"></i> Equipamentos</a></li>
</ul>
</div>
<div class="col-md-6 text-center">
<ul class="list-unstyled">
<li><a class="footer" href="reportagens.html"><i class="fa-solid fa-camera"></i> Reportagens</a></li>
<li><a class="footer" href="galeria.html"><i class="fa-solid fa-images"></i> Galeria de Fotos</a></li>
<li><a class="footer" href="contato.html"> <i class="fa-solid fa-envelope"></i> Contato</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script>
function loadPhotosFromJSON() {
const photosContainer = document.getElementById('photos-container');
fetch('galeria.json')
.then(response => response.json())
.then(data => {
data.forEach(photo => {
const photoElement = document.createElement('div');
photoElement.className = 'photo col mb-4';
const imgContainer = document.createElement('div');
imgContainer.className = 'image-container';
const img = document.createElement('img');
img.src = photo.imageSrc;
img.alt = photo.title;
img.className = 'img-fluid rounded section-img';
img.addEventListener('click', function () {
openFullscreenImage(photo.imageSrc);
});
photoElement.appendChild(img);
photosContainer.appendChild(photoElement);
});
})
.catch(error => console.error('Erro ao carregar os dados da galeria:', error));
}
window.addEventListener('load', loadPhotosFromJSON);
</script>
</body>
</html>