Home » Tutorials

Photo Gallery with AngularJS and CSS3

Image Tutorials
Author Reading 10 min Views 818 Published by Modified by

Today I will show you the process of creating photo slider with AngularJS and CSS3. The slider itself is not very complicated, but it will have a unique 3D effect when we turn the slides. During of the creation our gallery – we will use AngularJS v1.2. This framework will help us create the HTML markup and the turning slides mechanism. We will have two buttons to switch slides back and forth, as well as a small panel with thumbnails to switch immediately to a desired slide.

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/style.css
  5. Step 3. JavaScript
  6. js/app.js
  7. Step 4. Images
  8. Conclusion
Live Demo

Step 1. HTML

First at all we have to prepare a proper header (with including all necessary resources):

index.html

01 <!DOCTYPE html>
02 <html ng-app="example366">
03 <head>
04     <meta charset="utf-8" />
05     <meta name="author" content="Script Tutorials" />
06     <title>Photo Gallery with AngularJS and CSS3 | Script Tutorials</title>
07     <meta name="description" content="Photo Gallery with AngularJS and CSS3 - demo page">
08     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
09     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
10     <!-- add styles -->
11     <link href="css/style.css" rel="stylesheet" type="text/css" />
12     <!-- add javascripts -->
13     <script src="js/jquery-2.0.3.min.js"></script>
14     <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
15     <script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
16     <script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script>
17     <script src="js/app.js"></script>
18 </head>

This is rather ordinary header: different meta infos, styles and javascripts. Now – the slider itself:

01 <body ng-controller="MainCtrl">
02     <header>
03         <a href="https://www.script-tutorials.com/demos/366/index.html" class="logo"><img src="images/logo.png" /></a>
04     </header>
05     <!-- slider container -->
06     <div class="container slider">
07         <!-- enumerate all photos -->
08         <img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />
09         <!-- prev / next controls -->
10         <a class="arrow prev" href="#" ng-click="showPrev()"></a>
11         <a class="arrow next" href="#" ng-click="showNext()"></a>
12         <!-- extra navigation controls -->
13         <ul class="nav">
14             <li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
15                 <img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
16             </li>
17         </ul>
18     </div>
19 </body>

In the beginning, we indicated the main controller (for the <body>): MainCtrl. Then, to enumerate all the given photos, we used the following technique: ng-repeat=”photo in photos”. This allowed us to create multiple images and thumbnails for our navigation bar. To bind the onclick event, we used ‘ng-click’ event attribute. AngularJS also allows us to bind swipe actions (for mobile devices): ‘ng-swipe-left’ and ‘ng-swipe-right’.

Step 2. CSS

All styles are divided into three sections: styles for the slider and its slides, styles for the navigation arrows and styles for the thumbnail navigation bar:

css/style.css

001 .arrow {
002     cursor: pointer;
003     display: block;
004     height: 64px;
005     margin-top: -35px;
006     outline: medium none;
007     position: absolute;
008     top: 50%;
009     width: 64px;
010     z-index: 5;
011 }
012 .arrow.prev {
013     background-image: url("../images/prev.png");
014     left: 20px;
015     opacity: 0.2;
016     transition: all 0.2s linear 0s;
017 }
018 .arrow.next {
019     background-image: url("../images/next.png");
020     opacity: 0.2;
021     right: 20px;
022     transition: all 0.2s linear 0s;
023 }
024 .arrow.prev:hover{
025     opacity:1;
026 }
027 .arrow.next:hover{
028     opacity:1;
029 }
030 .nav {
031     bottom: -4px;
032     display: block;
033     height: 48px;
034     left: 0;
035     margin: 0 auto;
036     padding: 1em 0 0.8em;
037     position: absolute;
038     right: 0;
039     text-align: center;
040     width: 100%;
041     z-index: 5;
042 }
043 .nav li {
044     border: 5px solid #AAAAAA;
045     border-radius: 5px;
046     cursor: pointer;
047     display: inline-block;
048     height: 30px;
049     margin: 0 8px;
050     position: relative;
051     width: 50px;
052 }
053 .nav li.active {
054     border: 5px solid #FFFFFF;
055 }
056 .nav li img {
057     width: 100%;
058 }
059 .slider {
060     border: 15px solid #FFFFFF;
061     border-radius: 5px;
062     height: 500px;
063     margin: 20px auto;
064     position: relative;
065     width: 800px;
066     -webkit-perspective: 1000px;
067     -moz-perspective: 1000px;
068     -ms-perspective: 1000px;
069     -o-perspective: 1000px;
070     perspective: 1000px;
071     -webkit-transform-style: preserve-3d;
072     -moz-transform-style: preserve-3d;
073     -ms-transform-style: preserve-3d;
074     -o-transform-style: preserve-3d;
075     transform-style: preserve-3d;
076 }
077 .slide {
078     position: absolute;
079     top: 0;
080     left: 0;
081 }
082 .slide.ng-hide-add {
083     opacity:1;
084     -webkit-transition:1s linear all;
085     -moz-transition:1s linear all;
086     -o-transition:1s linear all;
087     transition:1s linear all;
088     -webkit-transform: rotateX(50deg) rotateY(30deg);
089     -moz-transform: rotateX(50deg) rotateY(30deg);
090     -ms-transform: rotateX(50deg) rotateY(30deg);
091     -o-transform: rotateX(50deg) rotateY(30deg);
092     transform: rotateX(50deg) rotateY(30deg);
093     -webkit-transform-origin: right top 0;
094     -moz-transform-origin: right top 0;
095     -ms-transform-origin: right top 0;
096     -o-transform-origin: right top 0;
097     transform-origin: right top 0;
098 }
099 .slide.ng-hide-add.ng-hide-add-active {
100     opacity:0;
101 }
102 .slide.ng-hide-remove {
103     -webkit-transition:1s linear all;
104     -moz-transition:1s linear all;
105     -o-transition:1s linear all;
106     transition:1s linear all;
107     display:block!important;
108     opacity:0;
109 }
110 .slide, .slide.ng-hide-remove.ng-hide-remove-active {
111     opacity:1;
112 }

In order to achieve this beautiful 3D transition effects between slides – we used CSS3 transition effects with rotateX, rotateY and preserve-3d for the parent element

Step 3. JavaScript

This is the main AngularJS application controller:

js/app.js

01 'use strict';
02 angular.module('example366', ['ngAnimate', 'ngTouch'])
03   .controller('MainCtrl', function ($scope) {
04     // Set of Photos
05     $scope.photos = [
06         {src: 'http://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
07         {src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
08         {src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
09         {src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
10         {src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
11         {src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
12     ];
13     // initial image index
14     $scope._Index = 0;
15     // if a current image is the same as requested image
16     $scope.isActive = function (index) {
17         return $scope._Index === index;
18     };
19     // show prev image
20     $scope.showPrev = function () {
21         $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
22     };
23     // show next image
24     $scope.showNext = function () {
25         $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
26     };
27     // show a certain image
28     $scope.showPhoto = function (index) {
29         $scope._Index = index;
30     };
31 });

In the beginning we prepared a collection of photos. After we will bind it into the HTML code. After this collection – several functions to manage with an active image.

Step 4. Images

All used images were taken from the Marc Driesenga’s Photostream at Flickr

Live Demo

[sociallocker]

download in package

[/sociallocker]

Conclusion

That’s all for today, thanks for your patient attention, and if you really like what we have done today – share it with all your friends in your social networks using the form below.

Rate article
© 2025 Script Tutorials