--- a/player/css/styles.css Thu May 23 13:11:56 2013 +0200
+++ b/player/css/styles.css Fri May 24 18:49:09 2013 +0200
@@ -109,6 +109,33 @@
color: #B8155F; background: #202020;
}
+/* Annotation colors */
+
+.video {
+ color: #be4477;
+}
+
+.audio {
+ color:#63be6c;
+}
+
+.slideshow {
+ color: #f69058;
+}
+
+.text {
+ color:#5e90cb;
+}
+
+.quote {
+ color:#00aeb5;
+}
+
+.link {
+ color:#8985bb;
+}
+
+
/* Pictograms on the left */
.pictolist {
@@ -116,87 +143,104 @@
left: 20px; bottom: 115px;
}
+.pictolist li {
+ height: 34px; margin-top: 12px; line-height: 34px; display: none;
+}
+
.picto {
- width: 24px; height: 24px; padding: 7px; margin-top: 12px; background:black;
+ float: left; padding: 7px; background:black;
border-radius: 19px; cursor: pointer;
}
+.picto-title {
+ margin-left: 10px; font-size: 12px; text-transform: uppercase;
+ display: none; text-shadow: 0 0 2px #000000; font-family: 'Futura-Medium';
+}
+
+.hover .picto-title {
+ display: inline;
+}
+
.picto a {
background: url(../img/sprites.png); display: block; width: 24px; height: 24px;
}
-.picto.video:hover {
+.video.hover .picto {
background: #be4477;
}
-.picto.video:hover a {
+.video.hover .picto a {
background-position: -24px 0;
}
-.picto.audio a {
+.audio .picto a {
background-position: 0 -24px;
}
-.picto.audio:hover {
+.audio.hover .picto {
background: #63be6c;
}
-.picto.audio:hover a {
+.audio.hover .picto a {
background-position: -24px -24px;
}
-.picto.slideshow a {
+.slideshow .picto a {
background-position: 0 -48px;
}
-.picto.slideshow:hover {
+.slideshow.hover .picto {
background: #f69058;
}
-.picto.slideshow:hover a {
+.slideshow.hover .picto a {
background-position: -24px -48px;
}
-.picto.text a {
+.text .picto a {
background-position: 0 -72px;
}
-.picto.text:hover {
+.text.hover .picto {
background: #5e90cb;
}
-.picto.text:hover a {
+.text.hover .picto a {
background-position: -24px -72px;
}
-.picto.quote a {
+.quote .picto a {
background-position: 0 -96px;
}
-.picto.quote:hover {
+.quote.hover .picto {
background: #00aeb5;
}
-.picto.quote:hover a {
+.quote.hover .picto a {
background-position: -24px -96px;
}
-.picto.link a {
+.link .picto a {
background-position: 0 -120px;
}
-.picto.link:hover {
+.link.hover .picto {
background: #8985bb;
}
-.picto.link:hover a {
+.link.hover .picto a {
background-position: -24px -120px;
}
/* Annotations */
+.annotation-templates {
+ display: none;
+}
+
.annotation {
- position: absolute; display: none;
+ position: absolute;
}
.annotation-title {
@@ -235,7 +279,7 @@
.text-annotation .annotation-contents {
font-family: Georgia, 'Times New Roman', serif;
- margin: 0 45px 45px;
+ margin: 0 45px 35px;
column-count: 2; column-gap: 60px;
-moz-column-count: 2; -moz-column-gap: 60px;
-webkit-column-count: 2; -webkit-column-gap: 60px;
@@ -315,16 +359,8 @@
content: "."; visibility: hidden; display: block; height: 1px; clear: both;
}
-.slideshow-title, .slideshow-credits {
- line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 10px;
-}
-
.slideshow-title {
- float: left; color: #cccccc;
-}
-
-.slideshow-credits {
- float: right; color: #808080;
+ line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left;
}
.slideshow-arrow {
@@ -408,6 +444,10 @@
background: #8a1249;
}
+.annotation-onscreen .chapter-block {
+ opacity: .5;
+}
+
.chapter-title {
position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px;
font-size: 9px; text-transform: uppercase;
@@ -420,31 +460,53 @@
}
.chip {
- position: absolute; width: 11px; height: 11px; top: 17px; border-radius: 6px;
- margin-left: -6px;
+ position: absolute; top: 0;
+}
+
+.chip-circle {
+ width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
+}
+
+.chip-title {
+ position: absolute; top: 2px; left: 0; font-size: 9px; text-transform: uppercase;
+ display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px;
}
-.chip.video {
+.chip.hover .chip-title,
+.chip.current .chip-title {
+ display: block;
+}
+
+.annotation-onscreen .chip {
+ opacity: .3;
+}
+
+.chip.current,
+.chip.hover {
+ opacity: 1;
+}
+
+.video .chip-circle {
background: #be4477;
}
-.chip.audio {
+.audio .chip-circle {
background: #63be6c;
}
-.chip.slideshow {
+.slideshow .chip-circle {
background: #f69058;
}
-.chip.text {
+.text .chip-circle {
background: #5e90cb;
}
-.chip.quote {
+.quote .chip-circle {
background: #00aeb5;
}
-.chip.link {
+.link .chip-circle {
background: #8985bb;
}
--- a/player/data/rigoletto.json Thu May 23 13:11:56 2013 +0200
+++ b/player/data/rigoletto.json Fri May 24 18:49:09 2013 +0200
@@ -266,6 +266,45 @@
"color": "3355443",
"media": "media-01",
"id": "annotation-05"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-slideshow",
+ "description": "",
+ "title": "Diaporama sur la mer",
+ "slide-duration": 3000,
+ "autostart": false,
+ "images": [
+ {
+ "url": "http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg",
+ "title": "Waves at La Jolla",
+ "description": "The sea is the connected body of salt water that covers 70 percent of the Earth's surface. The sea is important in moderating the Earth's climate, in providing food and oxygen, in its enormous diversity of life, and for navigation. The study of the sea is called oceanography. The sea has been travelled and explored since ancient times, but its scientific study dates broadly from the voyages of Captain James Cook to explore the Pacific Ocean between 1768 and 1779."
+ }, {
+ "url": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg/1280px-Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg",
+ "title": "冨嶽三十六景・神奈川沖浪裏",
+ "description": "La Grande Vague de Kanagawa (神奈川沖浪裏, Kanagawa-oki nami-ura, littéralement Sous la vague au large de Kanagawa), plus connue sous le nom de La Vague, est une célèbre estampe japonaise du peintre japonais spécialiste de l'ukiyo-e, Hokusai, publiée en 18302 ou en 1831 pendant l'époque d'Edo.\nCette estampe est l'œuvre la plus connue de Hokusai et la première de sa fameuse série « Trente-six vues du mont Fuji »Note 2, dans laquelle l'utilisation du bleu de Prusse renouvelait le langage de l'estampe japonaise. La composition de La Vague, synthèse de l'estampe japonaise traditionnelle et de la « perspective » occidentale, lui valut un succès immédiat au Japon, puis en Europe, où elle fut une des sources d'inspiration des Impressionnistes."
+ }, {
+ "url": "http://upload.wikimedia.org/wikipedia/commons/7/76/Blue_Linckia_Starfish.JPG",
+ "title": "Blue Starfish (Linckia laevigata)",
+ "description": "Linckia laevigata (sometimes called the blue Linckia or Blue Star) is a species of sea star (commonly known as a starfish) in the shallow waters of tropical Indo-Pacific (a biogeographic region of the Earth's seas, comprising the tropical waters of the Indian Ocean, the western and central Pacific Ocean, and the seas connecting the two in the general area of Indonesia). The variation (Polymorphism, in this case, a color morph) most commonly found is pure, dark or light blue, although observers find the aqua, purple or orange variation throughout the ocean. These sea stars may grow up to 30 cm in diameter, with rounded tips at each of the arms — some individuals may bear lighter or darker spots along each of their arms. Individual specimens are typically firm in texture, possessing the slightly tubular, elongated arms common to most of other members of the family Ophidiasteridae, and usually possessing short, yellowish tube feet. An inhabitant of coral reefs and sea grass beds, this species is relatively common and is typically found in sparse density throughout its range. Blue Stars live subtidally, or sometimes intertidally, on fine (sand) or hard substrata and move relatively slow (mean locomoation rate of 8.1 cm/min)."
+ }, {
+ "url": "http://upload.wikimedia.org/wikipedia/commons/0/06/Corrientes-oceanicas.gif",
+ "title": "Ocean currents",
+ "description": "An ocean current is a continuous, directed movement of ocean water generated by the forces acting upon this mean flow, such as breaking waves, wind, Coriolis effect, cabbeling, temperature and salinity differences and tides caused by the gravitational pull of the Moon and the Sun. Depth contours, shoreline configurations and interaction with other currents influence a current's direction and strength.\nA deep current is any ocean current at a depth of greater than 100m. Ocean currents can flow for great distances, and together they create the great flow of the global conveyor belt which plays a dominant part in determining the climate of many of the Earth’s regions. Perhaps the most striking example is the Gulf Stream, which makes northwest Europe much more temperate than any other region at the same latitude. Another example is Lima, Peru, where the climate is cooler (sub-tropical) than the tropical latitudes in which the area is located, due to the effect of the Humboldt Current."
+ }
+ ]
+ },
+ "begin": 80000,
+ "end": 95000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [],
+ "id": "annotation-06"
}
],
"annotation-types": [
--- a/player/index.html Thu May 23 13:11:56 2013 +0200
+++ b/player/index.html Fri May 24 18:49:09 2013 +0200
@@ -26,26 +26,26 @@
</div>
<div class="main-video" style="background:#101010;">
<div class="video-container"></div>
- <ul class="pictolist">
- <li class="picto video">
- <a href="#"></a>
- </li>
- <li class="picto audio">
- <a href="#"></a>
- </li>
- <li class="picto slideshow">
- <a href="#"></a>
- </li>
- <li class="picto text">
- <a href="#"></a>
- </li>
- <li class="picto quote">
- <a href="#"></a>
- </li>
- <li class="picto link">
- <a href="#"></a>
- </li>
- </ul>
+ <ul class="pictolist"></ul>
+
+ </div>
+ <div class="bottom-bar">
+ <div class="play-button">
+ <a href="#"></a>
+ </div>
+ <div class="chapters-bar">
+ <ul class="chapters-list"></ul>
+ <ul class="chips-list"></ul>
+ <div class="left-hiding-block"></div>
+ <div class="right-hiding-block"></div>
+ <div class="progress-indicator"></div>
+ </div>
+ <div class="chapter-nav">
+ <div class="prev-chapter inactive"></div>
+ <div class="next-chapter"></div>
+ </div>
+ </div>
+ <div class="annotation-templates">
<div class="annotations">
<div class="annotation text-annotation">
@@ -56,24 +56,10 @@
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
-
- <div class="annotation audio-annotation">
- <a href="#" class="close-annotation">×</a>
- <h2 class="annotation-title">Cortigiani, vil razza</h2>
- <div class="annotation-contents">
- <object height="81" width="100%">
- <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F36604077&color=63be6c&auto_play=false&show_artwork=false&show_playcount=false&show_comments=false"></param>
- <param name="allowscriptaccess" value="always"></param>
- <embed allowscriptaccess="always" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F36604077&color=63be6c&auto_play=false&show_artwork=false&show_playcount=false&show_comments=false" type="application/x-shockwave-flash" width="100%" height="81"></embed>
- </object>
- </div>
- </div>
<div class="annotation slideshow-annotation">
- <h2 class="annotation-title">
- <a href="#" class="close-annotation">×</a>
- <span>Titre du diaporama</span>
- </h2>
+ <a href="#" class="close-annotation">×</a>
+ <h2 class="annotation-title"></h2>
<div class="slideshow-center">
<div class="slideshow-frame">
<img class="slideshow-image" />
@@ -92,33 +78,10 @@
<a href="#"></a>
</div>
<div class="slideshow-title"></div>
- <div class="slideshow-credits"></div>
</div>
</div>
</div>
</div>
- <div class="bottom-bar">
- <div class="play-button">
- <a href="#"></a>
- </div>
- <div class="chapters-bar">
- <ul class="chapters-list"></ul>
- <ul class="chips-list">
- <li class="chip video" style="left: 0%"></li>
- <li class="chip slideshow" style="left: 1%"></li>
- <li class="chip audio" style="left: 12.5%"></li>
- <li class="chip text" style="left: 20%"></li>
- <li class="chip quote" style="left: 30%"></li>
- </ul>
- <div class="left-hiding-block"></div>
- <div class="right-hiding-block"></div>
- <div class="progress-indicator" style="left: 17%;"></div>
- </div>
- <div class="chapter-nav">
- <div class="prev-chapter inactive"></div>
- <div class="next-chapter"></div>
- </div>
- </div>
</body>
</html>
--- a/player/js/ldt-serializer.js Thu May 23 13:11:56 2013 +0200
+++ b/player/js/ldt-serializer.js Fri May 24 18:49:09 2013 +0200
@@ -131,6 +131,7 @@
}
_res.color = '#' + _c;
}
+ _res.content = _data.content;
_res.setMedia(_data.media);
_res.setAnnotationType(_data.meta["id-ref"]);
_res.setTags(IriSP._(_data.tags).pluck("id-ref"));
@@ -153,14 +154,22 @@
id : _data.id,
begin : _data.begin.milliseconds,
end : _data.end.milliseconds,
- content : {
- title : _data.title || "",
- description : _data.description || "",
- audio : _data.audio,
- img: {
- src: _data.thumbnail
+ content : IriSP._.defaults(
+ {},
+ {
+ title : _data.title,
+ description : _data.description,
+ audio : _data.audio,
+ img: {
+ src: _data.thumbnail
+ }
+ },
+ _data.content,
+ {
+ title: "",
+ description: ""
}
- },
+ ),
color: _color,
media : _data.media.id,
meta : {
@@ -177,6 +186,7 @@
}
})
}
+ _res.content.title = _data.title || _res.content.title || "";
_dest.annotations.push(_res);
}
},
--- a/player/js/player.js Thu May 23 13:11:56 2013 +0200
+++ b/player/js/player.js Fri May 24 18:49:09 2013 +0200
@@ -149,134 +149,176 @@
myMedia.setCurrentTime(t);
}
});
- $(".chips-list").on( {
- mouseenter: function() {
- $(".chip").css("opacity",.3);
- $(this).css("opacity",1);
- },
- mouseleave: function() {
- $(".chip").css("opacity",1);
- }
- }, ".chip");
$(".play-button").click(function() {
$(this).toggleClass("pause");
});
-
- var slideshowData = [
- {
- url: "http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg",
- title: "Waves at La Jolla",
- description: "The sea is the connected body of salt water that covers 70 percent of the Earth's surface. The sea is important in moderating the Earth's climate, in providing food and oxygen, in its enormous diversity of life, and for navigation. The study of the sea is called oceanography. The sea has been travelled and explored since ancient times, but its scientific study dates broadly from the voyages of Captain James Cook to explore the Pacific Ocean between 1768 and 1779.",
- credit: "CC0: Jon Sullivan"
- }, {
- url: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg/1280px-Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg",
- title: "冨嶽三十六景・神奈川沖浪裏",
- description: "La Grande Vague de Kanagawa (神奈川沖浪裏, Kanagawa-oki nami-ura, littéralement Sous la vague au large de Kanagawa), plus connue sous le nom de La Vague, est une célèbre estampe japonaise du peintre japonais spécialiste de l'ukiyo-e, Hokusai, publiée en 18302 ou en 1831 pendant l'époque d'Edo.\nCette estampe est l'œuvre la plus connue de Hokusai et la première de sa fameuse série « Trente-six vues du mont Fuji »Note 2, dans laquelle l'utilisation du bleu de Prusse renouvelait le langage de l'estampe japonaise. La composition de La Vague, synthèse de l'estampe japonaise traditionnelle et de la « perspective » occidentale, lui valut un succès immédiat au Japon, puis en Europe, où elle fut une des sources d'inspiration des Impressionnistes.",
- credit: "葛飾北斎"
- }, {
- url: "http://upload.wikimedia.org/wikipedia/commons/7/76/Blue_Linckia_Starfish.JPG",
- title: "Blue Starfish (Linckia laevigata)",
- description: "Linckia laevigata (sometimes called the blue Linckia or Blue Star) is a species of sea star (commonly known as a starfish) in the shallow waters of tropical Indo-Pacific (a biogeographic region of the Earth's seas, comprising the tropical waters of the Indian Ocean, the western and central Pacific Ocean, and the seas connecting the two in the general area of Indonesia). The variation (Polymorphism, in this case, a color morph) most commonly found is pure, dark or light blue, although observers find the aqua, purple or orange variation throughout the ocean. These sea stars may grow up to 30 cm in diameter, with rounded tips at each of the arms — some individuals may bear lighter or darker spots along each of their arms. Individual specimens are typically firm in texture, possessing the slightly tubular, elongated arms common to most of other members of the family Ophidiasteridae, and usually possessing short, yellowish tube feet. An inhabitant of coral reefs and sea grass beds, this species is relatively common and is typically found in sparse density throughout its range. Blue Stars live subtidally, or sometimes intertidally, on fine (sand) or hard substrata and move relatively slow (mean locomoation rate of 8.1 cm/min).",
- credit: "CC-SA: Richard Ling"
- }, {
- url: "http://upload.wikimedia.org/wikipedia/commons/0/06/Corrientes-oceanicas.gif",
- title: "Ocean currents",
- description: "An ocean current is a continuous, directed movement of ocean water generated by the forces acting upon this mean flow, such as breaking waves, wind, Coriolis effect, cabbeling, temperature and salinity differences and tides caused by the gravitational pull of the Moon and the Sun. Depth contours, shoreline configurations and interaction with other currents influence a current's direction and strength.\nA deep current is any ocean current at a depth of greater than 100m. Ocean currents can flow for great distances, and together they create the great flow of the global conveyor belt which plays a dominant part in determining the climate of many of the Earth’s regions. Perhaps the most striking example is the Gulf Stream, which makes northwest Europe much more temperate than any other region at the same latitude. Another example is Lima, Peru, where the climate is cooler (sub-tropical) than the tropical latitudes in which the area is located, due to the effect of the Humboldt Current.",
- credit: "Public domain"
+
+ var pictoTemplate = _.template(
+ '<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
+ + '<span class="picto-title"><%- annotation.title %></span></li>'
+ );
+
+ var chipTemplate = _.template(
+ '<li class="chip <%- type %>" style="left: <%- pos %>%"><span class="chip-circle">'
+ + '</span><span class="chip-title"><%- annotation.title %></span></li>'
+ );
+
+ var annotations = myProject.getAnnotationsByTypeTitle("annotations");
+
+ annotations.forEach(function(annotation) {
+ var annotationinfo = {
+ annotation: annotation,
+ open: false,
+ pos: 100 * annotation.begin / annotation.getMedia().duration
+ };
+ switch(annotation.content.mimetype) {
+ case "application/x-ldt-slideshow":
+ annotationinfo.type = "slideshow";
+ break;
}
- ];
-
- function slideshow(data) {
- var currentslide = 0, slideInterval, playing = false, loaded = false;
+ annotationinfo.picto = $(pictoTemplate(annotationinfo)).appendTo(".pictolist");
+ annotationinfo.chip = $(chipTemplate(annotationinfo)).appendTo(".chips-list");
+ annotationinfo.both = annotationinfo.picto.add(annotationinfo.chip);
+ annotationinfo.both.click(function() {
+ openAnnotation(annotationinfo);
+ })
+ .hover(function() {
+ annotationinfo.both.addClass("hover");
+ }, function() {
+ annotationinfo.both.removeClass("hover");
+ });
+ annotation.on("enter", function() {
+ annotationinfo.picto.show();
+ });
+ annotation.on("leave", function() {
+ annotationinfo.picto.hide();
+ });
+ });
+
+ function openAnnotation(annotationinfo) {
+
+ if (annotationinfo.open) {
+ annotationinfo.open = false;
+ closeAnnotation(true);
+ return;
+ }
+
+ if (myMedia.currentTime < annotationinfo.annotation.begin || myMedia.currentTime > annotationinfo.annotation.end) {
+ myMedia.setCurrentTime(annotationinfo.annotation.begin);
+ }
+
+ annotationinfo.open = true;
+
+ myMedia.pause();
+ closeAnnotation(false);
+
+ annotationinfo.both.addClass("current");
+
+ $(".chapters-bar").addClass("annotation-onscreen");
+
+ switch (annotationinfo.type) {
+ case "slideshow":
+ slideshow(annotationinfo.annotation);
+ break;
+ }
+ }
+
+ function slideshow(data) {
- function checkloaded() {
- loaded = data.reduce(function(mem, slide) {
- return (mem && !!slide.image && !!slide.image.width);
- }, true);
- if (loaded) {
- showCurrentImage();
- }
- }
+ var currentslide = 0,
+ slideInterval,
+ playing = false,
+ loaded = false,
+ slides = data.content.images
+ slideShowElement = $(".annotation-templates .slideshow-annotation").clone();
- data.forEach(function(slide) {
- slide.image = new Image();
- slide.image.onload = checkloaded;
- slide.image.src = slide.url;
- });
-
- function resizeImage() {
- var imgel = $(".slideshow-image");
- imgel.css("margin-top","");
- var w = imgel.width(),
- h = imgel.height();
- $(".slideshow-center").css("height","");
- $(".slideshow-description").css("margin-left",w);
- var h2 = $(".slideshow-center").height();
- if (h < h2) {
- imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
- }
- }
+ slideShowElement.appendTo($(".main-video"));
- function showCurrentImage() {
- var slide = data[currentslide];
- $(".slideshow-image").attr({
- src: slide.image.src,
- title: slide.title,
- alt: slide.title
- });
- $(".slideshow-credits").text(slide.credit);
- $(".slideshow-title").text(slide.title);
- $(".slideshow-description").html(
- slide.description.split(/\n/gm).map(function(l) {
- return '<p>' + _.escape(l) + '</p>';
- }).join("")
- );
- resizeImage();
- }
+ function checkloaded() {
+ if (loaded) {
+ return;
+ }
+ loaded = slides.reduce(function(mem, slide) {
+ return (mem && !!slide.image && !!slide.image.width);
+ }, true);
+ if (loaded) {
+ showCurrentImage();
+ if (data.autostart) {
+ togglePlay();
+ }
+ }
+ }
- $(window).on("resize", resizeImage);
+ slides.forEach(function(slide) {
+ slide.image = new Image();
+ slide.image.onload = checkloaded;
+ slide.image.src = slide.url;
+ });
- function nextImage() {
- currentslide = (currentslide + 1) % data.length;
- showCurrentImage();
- }
+ checkloaded();
+
+ function resizeImage() {
+ var imgel = slideShowElement.find(".slideshow-image");
+ imgel.css("margin-top","");
+ var w = imgel.width(),
+ h = imgel.height();
+ slideShowElement.find(".slideshow-center").css("height","");
+ slideShowElement.find(".slideshow-description").css("margin-left",w);
+ var h2 = slideShowElement.find(".slideshow-center").height();
+ if (h < h2) {
+ imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
+ }
+ }
- function togglePlay() {
- playing = !playing;
- clearInterval(slideInterval);
- if (playing) {
- slideInterval = setInterval(nextImage,3000);
- $(".slideshow-play-pause").addClass("pause");
- } else {
- $(".slideshow-play-pause").removeClass("pause");
- }
- }
+ function showCurrentImage() {
+ var slide = slides[currentslide];
+ slideShowElement.find(".slideshow-image").attr({
+ src: slide.image.src,
+ title: slide.title,
+ alt: slide.title
+ });
+ slideShowElement.find(".slideshow-title").text(slide.title);
+ slideShowElement.find(".slideshow-description").html(
+ slide.description.split(/\n/gm).map(function(l) {
+ return '<p>' + _.escape(l) + '</p>';
+ }).join("")
+ );
+ resizeImage();
+ }
- $(".slideshow-next").click(nextImage);
- $(".slideshow-previous").click(function() {
- currentslide = (currentslide ? currentslide : data.length) - 1;
- showCurrentImage();
- });
- $(".slideshow-play-pause").click(togglePlay);
+ function nextImage() {
+ currentslide = (currentslide + 1) % slides.length;
+ showCurrentImage();
+ }
- }
-
- slideshow(slideshowData);
-
- $(".slideshow").click(function() {
- $(".slideshow-annotation").show();
- });
+ function togglePlay() {
+ playing = !playing;
+ clearInterval(slideInterval);
+ if (playing) {
+ slideInterval = setInterval(nextImage,data["slide-duration"]);
+ slideShowElement.find(".slideshow-play-pause").addClass("pause");
+ } else {
+ slideShowElement.find(".slideshow-play-pause").removeClass("pause");
+ }
+ }
+
+ slideShowElement.find(".slideshow-next").click(nextImage);
+ slideShowElement.find(".slideshow-previous").click(function() {
+ currentslide = (currentslide ? currentslide : slides.length) - 1;
+ showCurrentImage();
+ });
+ slideShowElement.find(".slideshow-play-pause").click(togglePlay);
+ slideShowElement.find(".close-annotation").click(closeAnnotation);
+ slideShowElement.find(".annotation-title").text(data.title);
+ }
- $(".text").click(function() {
- $(".text-annotation").show();
- });
-
- $(".audio").click(function() {
- $(".audio-annotation").show();
- });
-
- $(".close-annotation").click(function() {
- $(".annotation").hide();
- })
+ function closeAnnotation(e) {
+ $(".chip").removeClass("current");
+ $(".chapters-bar").removeClass("annotation-onscreen");
+ $(".main-video .annotation").remove();
+ if (!!e) {
+ myMedia.play();
+ }
+ }
});