Photo Gallery with AngularJS and CSS3

Author admin Reading 10 min Views 1.4k. Published by November 13, 2013 Modified by August 15, 2024

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

Step 1. HTML
index.html
Step 2. CSS
css/style.css
Step 3. JavaScript
js/app.js
Step 4. Images
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 

11 <link href="css/style.css" rel="stylesheet" type="text/css" />

12 

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 

06 <div class="container slider">

07 

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 

10 <a class="arrow prev" href="#" ng-click="showPrev()"></a>

11 <a class="arrow next" href="#" ng-click="showNext()"></a>

12 

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.