2015-06-10 106 views
0

我正在構建一個模式來顯示從我的圖像旋轉木馬。但它不起作用 - 彈出來,但沒有圖像。我需要幫助,看看我的代碼在這裏有什麼問題。它根本不顯示任何圖像,即使我不知道是什麼原因造成的。我想要實現的是彈出點擊產品菜單的圖像。bootstrap圖像模態彈出式jquery php

的圖像是在將調用模式的一個觀點:

<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)); 
    }); 
    } 
}); 

回答

0

猜你有評論輸出?

<?php 
    $w = 0; 
    for ($i = 0; $i < count($newGambar); $i++) { 
    if ($w % 4 == 0){ 
    $banyak++; 
    } 
    $w++; 
    echo $banyak; 
?> 
0

這是因爲z-index的value.inspect網絡page.heck的carousel.Most開發商的z-index把-9999px和9999px值或在他們的代碼相似。

調整您的z-index值,以便模態框和它的容器位於輪播之上。

bootstrap modal css is bootstrap.css