blinkgallery
Version:
om-mouse-move photo gallery with on-click link ridirection (and some other fancy features)
57 lines (55 loc) • 1.27 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>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
margin-bottom: 20px;
}
#blink_gallery {
position: absolute;
height: 500px;
width: 700px;
}
#wrapper {
padding: 20px;
position: relative;
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Blink Gallery</h1>
<div id="blink_gallery"></div>
</div>
</body>
<script src="src/blink.js"></script>
<script>
const blinkGallery1 = new Blink({
containerId: "blink_gallery",
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",
],
caption: "milanese view",
cursorUrl: "/etc/cursor.png",
imgCentered: false,
href: "google.com",
});
</script>
</html>