1

我已按照设定的说明进行操作，一切工作几乎完美，但画廊控件显示不正确。上一个和下一个按钮的尖括号位置不正确。

我一直在寻找 CSS 冲突但找不到任何冲突，我尝试删除除 blueimp-gallery.min.css 之外的所有 CSS。

我可以使用错误的字符吗？< 和 >

我的 HTML 和屏幕截图如下。

谢谢

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/blueimp-gallery.min.css">    
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/sticky-footer.css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div id="wrap">
  <div class="container">
    <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><img src="logo.png" alt="aka knits logo" class="logo"/></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="index.html">home</a></li>
          <li><a href="about.html">about</a></li>
          <li class="active"><a href="gallery.html">gallery</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>

        <ul class="nav navbar-nav pull-right nav-pills">
          <!-- http://fortawesome.github.io/Font-Awesome/icons/#brand -->
          <li><a href="#"><i class="icon-envelope icon-1x"></i></a></li>
          <li><a href="#"><i class="icon-facebook icon-1x"></i></a></li>
          <li><a href="#"><i class="icon-twitter icon-1x"></i></a></li>
          <li><a href="#"><i class="icon-linkedin icon-1x"></i></a></li>
          <li><a href="#"><i class="icon-google-plus icon-1x"></i></a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

    <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev"><</a>
        <a class="next">></a>
        <a class="close">x</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>

    <div id="links">
        <a href="img/gallery/banana.jpg" title="Banana">
            <img src="img/gallery/thumbnails/banana.jpg" alt="Banana">
        </a>
        <a href="img/gallery/apple.jpg" title="Apple">
            <img src="img/gallery/thumbnails/apple.jpg" alt="Apple">
        </a>
        <a href="img/gallery/orange.jpg" title="Orange">
            <img src="img/gallery/thumbnails/orange.jpg" alt="Orange">
        </a>
    </div>

  </div>
</div>

<div id="footer">
  <div class="container">
    <p class="text-muted credit">Footer goes here with a  <a href="#">Link</a> if required</p>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/blueimp-gallery.min.js"></script>
<script>
  document.getElementById('links').onclick = function (event) {
      event = event || window.event;
      var target = event.target || event.srcElement,
          link = target.src ? target.parentNode : target,
          options = {index: link, event: event},
          links = this.getElementsByTagName('a');
      blueimp.Gallery(links, options);
  };
</script>

在此处输入图像描述

4

1 回答 1

3

是的，您使用了错误的字符。请参阅：https ://github.com/blueimp/Gallery#controls ，因为您看到的标志要小一些。

您将不得不使用：

关闭：&times

下一个：&rsaquo;

以前的：&lsaquo;

于 2013-09-07T18:25:26.393 回答