0
我使用fancybox與我在Bootstrap 3中設計的網站。縮略圖的網格視圖起作用，但是當您單擊縮略圖時，它只會打開較大的圖像，它不會像設置它一樣從一個滑塊到下一個滑塊。這裏是page I have it live on。Fancybox滑塊不起作用
http://driftwoodrentals.com/css/bootstrap.min.css
http://driftwoodrentals.com/jquery.fancybox.min.css<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DriftwoodRentals.com</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<!-- Font Awesome JS -->
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="author" content="John Samonas">
<meta name="robots" content="index, follow">
<meta name="description" content="Welcome to Driftwood Rentals. We have cottages and apartments that can handle from 2 to 8 people. We have a wonderful property right across from the beach that people have been vacationing at for decades! Enjoy our clean sandy beach right across the street, our fenced in pool, big yard, and wonderful breezy sunsets! We have pre-season and post season specials, weekly rentals and even winter rentals. We are close to all activities, Hampton Beach, historic downtown Portsmouth and everything in between! Our guests can also enjoy our Pool. All cottages have kitchenettes, private bath, screened porch, Cable TV, refrigerator and more! NO PETS/NO SMOKING ALLOWED! We are open from May through October.
">
<meta name="keywords" content="Driftwood Rentals, Rye Beach New Hampshire Vacation Rentals, Rye Beach New Hampshire rentals, Rye Beach New Hampshire travel information, vacation cottage rentals, vacation apartment rentals, holiday rentals, lodging, accommodations, cottage for rent rye nh, across from the beach, Hampton Beach, downtown Portsmouth, pool, real estate rental agencies rye beach nh, accomodations rye harbour, kitchenettes, private bath, screened porch, Cable TV, refrigerator">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<!-- Navigation -->
<div class="main-navigation-container navbar-fixed-top" id="primary-navbar">
<nav class="navbar">
<div class="container-fluid">
<!-- Mobile Toggle Button and stuff -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"> The Driftwood</a>
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<!-- End of mobile toggle button -->
<!-- Start of the navbar -->
<div class="collapse navbar-collapse" id="primary-navigation">
<ul class="nav nav-justified">
<li><a href="index.html"><i style="font-size:24px" class="fa"></i> Home<span class="sr-only">(current)</span></a></li>
<li><a href="photos.html"><i style="font-size:24px" class="fa"></i> Photos</a></li>
<li><a href="rates.html"><i style="font-size:24px" class="fa"></i> Rates & Booking</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><i class="fa fa-arrow-circle-down fa-lg" aria-hidden="true"></i> Things To Do</a>
<ul class="dropdown-menu">
<li><a href="http://ryebeachinfo.com/" target="_blank">Rye Beach</a></li>
<li><a href="https://www.nhstateparks.org/visit/state-parks/jenness-state-beach.aspx" target="_blank">Jenness State Beach</a></li>
<li><a href="http://www.nhstateparks.com/wallis.html" target="_blank">Wallis Sands Beach</a></li>
<li><a href="http://www.newcastlenh.org/pages/newcastlenh_common/great" target="_blank">Great Island Commons</a></li>
<li><a href="http://www.nhstateparks.org/visit/state-parks/odiorne-point-state-park.aspx" target="_blank">Odiorn State Park</a></li>
<li><a href="http://www.nhstateparks.org/visit/state-parks/rye-harbor-state-park.aspx" target="_blank">Rye Harbor State Park</a></li>
<li><a href="http://www.seacoastsciencecenter.org/" target="_blank">Seacoast Science Center</a></li>
<li><a href="http://www.granitestatewhalewatch.com/" target="_blank">Granite State Whale Watch</a></li>
<li><a href="http://www.atlanticwhalewatch.com/" target="_blank">Atlantic Whale Watch</a></li>
<li><a href="http://www.portsmouthharbor.com/" target="_blank">Portsmouth Harbor Cruises</a></li>
<li><a href="http://ryeairfield.com/" target="_blank">Rye Airfield</a></li>
</ul>
</li>
<li><a href="map.html"><i style="font-size:24px" class="fa"></i> Map</a></li>
<li><a href="contact.html"><i style="font-size:24px" class="fa"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<header class="masthead">
<img src="images/Driftwood_Logo.jpg" alt="Driftwood logo">
</header>
<!-- /.container -->
<!-- Feature -->
<div class="container">
<h1>Photos</h1>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/1-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/1.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/3-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/3.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/5-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/5.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/7-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/7.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/9-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/9.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/11-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/11.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/13-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/13.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" rel="ligthbox" href="images/15-th.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/15.jpg" /> </div>
</a>
</div>
</div>
<div class="clearfix"></div>
<footer>
<!-- Copyright etc -->
<div id="footer">
<p>Copyright © <script>document.write(new Date().getFullYear());</script> The Driftwood</p>
</div>
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport bug workaround -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
\t <script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
\t $(document).ready(function() {
\t \t $(".fancybox").fancybox();
\t });
</script>
</body>
</html>
由於更換
rel="ligthbox"，我不知道我怎麼錯過了，當我從我的老收藏夾切換 – mlegg