Lightbox, bzw. Slimbox

projectxlevel · 23 Januar 2011

Hallo allerseits,
ich weiss nicht, ob ich hier richtig bin, aber ich hoffe es doch...
Ich habe versucht in meine Webseite eine Galerie einzubinden doch irgendwie funktioniert es nicht...

Mein Problem ist ganz einfach:

Es funktioniert nicht...

Alles wurde richtig verlinkt, die Ordner mit den Daten sind auch richtig, ect....

Kurzum, ich finde meinen Fehler nicht!

Zum Test hab ich mal die index, die mitgeliefert wurde auch auf meinen Webspace hochgeladen und hier funktioniert es!

Wo es aber nicht funktioniert ist einmal das Portfolio, was ich mal testweise mit Testbildern hochgeladen hab und einem Tutorial...

Wie gesagt, die Verlinkungen hab ich 3 mal überprüft, die stimmen alle!
Ordnerstruktur:

Uploaded with ImageShack.us

In dem Ordnern css sind die ganzen CSS Dokumente drin, also diejenigen, die auch von der Slimbox benötigt werden.
Und im Ordner js sind die benötigten js Dokumente drin.
Auch die, die für die Navi benötigt werden sind dort drin und die geht ja interessanterweise...

Die Seite mit dem Tutorial befindet sich im Ordner "Foto" und das HTML-File für das Portfolio ist im Hauptordner HTML, genauso wie die von der Slimbox mitgelieferten index!

Hier mal der Code von der Tutorial-Seite:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Blumen und Rauch|Cross Media|ProjectXlevel</title>

<link type="text/css" href="../../css/css.css" rel="stylesheet" media="screen" />
<link type="text/css" href="../../css/css_x.css" rel="stylesheet" media="screen" />

        <link rel="stylesheet" type="text/css" href="../../css/superfish.css" media="screen" />
        
        <link rel="stylesheet" href="../../css/slimbox.css" type="text/css" media="screen" />
        
        <script type="text/javascript" src="../../js/mootools.js"></script>
        <script type="text/javascript" src="../../js/slimbox.js"></script>
        
        <script type="text/javascript" src="../../js/jquery-1.2.6.min.js"></script>
        <script type="text/javascript" src="../../js/hoverIntent.js"></script>
        <script type="text/javascript" src="../../js/superfish.js"></script>
        
        <script type="text/javascript">

        // initialise plugins
        jQuery(function(){
            jQuery('ul.sf-menu').superfish();
        });

        </script>
</head>

<body>
<div id="container">
<div id="logo">
  </div>
        <div id="banner">
        <div id="social">
        
          </div>

</div>
            <div id="navi">
            <ul class="sf-menu">
            <li class="current">
                <a href="/index.html">//Startseite</a>
            </li>
            <li>
                <a href="/ueber_mich.html">//&Uuml;ber Mich</a>
        </li>
            <li>
                <a href="/tutorials.html">//Tutorials</a>
          </li>
            <li>
                <a href="/portfolio.html">//Portfolio</a>
              <ul>
                        <li><a href="/portfolio/menschen.html">//Menschen</a></li>
                        <li><a href="/portfolio/architektur.html">//Architektur</a></li>
                        <li><a href="/portfolio/technik.html">//Technik</a></li>
                        <li><a href="/portfolio/natur.html">//Natur</a></li>
                        <li><a href="/portfolio/panorama.html">//Panorama</a></li>
                        <li><a href="/portfolio/Party.html">//Party</a></li>
                        <li><a href="/portfolio/3D.html">//3D</a></li>
              </ul>
</li>
            <li>
                <a href="/kontakt.html">//Kontakt</a>
            </li>    
        </ul>
            </div>
                <div id="content">
                <br>
                <br>
                <br>
                <br>
                 
                                        <center><h1><u>Blumen und Rauch</u></h1></center>
                                        
                                          <br>
                                            <center><strong>Mit einfachen Mitteln effektvolle Fotos einfangen</strong></center>
                                            <br>
                                            <br>
                                            <!--foto aus flickr einfügen-->
                                            <blockquote>
                                            Um solche Fotos zu machen, ben&ouml;tigt es keine s&uuml;ndhaft teure Studioausstattung. Es reichen schon Materialien, die wir alle zuhause haben, oder für kleines<br>
                                            Geld in jedem Baumarkt oder Schreibwarenladen bekommt<br>
                                            Ich zeige euch in diesem Tutorial was ihr ben&ouml;tigt und wie ihr vorgeht.<br>
                                        </blockquote><br>
                                        <br>
                                        <u>Was braucht ihr?</u>
                                  <ul>
                                            <li>Kamera mit Zoomobjektiv (Ich habe mit dem Sigma 55-200 gearbeitet)</li>
                                            <li>Stativ</li>
                                            <li>Blitz und Tischlampe mit Gelenken</li>
                                            <li>Schwarzes Papier</li>
                                            <li>F&uuml;r Rauch R&auml;cherst&auml;bchen</li>
                                            <li>F&uuml;r Blumen, nat&uuml;rlich Blumen</li>
                  </ul>
                                        <br>
                                        <br>
                                        <br>
                                        Das Setup sieht wie Folgt aus:<br>
                                         <a href="Bilder/LightingSetup_rauch_blumen.png" rel="lightbox" title="Aufbau"><img src="Bilder/thumb_LightingSetup_rauch.png" width="184" height="195" alt="aufbau" /></a>
                                         
              </div>
    <div id="footer">
    <table>
  <tr>
    <td width="86" height="30">&nbsp;</td>
    <td width="252">&nbsp;</td>
    <td width="253">&nbsp;</td>
  </tr>
  <tr>
    <td height="20">&nbsp;</td>
    <td height="20">&copy; 2011</td>
    <td><strong><a href="/impressum.html">//Impressum</a></strong></td>
    <td width="247">info (at) projectxlevel (punkt) de</td>
    <td width="338">webmaster (at) projectxlevel (punkt) de</td>
  </tr>
