所以我有一个在旋转木马内组织的网站，所以导航它真的很流畅。 唯一的问题是，我想放一个巨大的弹出窗口或fancybox（我已尝试过两者），在其中一个旋转木马“框架”内部并且它不起作用...我使用了fancybox和magnific的插件弹出并没有碰他们。想想也许某处有冲突，但我找不到它。 如果您有任何建议，我会在此处提供代码并感谢您！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Merak(i)</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Main stylesheet -->
<link href="assets/css/hallooou.css" rel="stylesheet">
<!-- Plugin stylesheets -->
<link href="assets/css/plugins/owl.carousel.css" rel="stylesheet">
<link href="assets/css/plugins/owl.theme.css" rel="stylesheet">
<link href="assets/css/plugins/owl.transitions.css" rel="stylesheet">
<link href="assets/css/plugins/animate.css" rel="stylesheet">
<link href="assets/css/plugins/magnific-popup.css" rel="stylesheet">
<link href="assets/css/plugins/jquery.mb.YTPlayer.min.css" rel="stylesheet">
<link href="assets/css/plugins/jquery.fancybox.css" rel="stylesheet" media="screen">
<!-- <script src="assets/js/plugins/jquery.fancybox.pack.js"></script>
<script>
$(document).ready(function() {
$('.fancybox').fancybox({
padding : 0,
openEffect : 'fade'
});
});
</script> -->
</head>
<body id="home">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand page-scroll" href="#page-top">
<!-- replace with your brand logo/text -->
<span class="brand-logo"><img src="assets/images/logo.svg" onerror="this.src='assets/images/logo.png'; this.onerror=null;" alt="Hallooou - HTML5 Template" title="Hallooou - HTML5 Template" class="img-responsive"></span>
</a>
</div>
<div class="main-nav pull-right">
<div class="button_container toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li data-target="#intro-carousel" data-slide-to="0" class="active">The Project</li>
<li data-target="#intro-carousel" data-slide-to="1">Cyprus' History</li>
<li data-target="#intro-carousel" data-slide-to="2">Merak(i)'s first presentation</li>
<li data-target="#intro-carousel" data-slide-to="3">Multimedia Gallery</li>
<li data-target="#intro-carousel" data-slide-to="4">Contact us</li>
</ul>
</nav>
</div>
</div><!-- /.container -->
</nav>
<!-- Intro Header -->
<!-- Full Page Image Background Carousel Header -->
<header id="intro-carousel" class="carousel slide">
<!-- Optional Indicators -->
<!--<ol class="carousel-indicators">
<li data-target="#intro-carousel" data-slide-to="0" class="active"></li>
<li data-target="#intro-carousel" data-slide-to="1"></li>
<li data-target="#intro-carousel" data-slide-to="2"></li>
</ol> -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(assets/images/background.jpg);"></div>
<div class="carousel-caption" style="overflow-x: hidden; overflow-y: scroll;">
<h1>The Project</h1>
<br />
<p>A small island, a golden-green leaf on the Mediterranean, rose out of the sea foams: Cyprus.
<br />Let us step into an adventure, a journey into Cyprus’ history, tradition, music. Out of this crossroad of cultures, its communities share a lot.
<br />“Meraki”, is one of the shared words. In Turkish, it means curiosity, an emotion which provokes the desire to seek and grow. In Greek, “meraki” describes the strong eagerness (pothos), or the pleasurable result of amusement. Also, “meraki” means to engage in something soulfully, with creative devotion.
<br />
<br />This project to open up a platform to stimulate curiosity, the desire to discover, share and communicate through the art of photographers, film makers, composers and musicians. Inspired by the idea of synergy and respectful coexistence in a diverse community we, the participants invite you to walk with us along the Green Line: the border that divides, until now, Cyprus in two and as Aphrodite rose out of the sea through this journey we hope for the light of awareness to be shone.</p>
</div>
<div class="carousel-text-left">
<p>Contact us</p>
</div>
<div class="carousel-text-right">
<p>Cyprus's History</p>
</div>
</div><!-- /.item -->
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url(assets/images/background.jpg);"></div>
<div class="carousel-caption" style="overflow-x: hidden; overflow-y: scroll;">
<h1>Cyprus's History</h1>
<img src="assets/images/map.png" height="100%">
<br />
<br />
<p style="font-weight:400">Cyprus is an island located in the eastern corner of the Mediterranean Sea. It is the largest island of the eastern Mediterranean, and the third smallest country of the European Union. Despite its small size, its geographical position gave Cyprus a great importance throughout history.<br />
The earliest reference for human activity in the island dates back to the 10th millennium B.C. Located in the crossroads of three continents, Europe, Africa and Asia, Cyprus became a centre for trade and cultural exchange but also a battlefield for geostrategic hegemony.<br />
Cyprus was settled by the Myceneans around 1200 B.C, and it was later conquered by major powers of the region such as the Assyrians (709 B.C.), the Egyptians (around 560 B.C.) and the Persians. In 332 B.C. Cyprus became part of Alexander the Great’s Empire, while between 30 B.C.-330 A.D. it was under the domination of the Roman Empire. Following the Roman’s Empire division, Cyprus became part of the Eastern Roman Empire, subsequently known as the Byzantine Empire (330-1191 A.D.). It was also ruled by the French dynasty of Louisianans (1192-1489) as well as the Venetians (1489-1571).<br />
In the most recent times Cyprus was occupied by the Ottoman Empire between 1571 and 1878, and later became part of the British Empire after a deal between the two powers. In 1960 Cyprus achieved its independence, and the Republic of Cyprus was established after these long centuries of colonisation. Cyprus is constituted of five ethnic communities; the Greek Cypriots (77%), the Turkish Cypriots (18,3%), Armenians (0,6%), Maronites (0,5%) and Latins (0,8%) *.<br />
But as history proves us, the long history of conflict, instability and colonialism can hardly result to future peace. Due to irredentist tendencies, the two major communities were caught up in a bi-communal conflict which ended up with the Turkish invasion of 1974. The invasion has divided the island in two. Turkey occupied and, still controls de facto, 37% of the Cypriot land and the two Cypriot communities live separately since then. Greek-Cypriots in the south of the island and Turkish-Cypriots in the north.
In 2004, a plan for the resolution of the Cyprus issue was proposed by Kofi Annan but was rejected. Since then, the negotiations for reunifying Cyprus and its people are continuous.<br />
On May 1st 2004 Cyprus became a member of the European Union and 4 years later, in 2008 became part of the Eurozone. The global economic crisis has not left Cyprus unaffected. In 2013 Cyprus was imposed a bailout plan by the European Commission, the European Central Bank and the International Monetary Fund. Private depositors as well as the national economy were heavily affected. This period marked Cyprus’ entry into the era of financial crisis, aid programs, and youth unemployment.<br /><br/>
<small>* statistics given before 1974.</small></p>
</div>
<div class="carousel-text-left">
<p>The Project</p>
</div>
<div class="carousel-text-right">
<p>Merak(i)'s first edition</p>
</div>
</div><!-- /.item -->
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url(assets/images/background.jpg);"></div>
<div class="carousel-caption" style="overflow-x: hidden; overflow-y: scroll;">
<div class="row text-center">
<div class="col-md-12">
<h1>Artists from Merak(i)'s first edition</h1>
<p>The presentation of Merak(i) in the "Courants d'airs" festival, presented at the Royal Conservatory of Brussels in April, 16 of 2016.</p>
</div><!-- /.col-md-12 -->
<div class="row">
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/brice-catherin.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: France</strong></p>
<p>"La quatrième dimension chypriote" ...</p>
</figcaption>
</figure>
<h4>Brice Catherin</h4>
<p>Composer</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/grucan-keltek.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: Turkey</strong></p>
<p>“Colony“ is a film about psychogeography, the memory of the landscape and remembrance.</p>
</figcaption>
</figure>
<h4>Gürcan Keltek</h4>
<p>Movie Director</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/laura-lermigeaux.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: France</strong>
<br />
<br />
Varosha is a descriptive piece. It encourages the listener to experiment
a solitary journey inside the abandoned coastal city, and perceive Nature’s thrilling heartbeats, which pursue its territorial conquest.</p>
</figcaption>
</figure>
<h4>Laura Lermigeaux</h4>
<p>Composer</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/ana-nunez.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: Spain</strong>
<br />
<br />
The photographic project of Ana refers on how the landscape of Cyprus has been influenced by the conflict and division of the island.</p>
</figcaption>
</figure>
<h4>Ana Nuñez Rodriguez</h4>
<p>Photographer</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/katerina-kyriacou.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: Cyprus</strong>
<br />
<br />
“A crown of Sonnets” is a collection which contains 7 poems, and 3 of them will be presented in Merak(i).</p>
</figcaption>
</figure>
<h4>Katerina Kyriacou</h4>
<p>Photographer</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/alexandra-pambouka.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: Cyprus</strong></p>
<p>Temporibus dolor, quisquam consectetur molestias, veniam voluptatum. Beatae alias omnis totam.</p>
</figcaption>
</figure>
<h4>Alexandra Pambouka</h4>
<p>Photographer</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="" alt="" class="img-responsive">
</figure>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
<div class="col-md-4">
<div class="team-member wow fadeIn" data-wow-offset="10">
<figure>
<img src="assets/images/meropia.jpg" alt="" class="img-responsive">
<figcaption>
<p><strong>Born in: Cyprus and Turkey</strong>
<br />
<br />
“A crown of Sonnets” is a collection which contains 7 poems, and 3 of them will be presented in Merak(i).</p>
</figcaption>
</figure>
<h4>Meropia</h4>
<p>Music group</p>
</div><!-- /.team-member -->
</div><!-- /.col-md-4 -->
</div><!-- /.row -->
</div>
</div>
<div class="carousel-text-left">
<p>Cyprus's History</p>
</div>
<div class="carousel-text-right">
<p>Multimedia Gallery</p>
</div>
</div><!-- /.item -->
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(assets/images/background.jpg);"></div>
<div class="carousel-caption" style="overflow-x: hidden; overflow-y: hidden;">
<h1>Multimedia Gallery</h1>
<br />
<!-- <a href="assets/images/gallery/project-one_xl.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="assets/images/gallery/project-one.jpg" /></a>
<a href="assets/images/gallery/project-two_xl.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="assets/images/gallery/project-two.jpg" /></a> -->
<div class="recent-project-carousel owl-carousel owl-theme popup-gallery">
<div class="item recent-project wow fadeIn" data-wow-offset="10">
<img src="assets/images/gallery/project-one.jpg" alt="">
<div class="full-project">
<a href="assets/images/gallery/project-one_xl.jpg" title="Lakeview Inc. | Website Design">View project <i class="fa fa-chevron-right"></i></a>
</div><!-- /.full-project -->
</div><!-- /.item -->
<div class="item recent-project wow fadeIn" data-wow-offset="10">
<img src="assets/images/gallery/project-two.jpg" alt="">
<div class="project-info">
<h3>Adam Productions</h3>
<ul class="project-meta">
<li><a href="#">App Design</a></li>
</ul>
</div><!-- /.project-info -->
<div class="full-project">
<a href="assets/images/gallery/project-two_xl.jpg" title="Adam Productions | App Design">View project <i class="fa fa-chevron-right"></i></a>
</div><!-- /.full-project -->
</div><!-- /.item -->
<div class="item recent-project wow fadeIn" data-wow-offset="10">
<img src="assets/images/gallery/project-three.jpg" alt="">
<div class="project-info">
<h3>Doe Associates</h3>
<ul class="project-meta">
<li><a href="#">Branding</a></li>
</ul>
</div><!-- /.project-info -->
<div class="full-project">
<a href="assets/images/gallery/project-three_xl.jpg" title="Doe Associates | Branding">View project <i class="fa fa-chevron-right"></i></a>
</div><!-- /.full-project -->
</div><!-- /.item -->
<div class="item recent-project wow fadeIn" data-wow-offset="10">
<img src="assets/images/gallery/project-four.jpg" alt="">
<div class="project-info">
<h3>Omega Corporation</h3>
<ul class="project-meta">
<li><a href="#">App Design</a></li>
</ul>
</div><!-- /.project-info -->
<div class="full-project">
<a href="assets/images/gallery/project-four_xl.jpg" title="Omega Corporation | App Design">View project <i class="fa fa-chevron-right"></i></a>
</div><!-- /.full-project -->
</div><!-- /.item -->
</div><!-- /.recent-project-carousel -->
</div>
<div class="carousel-text-left">
<p>Merak(i)'s first edition</p>
</div>
<div class="carousel-text-right">
<p>Contact us</p>
</div>
</div><!-- /.item -->
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url(assets/images/background.jpg);"></div>
<div class="carousel-caption" style="overflow-x: hidden; overflow-y: hidden;">
<h1>Contact us</h1>
<div class="row text-center">
<div class="col-md-12 social segment">
<br />
<br />
<a href="mailto:meraki.cy@gmail.com"><i class="fa fa-envelope fa-5x"><br /><p><small>E-mail us</small></p></i></a>
<br />
<br />
<a href="http://www.facebook.com/MERAKicy"><i class="fa fa-facebook-square fa-5x"><br /><p><small>Follow us</small></p></i></a>
</div><!-- /.col-md-12 -->
</div><!-- /.row -->
</div>
<div class="carousel-text-left">
<p>Multimedia Gallery</p>
</div>
<div class="carousel-text-right">
<p>The project</p>
</div>
</div><!-- /.item -->
</div>
<!-- Controls -->
<a class="left carousel-control squared" href="#intro-carousel" data-slide="prev">
<i class="fa fa-chevron-circle-left fa-2x"></i>
</a>
<a class="right carousel-control squared" href="#intro-carousel" data-slide="next">
<i class="fa fa-chevron-circle-right fa-2x"></i>
</a>
</header>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/plugins/wow.min.js"></script>
<script src="assets/js/plugins/owl.carousel.min.js"></script>
<script src="assets/js/plugins/jquery.parallax-1.1.3.js"></script>
<!-- <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script> -->
<script src="assets/js/plugins/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/js/plugins/jquery.inview.min.js"></script>
<script src="assets/js/plugins/pace.min.js"></script>
<script src="assets/js/plugins/jquery.easing.min.js"></script>
<script src="assets/js/plugins/additional-methods.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBoVKfEihX__NdMwdDysA6Vve6PE9Ierj4"></script>
<!-- Custom JavaScript -->
<script src="assets/js/hallooou.js"></script>
</body>
</html>
和主要的JS：
// Lightbox
$(function() {
$('.popup-gallery').magnificPopup({
delegate: '.full-project a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Merak(i)</small>';
}
}
});
});