Skip to content

Commit 07958c1

Browse files
nebula-bytenebula-byte
committed
Image switcher
Added all initial codes
1 parent 761fa13 commit 07958c1

File tree

11 files changed

+162
-2
lines changed

11 files changed

+162
-2
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
.DS_Store

‎README.md‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,30 @@
1-
# image-switcher
2-
Switch image on any event
1+
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
2+
3+
# Image Switcher
4+
(https://nebulabyte.com/wp-content/uploads/2020/12/image-switcher.gif)
5+
6+
Add a image-switcher to toggle with a action.
7+
8+
- No localStorage, only DOM
9+
10+
## Usage
11+
12+
1. Load `image-switcher.min.js` at the foot of your page:
13+
14+
```html
15+
<script src="image-switcher.js"></script>
16+
```
17+
18+
2. Add ID to your image switch action:
19+
20+
```html
21+
<a href="#" id="image-switcher-action">
22+
Switch image
23+
</a>
24+
```
25+
26+
3. Add image sources and class to your image tag to switch:
27+
28+
```html
29+
<img class="image-switcher" src="images/1232.jpg" data-switch-src="images/1266.jpg">
30+
```

‎image-switcher.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
(function() {
2+
var action = document.getElementById("image-switcher-action");
3+
4+
if(action){
5+
action.addEventListener("click", function(event) {
6+
var animation = $(action).hasClass('image-switch-animation');
7+
switchImage(animation);
8+
});
9+
function switchImage(animation) {
10+
$(".image-switcher").each(function( index ) {
11+
let xSrc = $(this).data("switch-src");
12+
let ySrc = this.src;
13+
$(this).attr("src", xSrc);
14+
$(this).data("switch-src", ySrc);
15+
if(animation === true){
16+
let animationType = $(this).data('animation');
17+
this.classList.add('animate__animated', 'animate__'+animationType);
18+
this.addEventListener('animationend', () => {
19+
this.classList.remove('animate__animated', 'animate__'+animationType);
20+
});
21+
}
22+
});
23+
}
24+
}
25+
})();

‎images/1232.jpg‎

517 KB
Loading

‎images/1266.jpg‎

570 KB
Loading

‎images/18354592.jpg‎

611 KB
Loading

‎images/20760357.jpg‎

535 KB
Loading

‎images/20760360.jpg‎

504 KB
Loading

‎images/2250.jpg‎

502 KB
Loading

‎index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
11+
/>
12+
</head>
13+
14+
<body>
15+
<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
16+
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
17+
<div
18+
class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl">
19+
</div>
20+
<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
21+
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-end">
22+
<div class="mt-3 sm:mt-0 sm:ml-3">
23+
<a href="#"
24+
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 image-switch-animation" id="image-switcher-action">
25+
Switch image
26+
</a>
27+
</div>
28+
</div>
29+
<div class="max-w-md mx-auto">
30+
31+
<div class="divide-y divide-gray-200">
32+
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
33+
<div class="col-start-2 row-start-1 row-span-3 flex">
34+
<div class="w-full grid grid-cols-3 grid-rows-2 gap-2">
35+
<div class="relative col-span-2 row-span-2">
36+
<img src="images/1232.jpg" loading="lazy" alt=""
37+
class="inset-0 w-full h-full object-cover rounded-lg bg-gray-100 image-switcher"
38+
data-switch-src="images/1266.jpg"
39+
data-animation="bounce"
40+
>
41+
</div>
42+
<div class="relative block">
43+
<img src="images/2250.jpg" loading="lazy" alt=""
44+
class=" inset-0 w-full h-full object-cover rounded-lg bg-gray-100 image-switcher"
45+
data-switch-src="images/20760360.jpg"
46+
data-animation="tada"
47+
>
48+
</div>
49+
<div class="relative block">
50+
<img src="images/18354592.jpg" loading="lazy" alt=""
51+
class=" inset-0 w-full h-full object-cover rounded-lg bg-gray-100 image-switcher"
52+
data-switch-src="images/20760357.jpg"
53+
data-animation="heartBeat"
54+
>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7">
60+
<p class="text-gray-500">Want to dig deeper into Image Switcher?</p>
61+
<p>
62+
<a href="https://github.com/nebula-byte/image-switcher" target="_new" class="text-cyan-600 hover:text-cyan-700"> Read
63+
the doc on GitHub &rarr; </a>
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
73+
<!-- You must load 'image-switcher.js' at the foot of the page -->
74+
<script src="image-switcher.js"></script>
75+
</body>
76+
77+
</html>

0 commit comments

Comments
 (0)