</table>

    </div>
</div>

</body>
</html>

Ich finde den verdammten Fehler einfach nicht!:motz:

Hab auch Lightbox 2 und PrettyPhoto ausprobiert, aber nichts funktioniert...

Hoffentlich kann mir da jemand weiterhelfen, ich bin mit meinem Latein am Ende!
Danke schonmal!!!

threadi · 23 Januar 2011

In der JavaScript-Konsole taucht folgender Fehler auf:

Code:

Fehler: $.element is not a function
Quelldatei: http://projectxlevel.de/js/mootools.js
Zeile: 3

Und soweit ich sehe verwendest Du mooTools, jQuery und anderes zusammen. Dabei muss man vorsichtig sein, da die sich mit den Variablen in die Quere kommen. Und das ist vermutlich auch dein Problem. Wenn Du mal alles raus nimmst und nur die Lightbox drinne lässt, dann sollte diese gehen. Wenn Du alles zusammen verwenden willst, schau dich mal nach Tipps um die man mooTools und jQuery zusammen betreiben kann (Anleitungen für solche Fälle gibt es genug).

projectxlevel · 23 Januar 2011

Hallo!
Danke für's schnelle Antworten!
Das wäre wohl für mich Laien erst mal der "SuperGAU"!

Ich hab auch Lightbox2, bzw. PrettyPhoto probiert und beide funtkionieren, obwohl sie anstatt mooTools jQuery benutzen auch nicht...

Allerdings hab ich im Ordner js die "jquery-1.2.6.min.js", "jquery-1.3.2.min.js" und die "jquery-1.4.4.min.js".
Von meiner Navi wird die 1.2.6. benötigt und von PrettyPhoto die 1.4.4. Theoretisch könnte ich dann die Navi auf die 1.4.4. umleiten und dann sollte die PrettyPhoto Galerie funktionieren, oder hab ich da ein Denkfehler?

threadi · 23 Januar 2011

Denkfehler. Es geht darum, dass Du diese Scripts im header einbindest und sie beim Aufrufen der Seite gestartet werden. Dabei entsteht das Problem. Nicht bei irgendwelchen Inhalten der Seite.

projectxlevel · 23 Januar 2011

Ja klar.
Ich meinte nur, dass ich aus

Code:

<head>
...
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
...
</head>

das hier mache:

Code:

<head>
...
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
...
</head>

Somit greifen meine NAVI und die, dann verwendete PrettyPhoto auf nur eine Datei zu und müssten sich ja nicht mehr in die Quere kommen...!
Die mooTools würde ich ja dann nicht mehr bei verwendung oben genannter Galerie benötigen.
Oder wieder Denkfehler?

Alternativ:
Almighty G**gle hat mir nicht's brauchbares ausgespuckt, zum Thema mooTools und jQuery zusammen betreiben... Wo finde ich da was? :(

threadi · 23 Januar 2011

Wenn ich nur mal nach den beiden Namen suche

mootols jquery - Google-Suche

finde ich z.B.

Verträglichkeit jquery mit mootools
Using jQuery and MooTools Together

Mit letzterem sollte es schon sehr deutlich sein wie es doch klappt.

projectxlevel · 24 Januar 2011

Vielen Dank!

Edit:
War super einfach:
Im Header von

Code:

<script type="text/javascript" src="../../js/mootools.js"></script>
<script type="text/javascript" src="../../js/jquery-1.2.6.min.js"></script>

auf

Code:

<script type="text/javascript" src="../../js/jquery-1.2.6.min.js"></script>        
<script type="text/javascript" src="../../js/mootools.js"></script>

ändern und

Code:

<script type="text/javascript">

		// initialise plugins
    $.noConflict();
        jQuery(function($){
            $('ul.sf-menu').superfish();
        });

</script>

einfügen!

Vielen Dank nochmal!

Lightbox, bzw. Slimbox

projectxlevel

Neues Mitglied

threadi

Moderator

projectxlevel

Neues Mitglied

threadi

Moderator

projectxlevel

Neues Mitglied

threadi

Moderator

projectxlevel

Neues Mitglied

Neueste Beiträge