https://github.com/rayiumir/galleryslideshow
A simple library to create photo gallery thumbnails with jQuery.
https://github.com/rayiumir/galleryslideshow
Last synced: 5 months ago
JSON representation
A simple library to create photo gallery thumbnails with jQuery.
- Host: GitHub
- URL: https://github.com/rayiumir/galleryslideshow
- Owner: Rayiumir
- Created: 2024-11-20T23:25:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-22T16:05:44.000Z (over 1 year ago)
- Last Synced: 2025-06-08T22:34:53.426Z (about 1 year ago)
- Language: HTML
- Homepage: https://rayiumir.github.io/GallerySlideshow/
- Size: 58.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gallery Slide Show
A simple library to create photo gallery with jQuery.
# How to use
Add JQuery:
```html
```
Add Galleryslide:
```html
```
HTML:
```html
```
CSS:
```css
.gallery {
max-width: 800px;
margin: 0 auto;
}
.main {
width: 100%;
border: 2px solid #ddd;
margin-bottom: 10px;
position: relative;
}
.main img {
width: 100%;
display: block;
}
.thumbnails {
display: flex;
gap: 10px;
overflow: auto;
}
.thumbnail {
width: 100px;
height: 70px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
transition: border 0.3s;
}
.thumbnail:hover,
.thumbnail.active {
border: 2px solid #007BFF;
}
```
jQuery:
```javascript
$(document).ready(function() {
// Handle thumbnail click
$('.thumbnail').on('click', function() {
// Remove 'active' class from all thumbnails
$('.thumbnail').removeClass('active');
// Add 'active' class to the clicked thumbnail
$(this).addClass('active');
// Get the large image URL from data attribute
var largeImage = $(this).data('large');
// Update the main image src
$('#current').attr('src', largeImage);
});
});
```
# Screenshots
