Bootstrap Lightbox nicht aufspringen

Arbeite ich mit der demo für Bootstrap Lightbox, ich bin auch neu in web-Entwicklung.
Ich Schaffe es nicht, die lightbox funktioniert, wird das erste Bild in diesem Fall shell_small.jpg ist sichtbar, und es ist eindeutig ein link, aber wenn ich auf es die einzige nennenswerte änderung ist, dass die url geht aus http://127.0.0.1:52595/index.html zu http://127.0.0.1:52595/index.html#demoLightboxaber die Seite bleibt die gleiche. Kann mir jemand erklären, was Los ist oder nicht Los ist???

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.css">
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.js">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file://-->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
        <img src="shell_small.jpg" alt="Click to view the lightbox">
    </a>
    <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
        <div class='lightbox-content'>
            <img src="image.png">
            <div class="lightbox-caption"><p>Your caption here</p></div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
InformationsquelleAutor EasilyBaffled | 2013-12-09
  1. 2

    Das problem ist, Sie be-Lightbox jQuery-plugin vor. Setzen Sie jQuery im head oder den lightbox-code nach den jQuery-code. Zweitens laden Sie den lightbox-code mit einem stylesheet.

    Machen Sie es wie diese:

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.js"></script>
  </body>
</html>

    entfernen und 

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.js">

    vom Kopf.

    • Auch das waren gute Veränderungen, aber es sieht nicht aus wie es hat sich nichts geändert
    • Siehst du irgendwelche Fehlermeldungen in der Konsole?
    • Testen Sie diese Datei auf einem server? Wenn nicht, müssen Sie ändern //cdnjs.cloudflare.com/ajax/libs/bootst...zu http://cdnjs.cloudflare.com/ajax/libs/bootst...
    • fast hatte ich zu ändern 'js/bootstrap.min.js' zu 'cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/...' Es mir auch der Schatten, aber nicht Bild.
    • Die gute Nachricht ist das Bild und Schatten zeigen sich, die schlechte Nachricht ist, ich kann nicht ständig in der Nähe der Bild, und wenn ich die Schatten nicht Weg gehen, aber das ist ein problem für eine andere Frage. Danke für Sie Hilfe.
    • was hast du mit dem Bild zeigen, ich habe das gleiche Problem. Ich bekomme die Schatten, aber nicht das Bild.

    InformationsquelleAutor idmean
Schreibe einen Kommentar