varararun / photo-tiles

Photo Tiles Demo

Home Page:http://avarghese.me/photo-tiles

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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> 

About

Photo Tiles Demo

http://avarghese.me/photo-tiles

License:Other


Languages

Language:JavaScript 49.7%Language:TypeScript 32.5%Language:CSS 11.0%Language:HTML 6.8%