Skip to content
This repository was archived by the owner on Sep 11, 2018. It is now read-only.

Commit f63f213

Browse files
author
Claudio Ludovico Panetta
committed
Major update for v0.2.0
This update include a lot of new improvements as well as a new naming convention for the components. More important we have a new page for the live demo which is powered by Bulma! Patch notes: - Change name from PhotoGallery to Photos.vue - Fix position of the Theater component - Add new improved live demo page - Change Demo title - Add Bulma.io CSS framework - Remove inline code from the HTML tag of the demo
1 parent 86e9131 commit f63f213

File tree

6 files changed

+126
-45
lines changed

6 files changed

+126
-45
lines changed

‎dist/carousel.js‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 96 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,102 @@
11
<!DOCTYPE html>
2-
<html lang="en" style="height: 100vh; min-height: 100vh">
3-
<head>
2+
<html lang="en">
3+
<head>
44
<meta charset="utf-8">
5-
<title>vue-carousel</title>
5+
<title>VueJs Carousel by Ludo237</title>
66
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
77
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
8-
</head>
9-
<body>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
1012
<div id="your-application-id">
11-
<strong>Hello From Vue Carousel</strong>
12-
<photo-gallery source="https://jsonplaceholder.typicode.com/photos?_limit=10"></photo-gallery>
13-
<theater></theater>
13+
<!-- Header section !-->
14+
<header class="hero is-bold is-medium is-light is-bold">
15+
<div class="hero-head">
16+
<nav class="nav">
17+
<div class="container">
18+
<div class="nav-left">
19+
<a class="nav-item">
20+
<span class="icon">
21+
<i class="fa fa-fw fa-lg fa-camera"></i>
22+
</span>
23+
</a>
24+
</div>
25+
<span class="nav-toggle">
26+
<span></span>
27+
<span></span>
28+
<span></span>
29+
</span>
30+
<div class="nav-right nav-menu">
31+
<a class="nav-item is-active" href="/">Home</a>
32+
<span class="nav-item">
33+
<a class="button is-info is-outlined" href="https://github.com/ludo237/vuejs-carousel" target="_blank">
34+
<span class="icon">
35+
<i class="fa fa-github"></i>
36+
</span>
37+
<span>Download</span>
38+
</a>
39+
</span>
40+
</div>
41+
</div>
42+
</nav>
43+
</div>
44+
45+
<div class="hero-body">
46+
<div class="container has-text-centered">
47+
<h1 class="title">VueJs Carousel <small><img src="https://img.shields.io/npm/v/vuejs-carousel.svg" alt="VueJs Version"></small></h1>
48+
<h2 class="subtitle">Easy to use VueJS component for Photo galleries, built with VueJS and web standards in mind</h2>
49+
</div>
50+
</div>
51+
</header>
52+
53+
<!-- Main section !-->
54+
<section class="section">
55+
<div class="container">
56+
<div class="content">
57+
<h1>VueJs Carousel</h1>
58+
<p>VueJs Carousel is a photo gallery system that has two main components a <code>Photos</code> components that fetches the photos from a json request
59+
and renders them within a list and a <code>Theater</code> component used to display the full size of any selected photo from the gallery. The code is
60+
developed by following <code>ECMA Script 2015 and 2016</code> and is hosted on <strong>Github</strong>. Feel free to try this component and help me
61+
improving it by submitting issues or pull requests.</p>
62+
63+
<h2>How to install</h2>
64+
<p></p>
65+
<ul>
66+
<li>Run <code>npm install vuejs-carousel --save</code></li>
67+
<li>Include the Carousel component in your script</li>
68+
<li>Use the two components <code>Photos</code> and <code>Theater</code> inside your page</li>
69+
<li>Remember to attach a source to the <code>Photos</code> component</li>
70+
</ul>
71+
72+
<h2>Live Example</h2>
73+
<p>This live example uses <strong>JSON placeholder</strong> from <strong>typicode</strong> all thumbnails are 150x150 pixels and all the
74+
original images are 600x600 pixels.</p>
75+
<photos source="https://jsonplaceholder.typicode.com/photos?_limit=10"></photos>
76+
</div>
77+
</div>
78+
</section>
79+
80+
<!-- Simple footer !-->
81+
<footer class="footer">
82+
<div class="container">
83+
<div class="content has-text-centered">
84+
<p>
85+
<strong>VueJs Carousel</strong> by <a href="http://claudioludovico.panetta.it">Ludo237</a>. The source code is licensed
86+
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is powered by <strong>Bulma</strong>
87+
and is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
88+
</p>
89+
<p>
90+
<a class="icon" href="https://github.com/ludo237">
91+
<i class="fa fa-github"></i>
92+
</a>
93+
</p>
94+
</div>
95+
</div>
96+
</footer>
97+
<theater></theater>
1498
</div>
15-
<script src="dist/carousel.js"></script>
16-
</body>
17-
</html>
99+
100+
<script src="dist/carousel.js" crossorigin="anonymous"></script>
101+
</body>
102+
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vuejs-carousel",
33
"description": "Complete photo carousel build with VueJS and web standards in mind",
4-
"version": "0.1.0",
4+
"version": "0.2.0",
55
"author": "ludo237",
66
"private": false,
77
"license": "MIT",

