<!DOCTYPE html>
<html>
<? include 'admin/connection/connection.php'; ?>
<head>
<title>Sophia de Boer</title>
<meta http-equiv="default-style" content="public">
<link rel="shortcut icon" href="http://www.sophiadeboer.com/favicon.ico">
<meta charset="utf-8">
<link property='favicon' href="/favicon.ico" rel="icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sophia de Boer, geboren te Rotterdam, is een Nederlandse presentatrice voor televisie en shows.">
<meta name="keywords" content="Sophia de Boer, presentatrice, sbs, rtl, veronica, lotto, miss holland, life is beautiful, erik kwant, ">
<meta name="author" content="Sophia de Boer">
<link property='stylesheet' href="assets/css/bootstrap.css" rel="stylesheet">
<link property='stylesheet' href="assets/css/main.css" rel="stylesheet">
<link property='stylesheet' href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link property='stylesheet' href="assets/css/font-awesome.min.css" rel="stylesheet">
<link property='stylesheet' href="assets/css/animate-custom.css" rel="stylesheet">
<link property='stylesheet' href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link property='stylesheet' href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.6.2.min.js"></script>
<script>
var $j = jQuery.noConflict(true);
</script>
<script>
$(document).ready(function () {
console.log($().jquery); // This prints v1.11.1
console.log($j().jquery); // This prints v1.6.2
});
</script>
<script>
$('a.gallery').featherlightGallery({
previousIcon: '<',
nextIcon: '>',
galleryFadeIn: 300,
openSpeed: 300
});
</script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.2.3/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="smoothScroll" href="#home">
<p class="navbar-brand">Sophia de Boer</p>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li> <a href="#home" class="smoothScroll">Home</a>
</li>
<li> <a href="#about" class="smoothScroll"> Over mij</a>
</li>
<li> <a href="#services" class="smoothScroll"> Items</a>
</li>
<li> <a href="#media" class="smoothScroll"> Media</a>
</li>
<li> <a href="#contact" class="smoothScroll"> Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ==== HOME ==== -->
<script type="text/javascript" src="assets/js/swfobject.js"></script>
<script type="text/javascript" src="assets/js/modernizr.video.js"></script>
<script type="text/javascript" src="assets/js/video_background.js"></script>
<div id="home">
<div id="player1" class="embed-container">
<h1><? echo $home['Title']; ?></h1>
<? echo $home['Content']; ?>
<br>
</div>
</div>
<!-- ==== ABOUT ==== -->
<div id="about">
<div class="container">
<div class="row white">
<h2 class="centered">Over Mij</h2>
<hr>
<div class="col-md-8">
<h3><? echo $about1['Title']; ?></h3>
<p>
<? echo $about1['Content']; ?>
</p>
</div>
<div class="col-md-4">
<img id="sofiaabout" class="img-responsive" src="assets/img/sophia.jpg" alt="sophia">
</div>
<div class="col-md-6">
<h3><? echo $about2['Title']; ?></h3>
<p>
<? echo $about2['Content']; ?>
</p>
</div>
<div class="col-md-6">
<h3><? echo $about3['Title']; ?></h3>
<p>
<? echo $about3['Content']; ?>
</p>
</div>
</div>
</div>
</div>
<!-- ==== SERVICES ==== -->
<div id="services">
<div class="container">
<div class="row">
<h2 class="centered"><? echo 'Items'; ?></h2>
<hr>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?
$carouselCounter = 0;
foreach ($carousel as $carouselrow) {
if ($carouselCounter == 0) {
$carouselClass = "item active";
} else {
$carouselClass = "item";
}
?>
<div class="<? echo $carouselClass; ?>">
<div class="holder col-sm-5">
<br>
<? echo $carouselrow['Image']; ?>
</div>
<div class="col-sm-7">
<div class="carousel-caption">
<h2><? echo $carouselrow['Title']; ?></h2>
<? echo $carouselrow['Content']; ?>
</div>
</div>
</div>
<?
$carouselCounter++;
}
?>
</div>
<div class="controllers col-sm-12 col-xs-12">
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa-arrow-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa-arrow-right"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<?
$i = 1;
foreach ($carousel as $carouselrow) {
?>
<li data-target="#carousel-example-generic" data-slide-to="<? echo $i ?>"></li>
<?
$i++;
}
?>
</ol>
</div>
</div>
</div>
</div>
</div>
<!-- ==== PORTFOLIO ==== -->
<div id="media">
<div class="container">
<div class="row">
<h2 class="centered">Media</h2>
<hr>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="albumside-nav" id="albumsideNav">
<div class="btn-group" role="group" aria-label="...">
<button id="album1link" type="button" class="btn btn-default">
<span class="fa-th" aria-hidden="true"><? echo $media['album1naam']; ?></span>
</button>
<button id="album2link" type="button" class="btn btn-default">
<span class="fa-th" aria-hidden="true"> <? echo $media['album2naam']; ?></span>
</button>
<button id="album3link" type="button" class="btn btn-default">
<span class="fa-th" aria-hidden="true"> <? echo $media['album3naam']; ?></span>
</button>
<button id="album4link" type="button" class="btn btn-default">
<span class="fa-th" aria-hidden="true"> Videos</span>
</button>
</div>
</div>
</div>
</div>
<div id="albumwrapper">
<section data-featherlight-gallery
data-featherlight-filter="a">
<div id="uploads"></div>
<div id="tijdlijn"></div>
<div id="profiel"></div>
<div id="videos">
<?php include 'assets/php/fbvideos.php' ?>
</div>
</section>
</div>
</div>
</div>
<!-- ==== CONTACT ==== -->
<div id="contact">
<div class="container">
<div class="row">
<h2 class="centered"><? echo $boekingen1['Title']; ?></h2>
<hr>
<? echo $boekingen1['Content']; ?>
<div class="row">
<div class="col-lg-4 callout"> <i class="fa <? echo $boekingen2['Icon']; ?> fa-3x"></i>
<h3><? echo $boekingen2['Title']; ?></h3>
<? echo $boekingen2['Content']; ?>
</div>
<div class="col-lg-4 callout"> <i class="fa <? echo $boekingen3['Icon']; ?> fa-3x"></i>
<h3><? echo $boekingen3['Title']; ?></h3>
<? echo $boekingen3['Content']; ?>
</div>
<div class="col-lg-4 callout"> <i class="fa <? echo $boekingen4['Icon']; ?> fa-3x"></i>
<h3><? echo $boekingen4['Title']; ?></h3>
<? echo $boekingen4['Content']; ?>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 centered">
<form id="contactform" method="post" class="form" role="form" action="../assets/php/email.php">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
</div>
</div>
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
<div class="row">
<div class="col-md-12">
<br>
<div class="g-recaptcha" data-sitekey="6Le2F_8SAAAAAAKUMNjnJo8zj-VHdv-hzfPEuxc6"></div>
</div>
<div class="col-md-12">
<button class="btn btn btn-lg" name="submit" type="submit">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div id="footerwrap">
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="copyright">© <?php echo date("Y") ?> Sophia de Boer. </span> </div>
<ul class="list-inline social-buttons">
<li><a href="https://twitter.com/sophiadeboer" target="_blank"><i class="fa fa-twitter"></i></a> </li>
<li><a href="https://www.facebook.com/sophia.deboer" target="_blank"><i class="fa fa-facebook"></i></a> </li>
<li><a href="https://instagram.com/sophiadeboer/" target="_blank"><i class="fa fa-instagram"></i></a> </li>
<li><a href="https://www.linkedin.com/in/sophiadeboer" target="_blank"><i class="fa fa-linkedin"></i></a> </li>
<li><a href='/admin'><i class="fa fa-unlock-alt"></i></a>
</li>
</ul>
<span class="copyright2">Opgezet door <a href="http://www.karsbarendrecht.nl" target="_blank">Kars Barendrecht</a></span>
</div>
</div>
<div class="container">
<nav id="social-sidebar">
<ul>
<li>
<a href="https://twitter.com/sophiadeboer" class="fa fa-twitter" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/sophia.deboer" class="fa fa-facebook" target="_blank">
<span>Facebook</span>
</a>
</li>
<li>
<a href="https://instagram.com/sophiadeboer" class="fa fa-instagram" target="_blank">
<span>Instagram</span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/sophiadeboer" class="fa fa-linkedin" target="_blank">
<span>Linked In</span>
</a>
</li>
</ul>
</nav>
</div>
<script>
$j(document).ready(function ($) {
var Video_back = new video_background($("#player1"), {
"position": "absolute", //Stick within the div
"z-index": "-1", //Behind everything
"loop": true, //Loop when it reaches the end
"autoplay": true, //Autoplay at start
"muted": true, //Muted at start
"youtube": "uLwpr6nD9ik", //Youtube video id
"start": 0, //Start with 0 seconds offset
"video_ratio": 1.7778, // width/height -> If none provided sizing of the video is set to adjust
"fallback_image": "assets/img/home.jpg", //Fallback image path
});
});
</script>
<script type="text/javascript" charset="utf-8" src="assets/js/modernizr.custom.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/js/jquery.fbAlbum.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
var album1 = "<?php echo $media['Album1']; ?>";
var album2 = "<?php echo $media['Album2']; ?>";
var album3 = "<?php echo $media['Album3']; ?>";
$('#uploads').fbAlbum({
'albumID': album1
});
$('#profiel').fbAlbum({
'albumID': album2
});
$('#tijdlijn').fbAlbum({
'albumID': album3
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#portretten, #tijdlijn, #videos').hide();
$(".albumside-nav button").each(function (i) {
$(this).click(function () {
$("#albumwrapper").find("div:eq('" + i + "')").show().siblings().hide();
});
});
});
</script>
<script>
$('.carousel').carousel({
interval: 999000
});
$(window).bind("load resize slid.bs.carousel", function () {
var imageHeight = $(".active .holder").height();
$(".controllers").height(imageHeight);
console.log("Slid");
});
</script>
<script async src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript" charset="utf-8" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/js/retina.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/js/jquery-func.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.2.3/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
<link href="//cdn.rawgit.com/noelboss/featherlight/1.2.3/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" title="Featherlight Gallery Styles" />
</div>
</div>
</body>
</html>
featherlight 插件(灯箱)由于某种原因停止工作。它现在在页面底部打开。为什么会这样？我无法自己弄清楚，所以我尝试了其他一些，但似乎没有一个有效:(提前致谢!
最佳答案
您根本没有包括 featherlight 的 CSS。
关于javascript - Featherlight 灯箱在页面底部打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31062829/