Photo Gallery with AngularJS and CSS3

  • Reading time:7 mins read
Photo Gallery with AngularJS and CSS3

Photo Gallery with AngularJS and CSS3

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.

Live Demo

Step 1. HTML

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

index.html

<!DOCTYPE html>
<html ng-app="example366">
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Dev School" />
    <title>Photo Gallery with AngularJS and CSS3 | Dev School</title>
    <meta name="description" content="Photo Gallery with AngularJS and CSS3 - demo page">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- add styles -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <!-- add javascripts -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script>
    <script src="js/app.js"></script>
</head>

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

<body ng-controller="MainCtrl">
    <header>
        <a href="https://dev-school.net/demos/366/index.html" class="logo"><img src="images/logo.png" /></a>
    </header>

    <!-- slider container -->
    <div class="container slider">

        <!-- enumerate all photos -->
        <img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />

        <!-- prev / next controls -->
        <a class="arrow prev" href="#" ng-click="showPrev()"></a>
        <a class="arrow next" href="#" ng-click="showNext()"></a>

        <!-- extra navigation controls -->
        <ul class="nav">
            <li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
                <img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
            </li>
        </ul>

    </div>
</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

.arrow {
    cursor: pointer;
    display: block;
    height: 64px;
    margin-top: -35px;
    outline: medium none;
    position: absolute;
    top: 50%;
    width: 64px;
    z-index: 5;
}
.arrow.prev {
    background-image: url("../images/prev.png");
    left: 20px;
    opacity: 0.2;
    transition: all 0.2s linear 0s;
}
.arrow.next {
    background-image: url("../images/next.png");
    opacity: 0.2;
    right: 20px;
    transition: all 0.2s linear 0s;
}
.arrow.prev:hover{
    opacity:1;
}
.arrow.next:hover{
    opacity:1;
}

.nav {
    bottom: -4px;
    display: block;
    height: 48px;
    left: 0;
    margin: 0 auto;
    padding: 1em 0 0.8em;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 5;
}
.nav li {
    border: 5px solid #AAAAAA;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    margin: 0 8px;
    position: relative;
    width: 50px;
}
.nav li.active {
    border: 5px solid #FFFFFF;
}
.nav li img {
    width: 100%;
}

.slider {
    border: 15px solid #FFFFFF;
    border-radius: 5px;
    height: 500px;
    margin: 20px auto;
    position: relative;
    width: 800px;

    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
}
.slide.ng-hide-add {
    opacity:1;

    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;

    -webkit-transform: rotateX(50deg) rotateY(30deg);
    -moz-transform: rotateX(50deg) rotateY(30deg);
    -ms-transform: rotateX(50deg) rotateY(30deg);
    -o-transform: rotateX(50deg) rotateY(30deg);
    transform: rotateX(50deg) rotateY(30deg);

    -webkit-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -ms-transform-origin: right top 0;
    -o-transform-origin: right top 0;
    transform-origin: right top 0;
}
.slide.ng-hide-add.ng-hide-add-active {
    opacity:0;
}
.slide.ng-hide-remove {
    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;

    display:block!important;
    opacity:0;
}
.slide, .slide.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

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

'use strict';

angular.module('example366', ['ngAnimate', 'ngTouch'])
  .controller('MainCtrl', function ($scope) {

    // Set of Photos
    $scope.photos = [
        {src: 'http://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
        {src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
        {src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
        {src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
        {src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
        {src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
    ];

    // initial image index
    $scope._Index = 0;

    // if a current image is the same as requested image
    $scope.isActive = function (index) {
        return $scope._Index === index;
    };

    // show prev image
    $scope.showPrev = function () {
        $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
    };

    // show next image
    $scope.showNext = function () {
        $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
    };

    // show a certain image
    $scope.showPhoto = function (index) {
        $scope._Index = index;
    };
});

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.