ADVERTISEMENT

Accordion Image Gallery Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Accordion Image Gallery Using HTML,CSS and JavaScript

 

ADVERTISEMENT

Accordion Image Gallery Using HTML,CSS and JavaScript
Accordion Image Gallery Using HTML,CSS and JavaScript

ADVERTISEMENT

 

Welcome to the Codewithrandom blog. In this blog, We learn how we create an Accordion Image Gallery. We use Html, Css, and JavaScript for this Accordion Image Gallery.

ADVERTISEMENT

I hope you enjoy our blog so let’s start with a basic html structure for an Accordion Image Gallery.

ADVERTISEMENT

HTML Code For Accordion Image Gallery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion gallery</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="bg"></div>
<div id="fg"></div>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="index.js"></script>
</body>
</html>

There is all the html code for the Accordion Image Gallery. Now, you can see output without css and javascript. Then we write Css for the styling image gallery and give the main Accordion functionality using javascript.

50+ HTML, CSS & JavaScript Projects With Source Code

Output

ADVERTISEMENT

Accordion Image Gallery Using HTML,CSS and JavaScript
Simple Blank Output (we achieve output using css & js)

 

CSS Code For Accordion Image Gallery

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
html, body, #fg, #bg {
width:100%;
height:100%;
color:#fff;
font-size:35px;
font-family:'Montserrat', sans-serif;
overflow:hidden;
}
div {
position:absolute;
top:0;
}
sub {
font-size:12px;
display:block;
}
p {
padding:12px;
}

Here is our updated output HTML + CSS. but when you see the output you get only a blank screen, because we use javascript for inserting images and functionality. let us write javascript code.

10+ HTML CSS Projects For Beginners with Source Code

ADVERTISEMENT

Output

ADVERTISEMENT

Accordion Image Gallery Using HTML,CSS and JavaScript
Simple Blank Output (we achieve output js)

 

JavaScript Code For Accordion Image Gallery

var imgs = [
'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1511576661531-b34d7da5d0bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1502657877623-f66bf489d236?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1506361797048-46a149213205?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50'
],
n = imgs.length,
current = n-1,
closedWidth = Math.floor(window.innerWidth/10)
for (var i=0; i<n; i++){
var bgImg = document.createElement('div');
bg.appendChild(bgImg);
gsap.set(bgImg, {
attr:{id:'bgImg'+i, class:'bgImg'},
width:'100%',
height:'100%',
backgroundImage:'url('+imgs[i]+')',
backgroundSize:'cover',
backgroundPosition:'center'
})
var b = document.createElement('div');
fg.appendChild(b);
gsap.fromTo(b, {
attr:{id:'b'+i, class:'box'},
innerHTML:'<p><sub>Fig.</sub> '+(i+1)+'</p>',
width:'100%',
height:'100%',
borderLeft:(i>0)?'solid 1px #eee':'',
backgroundColor:'rgba(250,250,250,0)',
left:i*closedWidth,
transformOrigin:'100% 100%',
x:'100%'
},{
duration:i*0.15,
x:0,
ease:'expo.inOut'
})
b.onmouseenter = b.onclick = (e)=>{
if (Number(e.currentTarget.id.substr(1))==current) return;
var staggerOrder = !!(current < Number(e.currentTarget.id.substr(1)));
current = Number(e.currentTarget.id.substr(1));
gsap.to('.box', {
duration:0.5,
ease:'elastic.out(0.3)',
left:(i)=>(i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth),
x:0,
stagger: staggerOrder? 0.05:-0.05
})
bg.appendChild( document.getElementById('bgImg'+current) )
gsap.fromTo('#bgImg'+current, {opacity:0}, {opacity:1, duration:0.3, ease:'power1.inOut'})
gsap.fromTo('#bgImg'+current, {scale:1.05, rotation:0.05}, {scale:1, rotation:0, duration:1.5, ease:'sine'})
}
}
window.onresize = (e)=>{
closedWidth = Math.floor(window.innerWidth/10)
gsap.set('.box', { x:0, left:(i)=> (i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth) })
}

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

this is the whole javascript code, also we use Gsap for this hover animation and accordion image gallery effect.

Accordion Image Gallery👇

Accordion Image Gallery Using HTML,CSS and JavaScript
Accordion Image Gallery Using HTML,CSS and JavaScript

 

ADVERTISEMENT

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Now we have completed our Accordion Image Gallery.  Here is our updated output with html,css, and javascript. Hope you like the Accordion gallery. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

Thank you!

ADVERTISEMENT

In this post, we learn how to create an Accordion Image Gallery Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

ADVERTISEMENT

Written by – Code With Random/Anki 

Codepen by – Tom Miller

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Accordion Image Gallery Using HTML,CSS and JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT