Skip to content

varararun/photo-tiles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Arun Varghese
Feb 26, 2017
50a3f23 · Feb 26, 2017

History

13 Commits
Feb 21, 2017
Feb 23, 2017
Feb 7, 2017
Feb 7, 2017
Feb 7, 2017
Feb 7, 2017
Feb 7, 2017
Feb 7, 2017
Feb 7, 2017
Feb 8, 2017
Feb 7, 2017
Feb 21, 2017
Feb 21, 2017
Feb 23, 2017
Feb 26, 2017
Feb 7, 2017
Feb 21, 2017
Feb 7, 2017
Feb 7, 2017

Repository files navigation

GitHub version Build Status

PhotoTiles

Photo Tiles, JS implementation of Mac's Photo Tiles Screensaver

Run Demo on Your Machine

$ npm start

Install

$ bower install --save photo-tiles

Usage

<head> 
    ... 
    <!-- Bower -->
    <link rel="stylesheet" href="${BOWER_DIR}/photo-tiles/dist/css/photo-tiles.min.css">
</head>
<body>
...
<div class="photo-tiles-container"></div>
<!-- Bower -->
<script type="text/javascript" src="${BOWER_DIR}/photo-tiles/dist/js/photo-tiles-min.js"></script>
<script>
    PhotoTiles.initialize({
        demoMode: true
    });
</script>
</body>

Customization

<script>
	PhotoTiles.initialize({
        // optional; true launches demo.  
        demoMode: false,
        // element used to generate the photo layout.            
        container: ".photo-tiles-container",
        // true = start animation on load.
        shouldPlay: true,
        // how long before images shift.
        transition: 2000,                        
        // list of img urls to use in the photo tiles container.
        photoList = [
            "assets/images/demo/demo-image-1.jpeg",
            "assets/images/demo/demo-image-2.jpeg"
            ...
        ]
	});
</script>