Javascript 引导模式照片库_Javascript_Html_Twitter Bootstrap_Photo Gallery

Javascript 引导模式照片库

javascript html twitter-bootstrap

Javascript 引导模式照片库,javascript,html,twitter-bootstrap,photo-gallery,Javascript,Html,Twitter Bootstrap,Photo Gallery,我不想承认这一点，但我复制了一些代码，但我无法让它正常工作。我有一些图像，我想在引导模式下显示，并能够滚动浏览它们。下面是我的html代码和javascript代码。我已经将jquery和引导程序正确地连接起来了 <div class="row"> <div class="col-md-2"></div> <div class="col-md-10"> <ul> <li class="cards

我不想承认这一点，但我复制了一些代码，但我无法让它正常工作。我有一些图像，我想在引导模式下显示，并能够滚动浏览它们。下面是我的html代码和javascript代码。我已经将jquery和引导程序正确地连接起来了

<div class="row">  
  <div class="col-md-2"></div>
  <div class="col-md-10">
    <ul>
        <li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
            <img class="img-responsive" src="img/gallery4.jpg">
        </li>
        <li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
            <img class="img-responsive" src="img/gallery5.jpg">
        </li>
        <li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
            <img class="img-responsive" src="img/gallery6.jpg">
        </li>
    </ul>
  </div>
</div>

    <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>
        </div>
    </div>

现在是javascript代码：

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

        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) + '">   <b>next</b> &raquo;</a>';
        html += '<a class="controls previous" href="' + (index) + '">&laquo; <b>prev</b></a>';
        html += '</div>';

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

        $('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;
});

$（文档）.ready（函数（）{
$（'li img'）。在（'click'，function（）上{
var src=$（this.attr（'src'）；
var img=“”；
var index=$（this.parent（'li'）.index（）；
var html=''；
html+=img；
html+=''；
html+=''；
html+=''；
html+=''；
$（'#myModal'）.modal（）；
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'#myModal.modal body'）.html（html）；
$（'a.controls'）。触发器（'click'）；
})
$（'#myModal'）.on（'hidden.bs.modal'，function（）{
$（'#myModal.modal body'）.html（''；
});
});  
})
$（文档）。在（'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）；
}否则{
$（this.attr（'href'，newNextIndex）；
$（'a.previous'）.attr（'href'，newpreviindex）；
}
var总计=$（'ul.row li'）。长度+1；
//隐藏下一步按钮
如果（总计===newNextIndex）{
$（'a.next'）.hide（）；
}否则{
$（'a.next'）.show（）
}            
//隐藏上一个按钮
如果（newPrevIndex==0）{
$（'a.previous'）.hide（）；
}否则{
$（'a.previous'）.show（）
}
返回false；
});


使用Modal的Bootstrap 3 Lightbox图像库


×
标题
接近
.modal对话框{宽度：600px；}
.缩略图{页边距底部：6px；}
$（文档）.ready（函数（）{
$（'.thumbnail'）。单击（函数（）{
$（'.modal body'）.empty（）；
var title=$（this.parent（'a'）.attr（“title”）；
$（'.modal title'）.html（title）；
$（$（this.parents（'div'）.html（））.appendTo（'.modal body'）；
$（'#myModal'）.modal（{show:true}）；
});
});


使用Modal的Bootstrap 3 Lightbox图像库


×
标题
接近
.modal对话框{宽度：600px；}
.缩略图{页边距底部：6px；}
$（文档）.ready（函数（）{
$（'.thumbnail'）。单击（函数（）{
$（'.modal body'）.empty（）；
var title=$（this.parent（'a'）.attr（“title”）；
$（'.modal title'）.html（title）；
$（$（this.parents（'div'）.html（））.appendTo（'.modal body'）；
$（'#myModal'）.modal（{show:true}）；
});
});

即使我复制了代码，我还是想知道它是如何工作的。为什么我没有工作？即使我复制了代码，我想知道它是如何工作的。为什么我所做的不起作用？

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <h1>Bootstrap 3 Lightbox image gallery using Modal</h1>

      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div>

    <hr>

    <hr>
  </div>
</div>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h3 class="modal-title">Heading</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>


<style>
.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}
</style>


<script>
$(document).ready(function() {
$('.thumbnail').click(function(){
      $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#myModal').modal({show:true});
});
});
</script>