Photo Gallery with AngularJS and CSS3

Photo Gallery with AngularJS and CSS3

40 337855
Photo Gallery with AngularJS and CSS3
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="Script Tutorials" />
    <title>Photo Gallery with AngularJS and CSS3 | Script Tutorials</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://www.script-tutorials.com/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.

SIMILAR ARTICLES

Understanding Closures

0 24630

40 COMMENTS

  1. When I run your code at home with an Apache2.2 server I receive the following error message:
    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/photoGalleryAngularJS/%7B%7Bphoto.src%7D%7D
    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/photoGalleryAngularJS/%7B%7Bphoto.src%7D%7D
    Do you have any idea as to what this problem might be?

  2. I love it how it looks, but I dunno what to do in order to let this gallery works. It seems that I’m doing something wrong but who knows what.

  3. Hi Pepito,
    Try to run this code at your own server or at localhost. It is pretty impossible to debug it at rendera.heroku.com

  4. Looks great!

    What kinds of limits does this have? How many photos could reasonably be displayed using this technique?

  5. It’s f**ing AWESOME…….
    superb work dude…..
    looking to develop dynamic gallery like this…….

    Thanks for sharing…

    • Hi Nits,

      did you already develop this as dynamic gallery?
      I also plan to work on this, but maybe you’ve already done it? ;-)

  6. A better example would be to have the gallery as a directive. I made a quick one: jsfiddle.net/p6y3P/embedded/result,html,js,css/

  7. This is pretty cool, but it looks like it only works with AngularJS 1.2.0rc1. Apparently there were breaking changes introduced in AngularJS 1.2.0-rc.2. I fumbled around with it a bit, but I don’t have the time to fully investigate right now. Do you have any idea how to get this working with newer AngularJS? (preferably 1.2.10)

    • Did you find the problem? I’m running into the same issue, the animations don’t seem to work in the Angular version I’m using.

  8. Nevermind, I found the issue. The transformation CSS has to be applied to the ng-hide-add-active class, NOT to the ng-hide-add class, and the ng-hde-add class needs to have display: block !important; added to it.

    • Hi Adam,
      I have the same problrem and I cant figure it out. Can explain the fix please.

  9. Great Gallery! I’d like to have multiple sliders on a single page. The loading works fine, but navigation between images doesn’t. Is it possible and what changes are necessary. Thanks.

  10. Hi

    I m not able to run the code in Android emulator using phonegap 2.9,throws the error as uncaught reference error: angular is not defined.

  11. Not sure what I am doing differently, but every time I hit the next/prev button to trigger showNext()/showPrev(), the ._Index counter is reset to 0.

  12. Hello, I love the gallery works great. I was going to give one suggestion to those who noticed this too (or maybe you can tell me if this will cause me problems down the road):
    I’ve noticed that when I click the arrows, Chrome (haven’t tested on other browsers, yet) will see it as if I moved to a different page. So, everytime I want to go back a page after using the gallery, I’ll have to hit the back button however many times I clicked the arrows before it will take me back. What I did to resolve this was remove the href=’#’ from the arrows. It seems to fix the problem without causing new ones. Tell me what you think.

  13. Will the module handle the large number of images? In the case, the image thumb nav control will be too long to place in a single line in the single image. How to handle the rotation of thumb images?

    • Hi Eric, in case of big amount of images, you can consider creating a pagination to separate all images to pages

  14. Hi there, great tutorial!

    I’m having an issue that was already detected in this forum, but so far I have got no solution:
    The images don’t animate when I change them with the arrow buttons. My css is here:

    (i changed the slide class to slidePicture, o avoid any potential conflicts with bootstrap classes)

    .slidePicture.ng-hide-add-active {
    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;
    }
    .slidePicture.ng-hide-add.ng-hide-add-active {
    opacity:0;
    }
    .slidePicture.ng-hide-remove-active {
    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;

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

    This only started happening since I moved the gallery code into an angular directive template. Before that the animations worked fine. Now I added functionallity to suport multiple galleries that are loaded through the corresponding controller into the same templateUrl, although I’m not being able to understand what’s the relation between the animation issue and the creation of the directive. Any ideas?

    Thank you

  15. I was just wondering how to adjust the size of the pictures. I know I can change them in Photoshop, and whatnot, but is there an easier way? I tried changing the size in the code itself, but it won’t work. Thanks for the tutorial, this will work great for future reference.

    Kyle Narovich

    • Hi Kyle, you may change width of ‘.slider’ element, and then – provide bigger images for the gallery.

  16. Nice,

    what do you think about change of
    $scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.photos.length – 1) ? ++$scope._Index : 0;
    };
    to:
    $scope._Index++; // select next image
    $scope._Index %= $scope.photos.length; // but stay in list

Leave a Reply