Featherlight灯箱将在页面底部打开

时间:2015-06-26 00:08:08

标签: javascript jquery css featherlight.js

          <!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">&copy;  <?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插件(灯箱)已停止工作。它现在在页面底部打开。为什么会这样?我自己无法弄明白,所以我尝试了其他一些,但似乎没有一个工作:(提前谢谢!

my current project

1 个答案:

答案 0 :(得分:1)

你根本就不包括羽毛灯的CSS。