‎src/carousel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ require("./shared/EventDispatcher.js");
22

33
import Vue from "vue";
44
import VueResource from "vue-resource";
5-
import PhotoGallery from "./components/PhotoGallery.vue";
5+
import Photos from "./components/Photos.vue";
66
import Theater from "./components/Theater.vue";
77

88
Vue.use(VueResource);
@@ -11,7 +11,7 @@ Vue.config.debug = true;
1111
const carousel = new Vue({
1212
el: "#your-application-id",
1313

14-
components: { PhotoGallery, Theater },
14+
components: { Photos, Theater },
1515

1616
mounted() {
1717
// Debug purpose

src/components/PhotoGallery.vue renamed to src/components/Photos.vue

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
<template id="photo-gallery">
2-
<div class="PhotoGallery">
3-
<ul class="PhotoGallery__list">
4-
<li class="PhotoGallery__item" v-for="(photo, index) in photos">
5-
<figure class="PhotoGallery__figure image">
6-
<img class="PhotoGallery__image" :src="photo.thumbnailUrl" @click="selectThisPhoto(photo, index)"/>
7-
</figure>
8-
</li>
9-
</ul>
10-
</div>
1+
<template id="photos">
2+
<ul class="Photos">
3+
<li class="Photo" v-for="(photo, index) in photos">
4+
<figure class="Photo__container">
5+
<img class="Photo__source" :src="photo.thumbnailUrl" @click="selectThisPhoto(photo, index)"/>
6+
</figure>
7+
</li>
8+
</ul>
119
</template>
10+
1211
<script>
1312
export default {
1413
@@ -62,27 +61,24 @@
6261
</script>
6362

6463
<style>
65-
.PhotoGallery {
66-
overflow: hidden;
67-
}
68-
69-
.PhotoGallery__list {
64+
.Photos {
7065
display: flex;
71-
flex-wrap: wrap;
7266
flex-direction: row;
67+
flex-wrap: wrap;
7368
margin: 0;
7469
padding: 0;
7570
}
7671
77-
.PhotoGallery__item {
72+
.Photo {
7873
list-style-type: none;
7974
}
8075
81-
.PhotoGallery__figure {
76+
.Photo__container {
8277
display: block;
8378
}
8479
85-
.PhotoGallery__image {
80+
.Photo_source {
8681
display: block;
82+
max-width: 100%;
8783
}
8884
</style>

‎src/components/Theater.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
<style>
8787
8888
.Theater {
89-
position: absolute;
89+
position: fixed;
9090
top: 0;
9191
left: 0;
9292
right: 0;
@@ -170,4 +170,4 @@
170170
.Theater__command--header > a {
171171
color: black;
172172
}
173-
</style>
173+
</style>

0 commit comments

Comments
 (0)