room-gallery
Version:
Room Gallery: A 3D carousel - A Responsive 3D Image Slider Implemented in TypeScript as a React Component, Utilizing Vanilla JavaScript and jQuery
53 lines (49 loc) • 2.03 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" title="Room Gallery example" />
<meta name="viewport" content="width=device-width, initial-scale=1" title="Room Gallery example" />
<meta name="theme-color" content="#000000" title="Room Gallery example" />
<meta name="description" content="Room Gallery - react demo page" title="Room Gallery example" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<link rel="apple-touch-icon" href="./logo-64.png" title="Room Gallery example" />
<link rel="manifest" href="./manifest.json" title="Room Gallery example" />
<script src="../build/RoomGallery.js"></script>
<link rel="stylesheet" href="../build/RoomGallery.css">
<title>React - Room Gallery</title>
</head>
<body>
<style>
body,
html {
margin: 0;
}
</style>
<div id="room-gallery"></div>
<script>
const room = new RoomGallery({
element: document.getElementById('room-gallery'),
fetch: './data.json',
settings: {
arrowNav: 'icons',
paginations: 'thumb',
darkNav: 'icon',
zoomNav: 'icon'
},
styles: {
lightButtonBackground: '#000',
buttonDarkWidth: '20px',
buttonZoomWidth: '20px',
buttonExitWidth: '20px',
paginationButtonsBorderRadius: '5px',
lightFloorBackground: 'linear-gradient(to bottom, #b7b7b7, #e0d6cb)',
lightWallBackground: 'linear-gradient(0deg, #e0d6cb, #a2a5a0)',
lightCeilBackground: 'linear-gradient(to bottom, #f0ece9, #e0d6cb)',
darkFloorBackground: 'linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), linear-gradient(to bottom, #b7b7b7, #e0d6cb)',
darkWallBackground: 'linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), linear-gradient(0deg, #e0d6cb, #a2a5a0)'
}
});
</script>
</body>
</html>