Question

我有一个看起来像这样的PHP

<?php
echo "<html><head><meta charset='utf-8'>";
echo "<script type='text/javascript' src='scripts/bootstrap.js'></script>";
echo "<script type='text/javascript' src='scripts/jquery_latest.js'></script>";
echo "<link rel='stylesheet' type='text/css' href='css/style.css'>";
echo "<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>";
//echo "<script type='text/javascript' src='scripts/gallery.js'> - other gallery 
echo "<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>";
echo" <title>Gallery Display</title></head><body>";


echo "<div id ='wrapper'>";
echo "<header>";
echo "<h1>The Ultimate Gallery Compiler</h1>";
echo "<div id='menu'><a class='head' href='index.html'>Upload Photo</a>&nbsp;&nbsp;<a class='head' href='gallery.html'>Browse Gallery</a></div>";
echo "</header>";
echo "<div id='content'>";
echo "<h2>Browse Gallery</h2>";


$subfolder = $_POST["category"];
$text = $_POST["category_text"];

if ($subfolder == "0"){
    echo("Please <a href='gallery.html'>go back</a> and select a category");
    echo "</div><br><br>";
    echo "<footer>";
    echo "<p class='foot'>&copy; Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>"; 
    echo "</footer>";
    echo "</div>";
    exit();
}
$countcontents = file_get_contents("categories.txt"); //read file to get count
$countarray = explode('*', $countcontents); //get count of each category into an array

//get array using array_push  
$folders = glob('images/*');
$categories= array();
foreach($folders as $folder) {
    $folder = pathinfo($folder);    
    array_push($categories, $folder["filename"]);
}


//output title according to if the gallery has images in it or not
for($i=0; $i< count($countarray); $i++)
{
    if ($subfolder == $categories[$i]){
        if (intval($countarray[$i]) == 0) {
             echo "<h3>No images have been uploaded for the " .$text. " category yet</h3>";
        }
        else
        {
            echo "<h3>Here are the images for the " .$text. " category</h3>"; 
            echo "<p>There are ".$countarray[$i]." photos in this category</p><br>";
        }

    }
}

$folder = "images/".$subfolder."/";

// Open the appropriate subfolder, and display its contents.
if ($dir = opendir($folder)) {

    $images = array();
    while (false !== ($file = readdir($dir))) {
        if ($file != "." && $file != "..") {
            $images[] = $file; 
        }
    }
    closedir($dir);
}

$count=0;
$class= '';
echo'<div id="myCarousel" class="carousel slide">';
//  <!-- Carousel items -->
foreach($images as $image) {
    $count++;
     if ( $count == 1 ){ $class = 'active ';}
            else{ $class='';} 
    echo'<div class="carousel-inner">';
    echo"<div class='".$class."item'>";
    echo "<img src='".$folder.$image. "'</img></div>";
    echo '</div>';
}
//<!-- Carousel nav -->
echo'<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>';
echo'<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>';
echo '</div>';
echo '<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">&#8226;</a></li>
  <li><a href="#2">&#8226;</a></li>
  <li><a href="#3">&#8226;</a></li>
</ol>';

echo"<br><br>";

echo "<p>&nbsp</p><a href='gallery.html'>Reselect</a>";

echo "</div>";
echo "<footer>
<p class='foot'>&copy; Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p> 
</footer>";
echo "</div>";
echo "</body></html>";
?>

正如您所见，包括bootstrap（min）以及组合的css和jquery 11.3。 bootstrapgallery.js是我从fiddle

获取的函数

// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-linked-nav .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slide', function() {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

我正在测试here的链接。第一张图像显示但箭头或按钮都不起作用。我觉得我必须遗漏一些明显的东西，但代码和我的小提琴一样，所以我不明白！

帮助！谢谢:)和圣诞快乐hohoho

编辑：

这是我的来源：

<!doctype html>
<html><head><meta charset='utf-8'>

<script type='text/javascript' src='scripts/jquery_latest.js'></script>
<script type='text/javascript' src='scripts/bootstrap.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>
<!---echo "<script type='text/javascript' src='scripts/gallery.js'>-->
<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>
<title>Gallery Display</title></head><body>


<div id ='wrapper'>
<header>
<h1>The Ultimate Gallery Compiler</h1>
<div id='menu'><a class='head' href='index.html'>Upload Photo</a>&nbsp;&nbsp;<a class='head' href='gallery.html'>Browse Gallery</a></div>"</header>
<div id='content'>
<h2>Browse Gallery</h2>
<h3>Here are the images for the Fashion/Lifestyle category</h3><p>There are 9 photos in this category</p><br><div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class='active item'><img src='images/1/dress3_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/after_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/partydress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151219.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/shoesforwedding_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/pyjamas_20151215.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/interviewdress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151221.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/jacket_20151213.jpg'</img></div></div><a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a></div><ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">&#8226;</a></li>
  <li><a href="#2">&#8226;</a></li>
  <li><a href="#3">&#8226;</a></li>
</ol><br><br><p>&nbsp</p><a href='gallery.html'>Reselect</a></div><footer>
<p class='foot'>&copy; Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p> 
</footer></div></body></html>

Bootstrap导航无法在php中工作 - 箭头显示但没有动作

0 个答案: