Элементы управления не отображаются должным образом

Я следил за инструкциями по набору & Все работает почти идеально, но элементы управления галереей отображаются неправильно. Угловые скобки для предыдущих & следующих кнопок расположены неправильно.Элементы управления не отображаются должным образом

Я искал конфликты CSS, но не смог найти, я попытался удалить все css, кроме blueimp-gallery.min.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>

enter image description here

источник

2013-09-07 Holly

Да, вы используете неправильные символы. См.: https://github.com/blueimp/Gallery#controls, как вы видите, знак немного меньше.

Вы должны будете использовать:

близко: &times

следующие: &rsaquo;

предыдущие: &lsaquo;

источник

2013-09-07 18:25:26

Спасибо Басс, который работал отлично. Я попытался скопировать и вставить из https://github.com/blueimp/Gallery#controls, который не работал, но ваши объекты charcter выше сделали трюк, спасибо :) – Holly

Элементы управления не отображаются должным образом

ответ

Смежные вопросы