Simple responsive photo slider gallery

Developer
Jelmer
Size
3,558 Kb
Views
16,192
  1. Simple responsive photo slider gallery Previews
  2. Simple responsive photo slider gallery HTML Codes
  3. Simple responsive photo slider gallery CSS Codes
  4. Simple responsive photo slider gallery JS Codes

How do I make an simple responsive photo slider gallery?

This works as well with JavaScript disabled!. What is a simple responsive photo slider gallery? How do you make a simple responsive photo slider gallery? This script and codes were developed by Jelmer on 02 December 2022, Friday.

Simple responsive photo slider gallery Previews
IQ Test

Simple responsive photo slider gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple responsive photo slider gallery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="photo-gallery"> <div class="photo-gallery-view"> <div class="photo-gallery-height"><!-- this determines ma height! --></div> <img id="photo1" src="//placehold.it/500x400&text=1" class="active"/> <img id="photo2" src="//placehold.it/500x400&text=2" /> <img id="photo3" src="//placehold.it/500x400&text=3" /> <img id="photo4" src="//placehold.it/500x400&text=4" /> </div> <div class="photo-gallery-thumbnails"> <a href="#photo1"><img src="//placehold.it/125x85&text=1" /></a> <a href="#photo2"><img src="//placehold.it/125x85&text=2" /></a> <a href="#photo3"><img src="//placehold.it/125x85&text=3" /></a> <a href="#photo4"><img src="//placehold.it/125x85&text=4" /></a> </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cum laborum ab enim voluptates obcaecati possimus voluptate ullam velit, iusto repudiandae eius ad quis qui ratione odit sint incidunt deserunt est, nihil aliquid. Ducimus pariatur, nemo officiis autem officia cum?</p>
<p>Non quo adipisci quia? Iste dolorum ipsum quo qui aspernatur deleniti, quaerat earum ducimus porro quam saepe accusantium expedita recusandae sequi tempore inventore est ex! A accusamus corporis nesciunt quidem, voluptates aliquid consectetur nihil nobis aut repudiandae, quibusdam dolore tempora.</p>
<p>Natus distinctio, totam laudantium, quis ipsum id aliquid doloremque. Explicabo recusandae, fugiat voluptate ea eum sit consectetur, minima quo eos reprehenderit itaque quibusdam dolorem et impedit nostrum corporis sequi libero illo eaque adipisci. Nulla optio alias, ratione quibusdam nostrum eum!</p>
<div class="photo-gallery"> <div class="photo-gallery-view"> <img id="photo1" src="//placehold.it/500x400&text=1" class="active"/> <img id="photo2" src="//placehold.it/500x400&text=2" /> <img id="photo3" src="//placehold.it/500x400&text=3" /> <img id="photo4" src="//placehold.it/500x400&text=4" /> </div> <div class="photo-gallery-thumbnails"> <a href="#photo1"><img src="//placehold.it/125x85&text=1" /></a> <a href="#photo2"><img src="//placehold.it/125x85&text=2" /></a> <a href="#photo3"><img src="//placehold.it/125x85&text=3" /></a> <a href="#photo4"><img src="//placehold.it/125x85&text=4" /></a> </div>
</div>
<p>Aspernatur rerum, repellat id quis eos, ullam molestias dicta asperiores minima optio omnis quaerat et delectus accusamus perspiciatis assumenda doloribus est veniam ab voluptate. Aspernatur, ab numquam expedita sunt nemo fugiat repellendus, a impedit, non perferendis ipsa ratione earum voluptas.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple responsive photo slider gallery - Script Codes CSS Codes

.photo-gallery { width: 500px; margin: auto; max-width: 100%; overflow: hidden;
}
.photo-gallery img { display: block; outline: 1px solid #333; max-width: 100%;
}
.photo-gallery-view:before { content: ""; display: block; height: 0; padding-top: 80%;
}
.photo-gallery-view { position: relative;
}
.photo-gallery-view img { position: absolute; top: 0; right: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; opacity: 0;
}
.photo-gallery-view img:target,
.photo-gallery-view img.active { z-index: 9; opacity: 1;
}
.photo-gallery-thumbnails a { display: block; float: left; width: 50%;
}
@media screen and (min-width: 321px) { .photo-gallery-thumbnails a { width: 25%; }
}
.photo-gallery-thumbnails img { width: 100%; display: block;
}
body { margin-top: 4%;
}
* { box-sizing: border-box;
}

Simple responsive photo slider gallery - Script Codes JS Codes

$(function() { var photoGallery = function($photoGalleryElement) { var $photoGallery = $photoGalleryElement, $photoLinks = $photoGallery.find('a[href*="#photo"]'), $photos = $photoGallery.find('img[id*="photo"]'), activeClass = 'active'; function init() { $photoGallery.addClass('enabled'); $photoGallery.on({ click: function(e) { e.preventDefault(); var $photoTarget = $(this).attr('href'); $photos.removeClass(activeClass); $photoGallery.find($photoTarget).addClass(activeClass); } }, 'a[href*="#photo"]') } init(); } $.each($('.photo-gallery'), function() { // Try commenting out this line below to see no-js functionality! var gallery = new photoGallery( $(this) ); });
});
Simple responsive photo slider gallery - Script Codes
Simple responsive photo slider gallery - Script Codes
Home Page Home
Developer Jelmer
Username jelmerdemaat
Uploaded December 02, 2022
Rating 3
Size 3,558 Kb
Views 16,192
Do you need developer help for Simple responsive photo slider gallery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jelmer (jelmerdemaat) Script Codes
Name
How to force download a file with JavaScript
Test current page in Google PageSpeed
CSS only loading spinner
Animated counter element
Ungrid with gutters
Loading spinner moving bars
Get Gist comments using GitHub API
Replaced content cannot have pseudo elements
Little loading spinner
CSS grid system using justify
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!