WebBugs: Image Gallery

Tired of javascript for creating galleries? How about trying your hands on using CSS for creating galleries with some awesome effect.

I am glad to show what I did.

Lets start with the basic example for fade animation. Keeping it simple I am adding only script needed to animate.

Demo 1

Img 1

Img 2

Img 3

Img 4

Img 5

Img 6

HTML Markup

   
<div class="cb-main">
 <div class="cb-slideshow">
  <div>Img 1</div>
  <div>Img 2</div>
  <div>Img 3</div>
  <div>Img 4</div>
  <div>Img 5</div>
  <div>Img 6</div>
 </div>
</div>

CSS

   
    
/* Set animation for each image */
.cb-slideshow div {
 -webkit-animation: imageAnimation 30s linear infinite 0s;
}

/* Setting background image and delay , example */
.cb-slideshow div:nth-child(1) { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSo_-tkpRIGoyp3QnAYAVlhFXCC-R8Ani6eN4Qyf9RTkfoHhS5mSsvSh3_MBzhGutC-updYhyVNoM0obxBRy_cwfpTm-7OLOyums7dspEZ_hW2Pra7kx9tJn7K5a3wZ1YN3C6kxT6yDY/s1600/1.jpg) 
}
.cb-slideshow div:nth-child(2) { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9LKwYc3CjCTMjohNlA-mpF6Hj7LbvR2w0JlybQQ-Kjt8BhpCQnq_QkVrjE_suoY-IhBFCTxCxbSR-Q-V7YDMpWNFSmI_yXvZL7G65g38ayuqBZN7RivbIwjsop7IDQRwhJ7zu0SBUUI/s1600/2.jpg);
 -webkit-animation-delay: 6s;
}

/* Defining keyframe */
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
 0% { opacity: 0;
 -webkit-animation-timing-function: ease-in; }
 8% { opacity: 1;
   -webkit-animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}

Now with a slightest change in the above example we can create another effects

Demo 2

Img 1

Img 2

Img 3

Img 4

Img 5

Img 6

CSS

   
/* Making changes in the keyframe animation in DEMO 1 */
@-webkit-keyframes imageAnimation { 
 0% { opacity: 0;
  -webkit-transform: scale(1);
  -webkit-animation-timing-function: ease-in;
 }
 8% { opacity: 1;
  -webkit-transform: scale(1.5);
   -webkit-animation-timing-function: ease-out; 
 }
 17% { opacity: 1;
  -webkit-transform: scale(1.5); 
 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}

Demo 3

Img 1

Img 2

Img 3

Img 4

Img 5

Img 6

CSS

   
/* Making changes in the keyframe animation in DEMO 1 */
@-webkit-keyframes imageAnimation { 
 0% { opacity: 0;
 -webkit-animation-timing-function: ease-in; }
 8% { opacity: 1;
   -webkit-animation-timing-function: ease-out; }
 17% { opacity: 1;
 -webkit-transform: scale(1); }
 25% { opacity: 0 }
 100% { opacity: 0 ;
 -webkit-transform: scale(10);
 }
}

Now lets add navigation for the gallery

Demo 4

HTML Markup

   
<ul class="slides">
 <input type="radio" name="radio-btn" id="img-1" checked />
 <li class="slide-container">
  <div class="slide">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSo_-tkpRIGoyp3QnAYAVlhFXCC-R8Ani6eN4Qyf9RTkfoHhS5mSsvSh3_MBzhGutC-updYhyVNoM0obxBRy_cwfpTm-7OLOyums7dspEZ_hW2Pra7kx9tJn7K5a3wZ1YN3C6kxT6yDY/s1600/1.jpg" />
  </div>
 </li>

 <input type="radio" name="radio-btn" id="img-2" />
 <li class="slide-container">
  <div class="slide">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9LKwYc3CjCTMjohNlA-mpF6Hj7LbvR2w0JlybQQ-Kjt8BhpCQnq_QkVrjE_suoY-IhBFCTxCxbSR-Q-V7YDMpWNFSmI_yXvZL7G65g38ayuqBZN7RivbIwjsop7IDQRwhJ7zu0SBUUI/s1600/2.jpg" />
  </div>
 </li>
</ul>

<li class="nav-dots">
  <label for="img-1" class="nav-dot" id="img-dot-1"></label>
  <label for="img-2" class="nav-dot" id="img-dot-2"></label>
</li>

'slides' act as the main container for the gallery

radio button is used for the navigation, the li below radio button currently checked is displayed

'nav-dots' is the container for the navigation buttons. Each label when clicked checks the reference radio as specified by 'for' attribute.

CSS

   
/* By default transforming the image to rotate 360deg and scale to 0 */
.slide {
 transform: rotate(360deg) scale(0);
}

/* When navigation dot is clicked, rotating image to 0 deg and scaling it to 1  */
input:checked + .slide-container  .slide {
 transform: rotate(0deg) scale(1);
}

Making a slight change in DEMO 4, we can create a new animation effect.

Demo 5

CSS

   
/* By default transforming the image to scale to 0 */
.slide {
 transform: scale(0);
}

/* When navigation dot is clicked, scaling it to 1  */
input:checked + .slide-container  .slide {
 transform: scale(1);
}

One more change in DEMO 4, and yet another animation effect.

Demo 6

CSS

   
/* By default transforming the image to rotateZ by -10deg */
.slide {
  transform: rotateZ(-10deg);
}

/* When navigation dot is clicked, rotateZ to 0deg  */
input:checked + .slide-container  .slide {
 transform: rotateZ(0);
}

You can download the demo here.

P.S. : These demos uses CSS3, this example is not supported by IE, will update the post with the work around. Thanks for having a look :)

Saturday, 14 December 2013

CSS Gallery