我将 fancybox 与我在 Bootstrap 3 中设计的网站一起使用。缩略图的 GridView 有效，但是当您单击缩略图时，它只会打开更大的图像，它不会将它们设置为从一个到一个的 slider 下一个。这是 page I have it live on .
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>
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>最佳答案
Fancybox v3 使用data-fancybox 属性进行分组。
因此，例如，将 rel="ligthbox" 替换为 data-fancybox="images"
关于html - Fancybox slider 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43749806/