I am using the Anything Slider on a website to show videos in a slider view. I am wanting to add captions to the videos like they are shown in the demo at http://jsfiddle.net/Mottie/ycUB6/34/ However, when I try to use the code shown in the demo, it doesn't show the captions but makes the video smaller.
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Games</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/gamesPageStyle.css" />
<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../CSS-Tricks-AnythingSlider/js/jquery.min.js"><\/script>')</script>
<script src="../CSS-Tricks-AnythingSlider/js/swfobject.js"></script>
<link rel="stylesheet" href="../CSS-Tricks-AnythingSlider/css/anythingslider.css">
<script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.video.js"></script>
<script src="../js/hoverActiveLink.js"></script>
<script src="../js/slider.js"></script>
</head>
<body>
<div id="logoBlock" class= "grid_4">
<!--<h1>Logo</h1>-->
<img width=200px src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
<div id="navigation" class="grid_8 omega">
<ul id="navList">
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/MichaelHomePage.html" id="homeNav">Home</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle" >
<a class= "round-button" href="../html/gamesPage.html" id="gamesNav">Games</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
</div></div>
</li>
</ul>
</div>
<script>
// DOM Ready
$(function(){
$('#slider')
.anythingSlider({
resizeContents : true,
addWmodeToObject : 'opaque',
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Welcome', 'Sky Catcher', 'Neon Night Ballz', 'Penguin Pushers', 'The Fishman Cometh', 'No More Bombs', 'Psychokinetic', 'Diamond Thief', 'Ranger Danger'] [index - 1];
}
})
// Initialize video extension
// see https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of parameters
.anythingSliderVideo({
// video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
videoId : 'asvideo',
// auto load YouTube api script
youtubeAutoLoad : true,
// see: https://developers.google.com/youtube/player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,
fs : 1
}
});
});
</script>
</head>
<body>
<br>
<div id="section1" class="grid_9">
<!-- START AnythingSlider -->
<ul id="slider">
<!-- Vimeo: iframe -->
<li class="panel1">
<iframe src="http://player.vimeo.com/video/18011143?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe></li>
<!-- Vimeo: Embeded -->
<li class="panel2"><object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="940" height="529"></embed></object></li>
<!-- YouTube: iframe -->
<li class="panel3"><iframe title="YouTube video player" width="480" height="385" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>
<!-- YouTube: Embedded -->
<li class="panel4"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<!-- HTML5 Video -->
<li class="panel5">
<video width="320" height="240" controls="controls">
<source src="demos/video/movie.ogg" type="video/ogg">
<source src="demos/video/movie.mp4" type="video/mp4">
<source src="demos/video/movie.webm" type="video/webm">
Your browser does not support the video tag. But you could include an iframe/embeded video here.
</video>
</li>
<li class="panel6"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<li class="panel7"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<li class="panel8"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<li class="panel9"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
<div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div>
</li>
</ul> <!-- END AnythingSlider -->
<br>
<div id="current-caption"></div>
</div>
<div id="contact" class="grid_5 omega">
<p><span>Contact Information</span></p>
<div id="image" class="grid_4">
<img src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
</div>
<script src="../jquery.fitvids.js"></script>
<script>
// Target your .container, .wrapper, .post, etc.
$("#game1").fitVids();
</script>
<body id="games">
</body>
</html>
And this is my css file:
/*global*/
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background: #333333;
}
a {
color: #4fb69f;
text-decoration: none;
}
/*typography*/
h1 {
font-size: 1.750em;
font-weight: 100;
letter-spacing: -1.5px;
}
h2 {
font-weight: 100;
font-size: 1.500em;
font-size: 2.5vw;
color: #b4c34f;
}
h3 {
font-weight: 100;
font-size: 1.125em;
color: #ed6c85;
}
#logoBlock{
position: relative;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
top: 0;
background-color: #420600;
width: 100%;
height: 15%;
}
#logoBlock h1 {
color: #FFF;
text-align: center;
top: 20px;
}
#logoBlock img {
width: 20%;
height: 20%;
}
#navigation{
position: relative;
width: 80%;
height: 15%;
left: 10%;
background-color: #008080;
}
#navigation ul{
list-style-type:none;
margin: 0 auto;
width: 100%;
height: 25%;
margin-left: 16%;
}
#navigation li {
display:inline;
float: left;
padding: 2%;
}
.round-button {
width:85%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #ff8080;
overflow:hidden;
background: #c83737;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#F5F5DC;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
#contact{
position: relative;
width: 200px;
height: 50px;
}
#contact img{
position: relative;
width: 20px;
height: 20px;
}
#image{
position: absolute;
width: 100px;
height: 100px;
}
/*** Set Slider dimensions here! Version 1.7+ ***/
ul#slider {
width: 800px;
height: 700px;
list-style: none;
}
.caption { display: none; }
#current-caption { width: 300px; margin: 10px auto; text-align: center; }
#section1 {
position: relative;
height: 20%;
width: 100%;
}
#section 1 h1 {
height: 2%;
width: 2%;
left: 5%;
color: #FFF
}
#game1 {
position: relative;
left: 30%;
top:-10%;
}
#section2 {
position: relative;
height: 20%;
width: 100%;
}
#game2 {
position: relative;
left: 30%;
top:-10%;
}
#section3 {
position: relative;
height: 20%;
width: 100%;
}
#game3 {
position: relative;
left: 30%;
top:-10%;
}
#section4 {
position: relative;
height: 20%;
width: 100%;
}
#game4 {
position: relative;
left: 30%;
top:-10%;
}
#section5 {
position: relative;
height: 20%;
width: 100%;
}
#game5 {
position: relative;
left: 30%;
top:-10%;
}
#section6 {
position: relative;
height: 20%;
width: 100%;
}
#game6 {
position: relative;
left: 30%;
top:-10%;
}
#section7 {
position: relative;
height: 20%;
width: 100%;
}
#game7 {
position: relative;
left: 30%;
top:-10%;
}
body#home .round-button a#homeNav,
body#games .round-button a#gamesNav,
body#resume .round-button a#resumeNav,
body#contact .round-button a#contactNav {
background: #30588e;
}
I am also using the js file from the demo:
var updateCaption = function(slider){
var cap = slider.$currentPage.find('.caption').html();
$('#current-caption')
.html(cap)
.fadeIn(200);
};
$('#slider1').anythingSlider({
// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) { updateCaption(slider); },
// Callback before slide animates
onSlideBegin: function(e, slider) {
$('#current-caption').fadeOut(200);
},
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) { updateCaption(slider); }
});
If anyone has any advice on how to get the captions to show properly, like they do in the demo, I would greatly appreciate it! Thanks, Jessica
The HTML shared in the above code contains 3 <body> tags. MDN states:
There is only one
<body>element in a document.
Interestingly, the W3C spec doesn't appear to state this outright.
Anyway, back to the answer. The code to initialize AnythingSlider and update the external captions should be combined. It also needs some css to hide the captions within each slide since they aren't shown. I created this (demo) which combines the <body> tags, but don't just copy and paste the entire code as it links to the plugin files at GitHub.
CSS
.caption { display : none; }
Script
$(function(){
var updateCaption = function(slider){
var cap = slider.$currentPage.find('.caption').html();
$('#current-caption')
.html(cap || '')
.fadeIn(200);
};
$('#slider')
.anythingSlider({
resizeContents : true,
addWmodeToObject : 'opaque',
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Welcome', 'Sky Catcher', 'Neon Night Ballz', 'Penguin Pushers', 'The Fishman Cometh', 'No More Bombs', 'Psychokinetic', 'Diamond Thief', 'Ranger Danger'] [index - 1];
},
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
updateCaption(slider);
},
// Callback before slide animates
onSlideBegin: function(e, slider) {
$('#current-caption').fadeOut(200);
},
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) {
updateCaption(slider);
}
})
// Initialize video extension
// see https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of parameters
.anythingSliderVideo({
// video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
videoId : 'asvideo',
// auto load YouTube api script
youtubeAutoLoad : true,
// see: https://developers.google.com/youtube/player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,
fs : 1
}
});
});