blinkgallery
Version:
om-mouse-move photo gallery with on-click link ridirection (and some other fancy features)
97 lines (91 loc) • 3.34 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blink gallery example</title>
<link rel="stylesheet" href="/etc/example_style.css" />
</head>
<body>
<div id="wrapper">
<h1>Blink Gallery: an Example Page</h1>
<h2>
Aesthetics
<a href="https://en.wikipedia.org/wiki/Aesthetics"
>an extract from the Wikipedia</a
>
</h2>
<div class="pargraph_with_blink">
<p>
Aesthetics, or esthetics (/ɛsˈθɛtɪks, iːs-, æs-/), is a branch of
philosophy that deals with the nature of beauty and taste, as well as
the philosophy of art (its own area of philosophy that comes out of
aesthetics). It examines aesthetic values, often expressed through
judgments of taste. Scholars in the field have defined aesthetics as
"critical reflection on art, culture and nature". In modern English,
the term "aesthetic" can also refer to a set of principles underlying
the works of a particular art movement or theory (one speaks, for
example, of a Renaissance aesthetic).
</p>
<div id="blink_gallery1"></div>
</div>
<div class="pargraph_with_blink">
<div id="blink_gallery2"></div>
<p>
Aesthetics covers both natural and artificial sources of aesthetic
experience and judgment. It considers what happens in our minds when
we engage with aesthetic objects or environments such as viewing
visual art, listening to music, reading poetry, experiencing a play,
or exploring nature. The philosophy of art specifically studies how
artists imagine, create, and perform works of art, as well as how
people use, enjoy, and criticize art. Aesthetics considers why people
like some works of art and not others, as well as how art can affect
moods or even our beliefs. Both aesthetics and the philosophy of art
ask questions like "What is art?," "What is a work of art?," and "What
makes good art?"
</p>
</div>
<div id="blink_gallery3"></div>
<div id="blink_gallery_fixed"></div>
</div>
</body>
<script src="src/blink.js"></script>
<script>
const blinkGallery1 = new Blink({
containerId: "blink_gallery1",
imgUrls: [
"/etc/gallery1/1.jpg",
"/etc/gallery1/2.jpg",
"/etc/gallery1/3.jpg",
"/etc/gallery1/4.jpg",
"/etc/gallery1/5.jpg",
"/etc/gallery1/6.jpg",
"/etc/gallery1/7.jpg",
],
cursorUrl: "",
imgCenteredX: false,
imgCenteredY: false,
});
const blinkGallery2 = new Blink({
containerId: "blink_gallery2",
imgUrls: [],
cursorUrl: "",
imgCenteredX: false,
imgCenteredY: false,
});
const blinkGallery3 = new Blink({
containerId: "blink_gallery3",
imgUrls: [],
cursorUrl: "",
imgCenteredX: false,
imgCenteredY: false,
});
const blinkGalleryFixed = new Blink({
containerId: "blink_gallery_fixed",
imgUrls: [],
cursorUrl: "",
imgCenteredX: false,
imgCenteredY: false,
});
</script>
</html>