✔ SmoothGallery und Mootools

[Frosty5o]

Hallo Leute,

ich hab da mal eine Frage und zwar möchte ich die SmoothGallery auf meine Homepage integrieren (http://smoothgallery.jondesign.net/download/) Nun lese ich immer das Mootools oder JQuery usw benötigt wird. In diesem Fall Mootools. Nur verstehe ich nicht genau, wieso diese "Datenbanken" benötigt werden, bzw wie man sie installiert, dass sowas wie die SmoothGallery dann funktioniert.

Habe schon einige zeit gegoogelt hab aber keine passende Erklärung/Tutorial gefunden. Kann mich vielleicht jemand von euch über Mootools aufklären und mir sage wie ich das installiere und ob ich es überhaupt so einfach installieren kann. Danke!

 

[Maik]

Hi,

http://github.com/jon1012/smoothgallery/zipball/master - und der Spaß kann direkt beginnen

mfg Maik

 

[Frosty5o]

Hab die Dateien geuppt,
das:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/jd.gallery.set.js" type="text/javascript"></script>

in den header eingefügt.

Das hier zum einbinden der Bilder unter den content:

   <div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Brugges 2006</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="http://www.tutorials.de/forum/images/brugges2006/1.jpg" class="full" />
      <img src="http://www.tutorials.de/forum/images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="http://www.tutorials.de/forum/images/brugges2006/2.jpg" class="full" />
      <img src="http://www.tutorials.de/forum/images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
  </div>
  <div id="gallery2" class="galleryElement">
    <h2>Stock Photos</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="http://www.tutorials.de/forum/images/stock/77196_6784.jpg" class="full" alt="Item 1 Title">
      <img src="http://www.tutorials.de/forum/images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title">
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="http://www.tutorials.de/forum/images/stock/165392_5486.jpg" class="full" alt="Item 2 Title">
      <img src="http://www.tutorials.de/forum/images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title">
    </div>
  </div>
</div>

und das zum starten des scripts darunter:

<script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);
</script>

funktioniert aber nicht, but why?

Sieht folgendermaßen aus:
http://frosty5o.kilu.de/

 

[Maik]

Vermutlich kollidieren da die beiden genutzten JS-Frameworks "prototype" (für Lightbox) und "mootools".

mfg Maik

 

[Frosty5o]

Dacht ich auch schon, habs auch jetz ma rausgenommen. Funktioniert aber auch nicht....

 

[Maik]

Dacht ich auch schon, habs auch jetz ma rausgenommen. Funktioniert aber auch nicht....

Kannst du das mal in der verlinkten Seite aktualisieren? Dort ist nämlich im Dokumentheader noch alles beim Alten.

mfg Maik

 

[Maik]

Ich häng dir hier mal meinen Probelauf an (basierend auf http://github.com/jon1012/smoothgallery/zipball/master).

Fazit: In Verbindung mit dem Lightbox-Script im Dokumentheader funktioniert die Galerie nicht, ohne jedoch tadellos.

Wenn du beides in der Seite nutzen möchtest, solltest du auf JonDesign's Smooth Gallery 1.2-namespaced in Zip Format zurückgreifen.

Using prototype, jquery or another incompatible framework ?

Download JonDesign's Smooth Gallery 1.2-namespaced in Zip Format

mfg Maik

 

[Frosty5o]

Hmm komisch. Habs jetzt mit namespaced probiert und funktioniert nicht und ohne lightbox mit mootools wie in deinem Test und funktioniert bei mir auch nicht, obwohls ja in deinem Test funktioniert?! was mache ich falsch?

Hab jetzt momentan mit mootools drin.

 

[Maik]

was mache ich falsch?

Auf jeden Fall muß das "Set" da weg

<script type="text/javascript">
        function startGallery() {
                 var myGallery = new gallery($('myGallery'), {
                     timed: true
                 });
        }
        window.addEvent('domready',startGallery);
</script>


   <div id="myGallerySet">

mfg Maik

 

[Frosty5o]

Da sieht man den Wald vor lauter Bäumen nicht! Hat funktioniert, danke.

Jetz muss ich nurnoch das mit Lightbox hinbekommen, werds wohl dann mit dem namespaced nochmal versuchen!