• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bekomme Lightbox nicht zum laufen

M

Mini12321

Neues Mitglied
Hallo,

ich habe folgendes Problem, ich muss für mein Studium eine HTML/CSS3 Website schreiben und dies soll dann mein Portfolio sein. Wir haben verschiedene Wochenaufgaben die alle unterschiedlich viele Unteraufgaben besitzen. Ich habe nun Thumbnails erstellt und wollte mit Lightbox pro Wochenaufgabe eine gemeinsame Gallery erstellen damit man Vorwärts und Rückwärts blättern kann. Ich bekomme es einfach nicht zum laufen und hab schon alles mögliche probiert.

<link rel="stylesheet" href="style.css" type="text/css">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>
<script type="text/javascript" src="lightbox2-master/dist/js/lightbox.js"></script>

und dann mit den Images

<li>
<a href="player01.jpg" rel="lightbox" data-lightbox="image-1">
<img src="player01th.gif"alt="" width="250" height="250" class="gallery" >
<span class="pictext"><span>Aufgabe 1</span></span>
</a>
</li>

und diese Variante

<li>
<a class="example-image-link" href="player01.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
<img class="example-image" src="player01th.gif"alt="" width="250" height="250" class="gallery" >
<span class="pictext"><span>Aufgabe 1</span></span>

Die Bilder sind verlinkt weil beim klicken des Thumbnails wird ein neues Browser Fenster geöffnet aber nicht das Lightbox fenster.

Ich habe die Lightbox2-Master version benutzt

Danke schon einmal für die Hilfe und ich hoffe ich hab an alles gedacht

Lg Yasmin
 
Werbung:
http://lokeshdhakar.com/projects/lightbox2/ schrieb:
If you are not currently using jQuery, I've created a packaged file that includes both Lightbox and jQuery. Include dist/js/lightbox-plus-jquery.js instead of lightbox.js.
Zum Vergrößern anklicken....
Folglich ist die zweite Zeile mit lightbox.js obsolet:
HTML: 
<script type="text/javascript" src="lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>
<script type="text/javascript" src="lightbox2-master/dist/js/lightbox.js"></script>
 
Werbung:
Okay das hab ich dann schonmal erledigt, danke für den tip !
War aber leider nicht die Lösung für das Problem.
 
Die Pfade zur CSS- u. JS-Datei stimmen?

Ansonsten nach der vorgenommenen Korrektur den Browsercache leeren und die Seite neu laden, denn bei mir funktionieren beide Deiner gezeigten Varianten.
 
Nachtrag.

Habe den zweiten Fehler in Deinem Code entdeckt: lightbox-plus-jquery.js wird nicht im Dokumentheader, sondern am Dokumentende vor </body> aufgerufen.
 
Werbung:
Ah super dann geb ich das gleich mal da ein und siehe da es funktioniert .. und stand sogar in der Anleitung ! Vielen dank :)
 
