引导图像模式弹出jquery php
bootstrap image modal popup jquery php
我正在构建一个模态显示从我的图像旋转木马。但是它不起作用——弹出窗口出来了,但是没有图像。我需要帮助,看看我的代码在这里有什么问题。它根本没有显示任何图像,甚至我也不知道是什么引起的。我想要实现的是,弹出图像点击产品菜单。
图片位于一个视图中,该视图将调用modal:
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$banyak = 0;
$id = $results->id;
$barangNama = $results->nama;
$barangHarga1 = $results->harga;
$barangGambar = $results->gambar;
$barangMerk = $results->merk;
$barangCategory = $results->category;
$barangTipe = $results->tipe;
$barangDeskripsi = $results->deskripsi;
$barangHarga = number_format($barangHarga1);
$newGambar = explode(',',$barangGambar);
//print_r($newGambar);
?>
<?php
$w = 0;
for($i = 0; $i < count($newGambar); $i++) {
if($w % 4 == 0){
$banyak++;
}
$w++;
//echo $banyak;
?>
<div class="item <?php if($i == 0){echo "active";} ?>" data-thumb="<?php echo $banyak-1; ?>">
/* this is where i call the modal */ <a href="#" data-toggle="modal" data-target="#image-gallery">
<img src="<?php echo base_url(); ?>assets/images/product_picture/<?php echo $newGambar[$i]; ?>" alt="asda">
</a>
</div>
<?php
}
?>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
显示弹出图像的模式:
<!-- Modal -->
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
脚本:
$(document).ready(function(){
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current){
$('#show-previous-image, #show-next-image').show();
if(counter_max == counter_current){
$('#show-next-image').hide();
} else if (counter_current == 1){
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function(){
if($(this).attr('id') == 'show-previous-image'){
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
});
}
});
你猜你已经注释掉了输出?
<?php
$w = 0;
for ($i = 0; $i < count($newGambar); $i++) {
if ($w % 4 == 0){
$banyak++;
}
$w++;
echo $banyak;
?>
这是因为z-index值。检查网页。检查旋转木马的z指数。大多数开发人员在他们的代码中使用-9999px和9999px值或类似的值。
调整z-index值,使模态框和它的容器位于carousel的顶部。
bootstrap .css
相关文章:
- Javascript/Jquery/PHP加载页面-如何
- 基于文本jquery php更改按钮
- 如何在ajax请求期间显示进度条(jquery.php)
- 验证此图像验证码.Jquery PHP & javascript.
- long polling - jquery + php
- jQuery/PHP-POST-Forbidden(403)当试图在我的JSON数据中发送完整的URL时
- JQuery/PHP对只读表单字段做简单的划分
- 使用jquery-php跟踪跟踪点击
- jQuery+php如何在数据对象中返回多个值
- JScript 中的 NodeJS + JQuery php 变量
- 我们如何在jQuery/php/mySQL中显示最近的通知
- 提交多个输入字段 jQuery/PHP 的最佳方式
- JQuery + PHP - PHP 不返回任何内容
- JQUERY + PHP + AJAX 不起作用
- 为什么我不能从jQuery(PHP)接收数据
- 带有jQuery + PHP的Ajax不起作用
- jQuery + PHP HighChart未正确更新
- 第一次点击失败,第二次点击在 Ajax 调用 • JQuery / PHP 上成功
- Jquery + PHP - AJAX onclick favorite/unfavorite
- 使用 JavaScript/jquery/PHP 构建一个动态网站,并将 HTML 存储在 MySQL 中