This repository has been archived by the owner on Oct 22, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 505
/
Image_Galleries_with_amp-carousel.html
108 lines (100 loc) · 5.83 KB
/
Image_Galleries_with_amp-carousel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!---{
"highlight": true
}--->
<!--
#### Introduction
The `amp-carousel` component works great for image galleries. The carousel requires the `height` attribute to be specified in advance. This can be tricky if the displayed images and captions vary in size. Here are two approaches to solve this problem.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<%host%>/advanced/image_galleries_with_amp-carousel/">
<!-- #### Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<!-- We will also be using the amp-fit-text component. -->
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.carousel1, .carousel2 {
background: #eee;
margin: 16px 0;
}
.carousel1 .slide > amp-img > img{
object-fit: contain;
}
.carousel2 .slide > amp-img > img{
object-fit: contain;
}
.carousel2 .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
background: rgba(0, 0, 0, 0.6);
color: #ddd;
font-size: smaller;
max-height: 30%;
}
</style>
</head>
<body>
<!-- #### Dynamic Text Size -->
<!--
The first image gallery uses
[amp-fit-text](https://www.ampproject.org/docs/reference/extended/amp-fit-text.html) to fit the text to the available space. This works well if captions vary not too much in length.
-->
<amp-carousel class="carousel1" layout="responsive" height="450" width="500" type="slides">
<div class="slide">
<amp-img src="/img/Border_Collie.jpg" layout="responsive" width="500" height="300"></amp-img>
<amp-fit-text layout="responsive" width="500" height="150"> The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region for herding livestock, especially sheep. It was specifically bred for intelligence and obedience. Considered highly intelligent, and typically extremely energetic, acrobatic, smart and athletic, they frequently compete with great success in dog sports, in addition to their success in sheepdog trials. They are often cited as the most intelligent of all domestic dogs. Border Collies also remain employed throughout the world in their traditional work of herding livestock. </amp-fit-text>
</div>
<div class="slide">
<amp-img src="/img/Shetland_Sheepdog.jpg" layout="responsive" width="500" height="340"></amp-img>
<amp-fit-text layout="responsive" width="500" height="110"> The Shetland Sheepdog, often known as the Sheltie, is a breed of herding dog. Less favored nicknames are the Toy Collie and the Miniature Collie. They are small dogs, and come in a variety of colors, such as sable, tri-color, and blue merle. They are very intelligent, vocal, excitable, energetic dogs who are always willing to please and work hard.
</amp-fit-text>
</div>
<div class="slide">
<amp-img src="/img/Hovawart.jpg" layout="responsive" width="500" height="350"></amp-img>
<amp-fit-text layout="responsive" width="500" height="100">
The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate
guard dog", which is the original use for the breed. The breed originated in the Black Forest
region and was first described in text and paintings in medieval times.
</amp-fit-text>
</div>
</amp-carousel>
<!-- #### Text Overlay -->
<!-- Another carousel with caption, this time the caption overlays the image. -->
<amp-carousel class="carousel2" layout="responsive" height="400" width="500" type="slides">
<div class="slide">
<amp-img src="/img/Border_Collie.jpg" layout="fill"></amp-img>
<div class="caption">
The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region
for herding livestock, especially sheep. It was specifically bred for intelligence and obedience.
</div>
</div>
<div class="slide">
<amp-img src="/img/Shetland_Sheepdog.jpg" layout="fill"></amp-img>
<div class="caption">
The Shetland Sheepdog, often known as the Sheltie, is a breed of herding dog. Less favored nicknames
are the Toy Collie and the Miniature Collie. They are small dogs, and come in a variety of colors,
such as sable, tri-color, and blue merle. They are very intelligent, vocal, excitable, energetic dogs
who are always willing to please and work hard.
</div>
</div>
<div class="slide">
<amp-img src="/img/Hovawart.jpg" layout="fill"></amp-img>
<div class="caption">
The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate guard
dog", which is the original use for the breed. The breed originated in the Black Forest region and was
first described in text and paintings in medieval times.
</div>
</div>
</amp-carousel>
</body>
</html>