Hallo ich bins nochmal .. Folgendes Problem nach der Lösung von Spicelab ging alles super aber wenn ich nun meine Seite öffne, zeigt er mir die Bilder wieder nur im Browser an und nicht in der Lightbox Version. Ich weiß echt nicht woran es liegen kann .. gestern ging es noch Perfekt als ich ins Bett gegangen bin und nun geht nichts mehr .. und in Dreamveaver in der Vorschau funktioniert es sogar :(

Soll ich sonst nochmal neu die js. dateien einbinden ?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel="stylesheet" type="text/css">


<title>Eigene Website</title>

</head>

<body>

    <div class="navi-space">

        <img src="logo.png" alt="" class="logo">
      
        <h1 class="sidebar-red"> Young Sprite Design </h1>
        <h1 class="sidebar"> by Yasmin Schultz </h1>
      
      
      
        <div class="navi-punkte">
             <a href="Startseite.html">Startseite</a> <br>
           <a href="Portfolio.html">Portfolio</a> <br>
           <a href="Blog.html">Blog</a> <br>
           <a href="">Über mich</a> <br>
           <a href="">Kontakt</a> <br>
           <a href="Dokumentation.html">Dokumentation</a> <br>

        </div>
      
</div>
  
  
    <div class="content">
  
        <div class="top-space">
      
      
            <img src="topBanner.JPG" alt"" width="1517" class="top-pic">
      
        </div>
          
        <div class="content-navigation">            
            <h2 style="color:white"> Navigation </h2>                        
            <a class="navigation"  href="#navi-01">01. Woche</a> <br>
            <a class="navigation"  href="#navi-02">02. Woche</a> <br>
            <a class="navigation"  href="#navi-03">03. Woche</a> <br>
            <a class="navigation"  href="#navi-04">04. Woche</a> <br>
            <a class="navigation"  href="#navi-05">05. Woche</a> <br>
            <a class="navigation"  href="#navi-06">06. Woche</a> <br>
          <a class="navigation"  href="#navi-07">07. Woche</a> <br>
          <a class="navigation"  href="#navi-08">08. Woche</a> <br>
          <a class="navigation"  href="#navi-09">09. Woche</a> <br>
          <a class="navigation"  href="#navi-10">10. Woche</a> <br>
          <a class="navigation"  href="#navi-11">11. Woche</a> <br>
          

      </div>
          
        <div class="content-text-space">
          <h1>Wochenaufgaben</h1>
          <div id="navi-01"></div>
          <h2 class="Aufgabe">01.Woche</h2>
          <ul class="img-list">
          
          
          
              <li>
              <a class="example-image-link" href="1/01.jpg"  data-lightbox="Aufgabe1" data-title="Yasmin Schultz Matnr.33567" >
              <img src="1/01th.jpg" alt="" width="250" height="250" class="gallery" >
                  <span class="pictext"><span> Bild 1 Gulli</span></span>
                </a>
              </li>
            
              <li>
                <a class="example-image-link" href="1/02.jpg" data-lightbox="Aufgabe1" data-title="Yasmin Schultz Matnr.33567">
              <img  src="1/02th.jpg" alt="" width="250" height="250" class="gallery" >
                  <span class="pictext"><span>Bild 2 Steg</span></span>
                </a>
              </li>
            
              <li>
              <a class="example-image-link" href="1/03.jpg" data-lightbox="Aufgabe1" data-title="Yasmin Schultz Matnr.33567">
              <img src="1/03th.jpg" alt="" width="250" height="250" class="gallery" >
                  <span class="pictext"><span>Bild 3 Treppen</span></span>
                </a>          
              </li>
            
            

      
<div>

   <script type="text/javascript" src="lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>

</div>
  </body>

</html>
 
Mini12321 schrieb:
wenn ich nun meine Seite öffne, zeigt er mir die Bilder wieder nur im Browser an und nicht in der Lightbox Version.
Zum Vergrößern anklicken....
Von welchem Browser sprichst Du?

Mit dem gezeigten Code kann ich es in keinem gängigen Browser (Win7) reproduzieren.

Und wozu das Script extra in <div></div>?!
http://lokeshdhakar.com/projects/lightbox2/ schrieb:
HTML: 
<!-- LIGHTBOX PLUS JQUERY -->
<script src="js/lightbox-plus-jquery.min.js"></script>
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Werbung:
Die div Container sind da nur weil der Code als ganzes zu lang war um ihn hochzuladen. hab die Pfade der Bilder raus genommen weil es alle die gleichen sind. Ich arbeite mit google Chrome. Die Css datei ist die Ursprüngliche und die Verzeichnisse der Lightbox habe ich auch nicht verändert.

Kann ich dir sonst die ganze Datei zur Verfügung stellen ?
 
Werbung:
Du bringst entgegen Deinem vorhin gezeigten Code plötzlich in Portfolio.html mit dem Pfad zur JS-Datei etwas durcheinander :D

Mein zitierter Code-Snippet aus der originalen Lightbox-Seite war für Dich nicht zur Übernahme bestimmt, sondern bezog sich auf das überflüssige <div></div> ;)

Mit korrektem Pfad keine negativen Auffälligkeiten - auch nicht in Google Chrome :cool:
 
Kann das vllt an meinem Internet liegen ? Das die Seite zu groß ist und die Bilder nicht schnell genug Laden ? Weil bei mir geht es einfach nicht ...
 
Spicelab schrieb:
online ein Live-Demo wäre eine runde Sache, um einfach sicher zu gehen :cool:
Zum Vergrößern anklicken....
Mini12321 schrieb:
Da ich leider nicht weiß wie das geht hab ich hier mal einen dropbox link für dich :)
Zum Vergrößern anklicken....
Mini12321 schrieb:
Kann das vllt an meinem Internet liegen ? Das die Seite zu groß ist und die Bilder nicht schnell genug Laden ? Weil bei mir geht es einfach nicht ...
Zum Vergrößern anklicken....
Wenn Du via Internetprovider die Seite anforderst, sollte sie im Normalfall zwangsläufig auch im Netz erreichbar sein o_O
 
Werbung:
Erreichbar ist sie bei mir ja auch .. aber das JS funktioniert nicht, da geht dann immer nur ein neuer Tab mit dem verlinkten Bild auf und normalerweise bekomm ich ja ein Popup Fenster.

Online stellen muss ich die Seite nämlich nicht ich muss sie nur in der Uni abgeben ..
 
Genau als Zip Archiv .. hab aber total angst das bei ihr auf dem Rechner dann irgendetwas nicht klappt :)

Achso ja doch da hast du recht da ist ein Link im Browser: file:///C:/Users/Yasmin/Desktop/Abgabe/Portfolio.html
 
Werbung:
Mini12321 schrieb:
Das die Seite zu groß ist und die Bilder nicht schnell genug Laden
Zum Vergrößern anklicken....
*hüstel* :D

Thumbnails mit denselben Dimensionen und Dateigrößen wie das Original sind nicht Dein Ernst? :eek:

Sorry, nur mit was für einer lahmen Kiste von Rechner arbeitest Du bei auffällig langen Ladezeiten?

Denn:
Mini12321 schrieb:
Achso ja doch da hast du recht da ist ein Link im Browser: file:///C:/Users/Yasmin/Desktop/Abgabe/Portfolio.html
Zum Vergrößern anklicken....
Für diesen lokalen Link braucht's kein Internet - dazu kann der Rechner auch vom Internet getrennt, neu-deutsch offline sein :D

Ein zu langsames Internet kann somit definitiv ausgeschlossen werden :cool:
 
Zuletzt bearbeitet:
Das änder ich grade schon, hab sie bei den ersten Aufgaben schon verkleinert .. am Anfang dachte ich es ginge auch so .. bis mir die Idee kam es könnte zu groß sein :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben