繁体   English   中英

Bootstrap照相馆灯箱模态很暗

Bootstrap photo gallery light box modal is dark

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在制作Bootstrap图片库,除单击缩略图外,其他所有内容都很好。 灯箱会出来,但像缩略图一样是黑暗的,我无法单击“下一个”和“上一个”按钮,因为每次我在灯箱中的任何位置单击时,它都会消失并返回照相馆。

我已经搜索了包括此在内的网络,但是发现的解决方案没有帮助。 这是我的html:

<html lang="en-US">
<head><title>D' Clean Look</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<!--Load Bootstrap css-->
 <linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css'>
<link rel="stylesheet" href="c:\website\css\stylesgallery.css" >
<link rel="stylesheet" href="c:\website\css\scrolling-nav.css">
<link rel="stylesheet" href="c:\website\css\styles.css" text="text/css">

<!-- Latest compiled JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"> </script>
<script src="file:///c:/dclean/js/jquery-1.11.2.min.js"></script>
<script src="file:///c:/dclean/js/photo-gallery.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<div class="container">    
    <div class="row intro-heading">
        <h1>
            Plate Holder
        </h1>
        <p>Click <strong><a style="color:red" href="c:\website\index.html#products">Here</a></strong> to go back to the main page.</p>
    </div>

    <ul class="row">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\honda-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\hyundai-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\mugen-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\nismo-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\nissan-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\spoon-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\spoon-h2.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\sport-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\sti-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\subaru-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\toms-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\trd-h.jpg">
        </li>

      </ul>             
</div> <!-- /container -->

<script src="file:///c:/dclean/js/bootstrap.min.js"></script>  
<script src="file:///c:/dclean/js/jquery.easing.min.js"></script>
<script src="file:///c:/dclean/js/scrolling-nav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
<script>new WOW().init();</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">         
      <div class="modal-body">                
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>

stylegallery CSS:

.intro-heading {
text-align:center; 
border-bottom:1px dashed #ccc;  
padding:0 0 20px 0;
margin-bottom:40px;
margin-top: 60px; 
}

.intro-heading h3 {
font-family:arial; 
font-weight:bold; 
font-size:30px;
}

ul {         
      padding:0 0 0 0;
      margin:0 0 0 0;
  }
  ul li {     
      list-style:none;
      margin-bottom:25px;           
  }
  ul li img {
      cursor: pointer;
  }
  .modal-body {
      padding:5px !important;
  }
  .modal-content {
      border-radius:0;
  }
  .modal-dialog img {
      text-align:center;
      margin:0 auto;
  }
.controls{          
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;          
}
.next {
    float:right;
    text-align:right;
}
  /*override modal for demo only*/
  .modal-dialog {
      max-width:500px;
      padding-top: 90px;
  }
  @media screen and (min-width: 768px){
      .modal-dialog {
          width:500px;
          padding-top: 90px;
      }          
  }
  @media screen and (max-width:1500px){
      #ads {
          display:none;
      }
  }

照相馆JS:

$(document).ready(function(){        
$('li img').on('click',function(){
    var src = $(this).attr('src');
    var img = '<img src="' + src + '" class="img-responsive"/>';

    //start of new code new code
    var index = $(this).parent('li').index();   

    var html = '';
    html += img;                
    html += '<div style="height:25px;clear:both;display:block;">';
    html += '<a class="controls next" href="'+ (index+2) + '">next &raquo;</a>';
    html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
    html += '</div>';

    $('#myModal').modal();
    $('#myModal').on('shown.bs.modal', function(){
        $('#myModal .modal-body').html(html);
        //new code

        $('a.controls').trigger('click');
    })
    $('#myModal').on('hidden.bs.modal', function(){
        $('#myModal .modal-body').html('');
    });




}); 
})


$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');             

$('.modal-body img').attr('src', src);

var newPrevIndex = parseInt(index) - 1; 
var newNextIndex = parseInt(newPrevIndex) + 2; 

if($(this).hasClass('previous')){               
    $(this).attr('href', newPrevIndex); 
    $('a.next').attr('href', newNextIndex);
}else{
    $(this).attr('href', newNextIndex); 
    $('a.previous').attr('href', newPrevIndex);
}

var total = $('ul.row li').length + 1; 
//hide next button
if(total === newNextIndex){
    $('a.next').hide();
}else{
    $('a.next').show()
}            
//hide previous button
if(newPrevIndex === 0){
    $('a.previous').hide();
}else{
    $('a.previous').show()
}


return false;
});

这些是我在网上找到的教程的基础上使用的。 我似乎无法弄清楚为什么灯箱无法正常工作。 注意:某些脚本不适用于该页面,但无论如何我还是将其保留在该页面上,我不知道这是否是一个问题。

问题暂未有回复.您可以查看右边的相关问题.
1 照相馆的意图

我有一个应用程序,在ImageButton上单击它会打开“图库”意图,您可以从中选择一些图片或使用“相机”意图拍摄另一张照片。 我的问题是:我做了一个我想使用的摄影机布局,而不是画廊意图的布局。 如何使用自定义布局而不是基本布局? 谢谢 ...

2 当地照相馆

是否可以通过Tabris从设备的图库中获取照片? 我知道不可能像半年前那样,也许现在有办法吗? 在tabris主页上找不到任何信息。 ...

3 访问相机和照相馆

在我的iOS应用中,我有一个ImageView和两个用于打开相机和照相馆的按钮。 当我单击按钮之一时,该应用程序将关闭。 (我正在设备上运行应用程序,而不是在模拟器上运行)我必须在代码中进行哪些更改? } ...

4 可以选择图片的照相馆

我将开发一个活动,该活动显示一个非常简单的照片库,其中照片文件是从给定目录中拍摄的。 该活动应允许用户选择一组图片,并返回代表所选图片文件名的字符串向量。 有什么建议吗? 我不希望从头开始开发它,然后发现已经有可以使用的现成组件。 ...

5 寻找第三方照相馆

有谁知道易于安装的照片库。 我假设它必须是闪存。 我想在自己的网站上实现它。 我正在寻找一个缩略图,当您单击缩略图时,它会展开,您可以浏览其他照片。 或类似的东西 我找到的要我提交mysql db密码并登录。 对此不满意。 提前致谢! ...

6 创建一个(简单的?)照相馆

我已经开始学习Swift,并为我们的网站创建了一个非常简单的应用-图片库,视频,webView。 我正在youtube上关注本教程: https : //www.youtube.com/watch?v=JbPc62YWhPQ,并结合了其他一些教程,以使相册具有不错的3列布局。 目前, ...

2016-09-30 13:02:18 0 547   ios/ swift
8 建立简单的照相馆,需要jQuery的建议

这是我对堆栈溢出的第一个问题。 我正在尝试为裸露的代码,个人照片项目的图库站点编写代码,而我对jquery还是陌生的。 站点已设置(垂直堆叠):标题,导航(按城市过滤缩略图),显示div(显示:在加载时隐藏),缩略图。 单击缩略图会在显示div中加载较大的图像以及图像数据(标题,日 ...

10 照相馆/相机仅显示在屏幕的一半,某些按钮无法触摸

当我在iPhone 4s,iPhone 6上运行游戏时遇到了这个问题,并且模拟器还可以。 由于只显示了照片库和照相机的一部分,因此我无法进行照片编辑或按确认和取消按钮。 发生此问题后,我无法正常停止游戏。 如果您遇到此问题或知道如何解决此问题,请帮我一个忙,这确实困扰了我很长时间,谢谢。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM