Slideshow mit Javascript / Spaw Editor-Problem

[Gast]

Willkommen Gast. Bitte einloggen oder registrieren.

Einloggen mit Benutzername und Passwort

[breakdancer]

Moin Jungs und Mädels,

euch allen ein frohes Weihnachtsfest gehabt zu haben. 

Ich versuche derzeit, das noobSlide Tool unter Mootools auf meiner PMX Installation zum Laufen zu bekommen. Zum Anschauen das Ganze hier: http://www.efectorelativo.net/laboratory/noobSlide/


Dank diesem Beitrag http://www.pragmamx.org/Forum-topic-29645.html konnte ich das Ganze auch zum Laufen bekommen. Der Einbau des Samples 1 hat wunderbar funktioniert. Laufen soll aber bei mir das Sample 6, das ich nach oben genannter Anleitung wie folgt in einen HTML-Block eingebaut habe (die Bilder liegen der Einfachheit halber für diesen Test im js-Verzeichnis):

Code: [Select]  

<!-- SAMPLE 6 -->
<h2>Sample 6</h2>
<div class="sample sample6">
<div class="thumbs" id="handles6_1">
<div><img src="themes/mx-com/js/img1.jpg" alt="Photo Thumb" /></div>
<div><img src="themes/mx-com/js/img2.jpg" alt="Photo Thumb" /></div>
<div><img src="themes/mx-com/js/img3.jpg" alt="Photo Thumb" /></div>
<div><img src="themes/mx-com/js/img4.jpg" alt="Photo Thumb" /></div>

</div>
<div class="mask6">
<div id="box6">
<span><img src="themes/mx-com/js/img1.jpg" alt="Photo" /></span>
<span><img src="themes/mx-com/js/img2.jpg" alt="Photo" /></span>
<span><img src="themes/mx-com/js/img3.jpg" alt="Photo" /></span>
<span><img src="themes/mx-com/js/img4.jpg" alt="Photo" /></span>
<span><img src="themes/mx-com/js/img5.jpg" alt="Photo" /></span>
<span><img src="themes/mx-com/js/img6.jpg" alt="Photo" /></span>

<span><img src="themes/mx-com/js/img7.jpg" alt="Photo" /></span>
<span><img src="themes/mx-com/js/img8.jpg" alt="Photo" /></span>
</div>
<div class="info"></div>
</div>
<div class="thumbs" id="handles6_2">
<div><img src="themes/mx-com/js/img5.jpg" alt="Photo Thumb" /></div>
<div><img src="themes/mx-com/js/img6.jpg" alt="Photo Thumb" /></div>
<div><img src="themes/mx-com/js/img7.jpg" alt="Photo Thumb" /></div>

<div><img src="themes/mx-com/js/img8.jpg" alt="Photo Thumb" /></div>
</div>
</div>

Wenn ich mir den Block jetzt anschaue, sind zwar alle Bilder zu sehen, jedoch gibt es keinerlei Funktionalität - also kein Scrollen, kein Einblenden, nichts. Nur die Bilder ohne Frames. Und der Code sieht - wenn ich ihn mir im Editor wieder aufrufe - auch sehr zerhackt aus:

Code: [Select]  

<!-- SAMPLE 6 --> <h2>Sample 6</h2>
<div class="sample sample6">
  <div id="handles6_1" class="thumbs">
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img1.jpg" />
    </div>
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img2.jpg" />
    </div>
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img3.jpg" />
    </div>
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img4.jpg" />
    </div>
  </div>
  <div class="mask6">
    <div id="box6"> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img1.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img2.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img3.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img4.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img5.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img6.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img7.jpg" /></span> <span><img alt="Photo" src="/spaw/empty/themes/mx-com/js/img8.jpg" /></span>
    </div>
    <div class="info"></div>
  </div>
  <div id="handles6_2" class="thumbs">
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img5.jpg" />
    </div>
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img6.jpg" />
    </div>
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img7.jpg" />
    </div>
    <div><img alt="Photo Thumb" src="/spaw/empty/themes/mx-com/js/img8.jpg" />
    </div>
  </div>
</div>

Kann jemand helfen, wie ich diese Geschichte mit dem Spaw-Editor umgehen kann ?

Liebe Grüße

Markus

[breakdancer]

Ich schiebs mal hoch, vielleicht hat ja nach den Feiertagen jetzt jemand Lust, sich mit dem Thema zu befassen.

[breakdancer]

Scheinbar nicht.

Schade, kann dann geschlossen werden.

[breakdancer]

Nochmal ein kleiner Schubser nach oben.... Die Frage ist immer noch aktuell...

Merci.

Markus

[martin b]

Hallo Markus

Die Seite http://www.efectorelativo.net/laboratory/noobSlide/ ist tot. Auch die Links auf anderen Webseiten  zu noobSlide führen ins Leere. Das beste wird sein, wenn du nach einer anderen Software Ausschau hälst.

Gruß
martin b

[breakdancer]

öhem,

Martin...  ?

Bei mir is die Seite ganz lebendig - das Script wird auch noch gut supported... 

Klick nochma...

Liebe Grüße

Markus

[Baldyman]

Mahlzeit zusammen 
Also bei mir geht da auch nix 

[breakdancer]

Dös is witzisch jetzt... 

Habs mit dem Fuchs, dem IE und Opera getestet, alle mit sauberem Cache, die Seite rennt und ist online !

Zum Beweis - hier die ersten Textzeilen der Seite:

