Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
58 ($0.00010 / call)
Example input
To get started, simply copy the prompt and insert it. Use the base of this prompt as a starting point to create your unique gallery!
Example output
Sure! Here's an example of an interactive gallery using HTML, CSS, and JavaScript:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="gallery">
<div class="thumbnails">
<img src="image1.jpg" alt="Image 1" onclick="changeImage('image1.jpg')">
<img src="image2.jpg" alt="Image 2" onclick="changeImage('image2.jpg')">
<img src="image3.jpg" alt="Image 3" onclick="changeImage('image3.jpg')">
</div>
<div class="main-image">
<img id="mainImage" src="image1.jpg" alt="Main Image">
<button onclick="scrollToTop()">Upload Image/Video</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#gallery {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.thumbnails {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.thumbnails img {
width: 100px;
height: 100px;
object-fit: cover;
margin: 0 10px;
cursor: pointer;
}
.main-image {
display: flex;
flex-direction: column;
align-items: center;
}
.main-image img {
width: 300px;
height: 300px;
object-fit: cover;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
```
JavaScript (script.js):
```javascript
function changeImage(imageUrl) {
var mainImage = document.getElementById('mainImage');
mainImage.src = imageUrl;
}
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
```
In this example, the gallery consists of thumbnail images displayed horizontally and a main image that changes when a thumbnail is clicked. The `changeImage` function is called to update the source of the main image when a thumbnail is clicked.
The button with the "Upload Image/Video" label triggers the `scrollToTop` function, which smoothly scrolls the page to the top.
You can replace the `image1.jpg`, `image2.jpg`, and `image3.jpg` with your own image URLs or add more images as needed. Remember to have the actual image files available in the same directory as the HTML file.
Feel free to modify the code and customize the styling to match your desired design.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
20
Views
GPT-3.5-TURBO
🔀 Create the website of your dreams! With your own gallery of videos and images customizable and functional at any time.
🔥 You will have everything you need to create it, such as your own html, css and javascript code.
✨⚡️ Workable for any design, GET IT NOW!
...more
Added over 1 month ago
