Slideshow mit Javascript / Spaw Editor-Problem

Begonnen von breakdancer, 29 Dezember 2009, 21:33:30

Vorheriges Thema - Nächstes Thema

0 Mitglieder und 1 Gast betrachten dieses Thema.

Drucken
Nach unten Seiten1
Benutzer-Aktionen

breakdancer

29 Dezember 2009, 21:33:30
Moin Jungs und Mädels,

euch allen ein frohes Weihnachtsfest gehabt zu haben.  :drinks:

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 Auswählen
<!-- 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 Auswählen
<!-- 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

#1
01 Januar 2010, 22:12:49
Ich schiebs mal hoch, vielleicht hat ja nach den Feiertagen jetzt jemand Lust, sich mit dem Thema zu befassen.

breakdancer

#2
04 Januar 2010, 10:55:42
Scheinbar nicht.

Schade, kann dann geschlossen werden.

breakdancer

#3
08 März 2010, 19:48:50
Nochmal ein kleiner Schubser nach oben.... Die Frage ist immer noch aktuell...

Merci.

Markus

martin b

#4
09 März 2010, 11:56:30
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

#5
09 März 2010, 13:10:29
öhem,

Martin...  ? :BD: :BD:

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

Klick nochma...

Liebe Grüße

Markus

Baldyman

#6
09 März 2010, 13:20:40
Mahlzeit zusammen  :bye:
Also bei mir geht da auch nix  :gruebel:

breakdancer

#7
09 März 2010, 13:31:11
Dös is witzisch jetzt...  :gruebel:

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

#8
09 März 2010, 13:47:52
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

#9
09 März 2010, 16:21:09
Hi Markus

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

Code Auswählen
<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 Auswählen
<!-- 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 Auswählen
<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
Drucken
Nach oben Seiten1
Benutzer-Aktionen