noobSlide es una ligera "clase" escrita con la librería mootools con la que se puede construir "slides" desde simples hasta complejos, claro que para sacarle el máximo provecho necesitas aprender cómo trabajar con mootools.

Joar, was nun ? ^^

[martin b]

Hi Markus

Ich hab noch eine Seite gefunden, auf der die einzelnen Beispiele laufen: http://www.rofaldez.com/ajax/efectorelativo/noobslide/

da kannst du dir ja mal den Quellcode mit Firebug ansehen. Eventuell hilft das ja weiter. Andere Frage ist, ob du Mootools auch richtig eingebunden hast. Denn der Slider setzt ja darauf auf.

Ich hab den Link in verschiedenen Browsern getestet, überall die gleiche Meldung: Server nicht zu finden.

Gruß
martin b

[martin b]

Hi Markus

Ich habe noch mal ein wenig im Netz gesucht und was gefunden. Demnach soll das hier in den moreheaders Bereich:

Code: [Select]  

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="mootools-1.2-core.js"></script>
<script type="text/javascript" src="_class.noobSlide.packed.js"></script>
<script type="text/javascript">
window.addEvent ('domready',function( ){
//SAMPLE 6 (on "mouseenter" walk)
var info6 = $('box6').getNext().set('opacity',0.5);
var nS6 = new noobSlide({
mode: 'vertical',
box: $('box6'),
items: sampleObjectItems,
size: 180,
handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
handle_event: 'mouseenter',
addButtons: {
previous: $('prev6'),
play: $('play6'),
stop: $('stop6'),
playback: $('playback6'),
next: $('next6')
},
button_event: 'click',
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Back.easeOut,
wait: false
},
onWalk: function(currentItem,currentHandle){
info6.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);
this.handles.set('opacity',0.3);
currentHandle.set('opacity',1);
}
});
</script>

Und das hier kommt in den body Bereich:

Code: [Select]  

<!-- SAMPLE 6 -->
<h2>Sample 6</h2>
<div class="sample sample6">
<div class="thumbs" id="handles6_1">
<div><img src="img1.jpg" alt="Photo Thumb" />
                <p><img src="img2.jpg" alt="Photo Thumb" />
                <p><img src="img3.jpg" alt="Photo Thumb" />
                <p><img src="img4.jpg" alt="Photo Thumb" /></div>
</div>
<div class="mask6">
<div id="box6">
<span><img src="img1.jpg" alt="Photo" /></span>
<span><img src="img2.jpg" alt="Photo" /></span>
<span><img src="img3.jpg" alt="Photo" /></span>
<span><img src="img4.jpg" alt="Photo" /></span>
<span><img src="img5.jpg" alt="Photo" /></span>
<span><img src="img6.jpg" alt="Photo" /></span>
<span><img src="img7.jpg" alt="Photo" /></span>
<span><img src="img8.jpg" alt="Photo" /></span>
</div>
</div>
<div class="thumbs" id="handles6_2">
<div><img src="img5.jpg" alt="Photo Thumb" />
                <p><img src="img6.jpg" alt="Photo Thumb" />
                <p><img src="img7.jpg" alt="Photo Thumb" />
                <p><img src="img8.jpg" alt="Photo Thumb" /></div>
</div>
<p class="buttons">
<span id="prev6">&lt;&lt; Previous</span>
<span id="playback6">&lt;Playback</span>
<span id="stop6">Stop</span>
<span id="play6">Play &gt;</span>
<span id="next6">Next &gt;&gt;</span>
</p>
</div>

Natürlich müssen die Pfade zu den CSS und JS Dateien angepaßt werden. Ebenso die Bildpfade.
Und das ist der Container, der an der Stelle eingebaut wird, wo das Ganze angezeigt werden soll:

Code: [Select]  

<div class="sample sample6">
<div class="thumbs" id="handles6_1">
<div><img src="img1.jpg" alt="Photo Thumb" />
                <p><img src="img2.jpg" alt="Photo Thumb" />
                <p><img src="img3.jpg" alt="Photo Thumb" />
                <p><img src="img4.jpg" alt="Photo Thumb" /></div>
</div>
<div class="mask6">
<div id="box6">
<span><img src="img1.jpg" alt="Photo" /></span>
<span><img src="img2.jpg" alt="Photo" /></span>
<span><img src="img3.jpg" alt="Photo" /></span>
<span><img src="img4.jpg" alt="Photo" /></span>
<span><img src="img5.jpg" alt="Photo" /></span>
<span><img src="img6.jpg" alt="Photo" /></span>
<span><img src="img7.jpg" alt="Photo" /></span>
<span><img src="img8.jpg" alt="Photo" /></span>
</div>
</div>
<div class="thumbs" id="handles6_2">
<div><img src="img5.jpg" alt="Photo Thumb" />
                <p><img src="img6.jpg" alt="Photo Thumb" />
                <p><img src="img7.jpg" alt="Photo Thumb" />
                <p><img src="img8.jpg" alt="Photo Thumb" /></div>
</div>
<p class="buttons">
<span id="prev6">&lt;&lt; Previous</span>
<span id="playback6">&lt;Playback</span>
<span id="stop6">Stop</span>
<span id="play6">Play &gt;</span>
<span id="next6">Next &gt;&gt;</span>
</p>
</div>

Ich hoffe, das es funktioniert, denn das ist nicht getestet.

Gruß
martin b