Coin Slider Einbau

[rollerfahrer]

Hallo,

habe gerade das super tolle TuT vom Einbau des jquery Coin Sliders in Nof gefunden.
http://www.*nicht unterstützter Link*/netobjects-tutorials/coin-slider-in-nof/index.html

Doch irgendwie will er trotzdem nicht so richtig.

Habe genau wie im Beispiel 5 Fotos in das entsprechende Verzeichnis geladen und auch die 3 Dateien.

Nach dem publizieren werden lediglich alle 5 Fotos untereinander angezeigt und nicht ein Foto, welche durch sliden zum nächsten gelangt.

Kann es sein das das script zum .js file nicht gefunden wird? habe aber alles mögliche probiert.  Der ordener indem die Files liegen lautet : /html/ordner1/assets/jquery-1.4.2.js

im Script habe ich das folgende Pfadangabe gemacht:
<script type="text/javascript" src="../jquery-1.4.2.js"></script>

Habe ich etwas falsch gemacht?

LG

[Dada]

Du musst den relativen Pfad zum Script anpassen.

In deinem Beispiel liegt wohl die Seite im Verzeichniss html
Dein Script unter /html/ordner1/assets/

Der relative Pfad wäre dann ./ordner1/assets/Deine.Js

[rollerfahrer]

Danke,

aber irgendwie krieg ich das nicht auf die Reihe...habe es jetzt genau so gemacht wie du es beschrieben hast....immer noch alle 5 Fotos untereinander auf einer seite.

Das hier ist zwischen den Head Tags:

<script type="text/javascript" src="./ordner1/assets/jquery-1.4.2.js"></script>
<script type="text/javascript" src="./ordner1/assets/coin-slider.min.js"></script>
<link rel="stylesheet" href="./ordner1/assets/coin-slider-styles.css" type="text/css">

und das am ende des haupttext:

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 501, height: 250, navigation: true, opacity: 0.5, delay: 5000 });
});
</script>

Das habe ich im Textfeld (Text html) auf der Seite eingefügt:

<div id='coin-slider'>
    <a href="https://www.nof-community.de" target="_blank">
        <img src='../assets/images/1.jpg' alt=”Image Title” >
        <span>
            Image title
        </span>
    [/url]

    <a href="https://www.nof-community.de" target="_blank">
        <img src='../assets/images/2.jpg' alt=”Image Title”>
        <span>
            Image title
        </span>
    [/url]

    <a href="https://www.nof-community.de" target="_blank">
        <img src='../assets/images/3.jpg' alt=”Image Title”>
        <span>
            Image title
        </span>
    [/url]

     
    <a href="https://www.nof-community.de" target="_blank">
        <img src='../assets/images/4.jpg' alt=”Image Title” >
        <span>
            Image title
        </span>
    [/url]

    <a href="https://www.nof-community.de" target="_blank">
        <img src='../assets/images/5.jpg' alt=”Image Title”>
        <span>
            Image title
        </span>
    [/url]

</div>
<!--


<p style="margin-bottom: 0px;">&nbsp;</p>
 
-->

Komisch finde ich ist, das er die Fotos findet, das Script aber anscheinend nicht?!?



***edit***nettesekel***Links geändert***

[Dada]

Sind die Scripts auch wirklich im Verzeichnis assets und nicht wo anders?
Und was für eine NOF-Version nutzt du ab der 11er wird eine jquery.js mit publiziert, die ist aber auf älterm Stand und kommt manchmal mit neueren Versionen ins Gehege.

[nettesekel]

Die Scripts liegen richtig und werden gefunden. Ich tippe dann mal auch eher auf die jquery.js
Um das zu testen, lösche auf dem Server im Rootverzeichnis die jquery.js aktualisiere einmal die Seite (Browser) und schau ob es dann funktioniert.

[rollerfahrer]

Also habe nochmal ganz genau nachgeschaut. Die Dateien liegen wirklich im Ordner html/ordner1/assets/jquery.js etc...

Die Fotos: html/ordner1/assets/images/1.jpg etc...


Es befand sich tatsächlich eine jquer.js im Rootverzeichnis, welche ich sofort gelöscht habe. Leider immer noch kein Erfolg nach aktualisierung 

[nettesekel]

Du solltest ja auch nur diese eine Datei löschen. Du hast nun aber die anderen Script-Dateien auch gelöscht, oder verschoben... die lagen bis ebend noch am richtigen Platz. Also alles so lassen, wie es gerade noch war, nur die eine Datei im Root löschen und dann testen.

[rollerfahrer]

Ha, Problem gelöst 

Hallo
 
der Coinslider und NOF12 macht bezüglich der js-Dateien, speziell bei der coin-slider.min.js ein Problem. Die Datei wird "zu früh" geladen und somit von der NOF-internen jquery.js überschrieben.
 Fazit: der Slider funktioniert nicht mehr.
 
Abhilfe:
 


Code:
 

<script type="text/javascript" src="./assets/coin-slider.min.js"></script>
 diesen Code nicht in den Head eintragen.
 
Die Datei coin-slider.min.js direkt ins NOF "schieben.
 Das geht folgendermaßen:
 
mit F9 rechts in der Box "Layout-Eigenschaften" auf den 3. Reiter (Reihenfolge beim Scriptimport) die jquery.js(Intern) anklicken und auf das +Zeichen klicken.
 
In der Auswahlbox nun die coin-slider.min.js suchen, anklicken und Öffnen (das Beste wäre, Ihr kopiert diese Datei vorher in Euren Assets-Ordner, dann findet man sie immer wieder).
 
Nächste Box mit den Voreinstellungen so lassen
 Client-Seite
 Typ text/javascript
 Seitenspezifisch
 und ok klicken.
 
Jetzt steht die coin-slider.min.js in der richtigen Reihenfolge "hinter" der jquery.js (Intern) und so muss das dann auch sein.
 
Die Datei wird nun immer von NOF automatisch in den Ordner assets kopiert.
 
Gruß

Daaaaanke

[nettesekel]

Das läuft im Prinzip auf das selbe hinaus wie wir es auch gerade vermutet haben... gut dass nun alles läuft! 

[rollerfahrer]

Prima, Vielen Dank!!!

Nun habe ich noch eine Frage:

Ist es auch möglich den Slide-Effekt zu ändern...das er wirklich auch slidet...also das das Foto von rechts nach links durch rutscht?

Danke

[Dada]

Der >Coinslider unterstützt verschiedene Effekte. Muss du mal durch probieren ob was für dich dabei ist.

width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover

Die jeweilige Einstellung kommt in den Aufruf der Funktion. Also hier

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 501, height: 250, navigation: true, opacity: 0.5, delay: 5000 });
});
</script>

Einen Teil der Einstellungen erkennst du sicher.

[rollerfahrer]

Guten morgen zusammen,

mit erschrecken mußte ich gerade auf dem Rechner auf meiner Arbeit feststellen (IE8) das der Coinslider hier nicht funktioniert. Hier zeigt er die Fotos wieder alle nur untereinander an  Zuhause benutze ich den IE9.

@Dada

Ich denke den Effekt holt man sich hier heraus:

effect: '', // random, swirl, rain, straight

...und wo steht er dann hier drin???

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 501, height: 250, navigation: true, opacity: 0.5, delay: 5000 });
});
</script>

sah gestern abend alles so vielversprechend aus...und jetzt...etwas ernüchterung 

[Dada]

Also laut Entwickler läuft das Script ab IE6.
Die Reihenfolge der Scripts wäre aber sehr wichtig, die jquery muss vor dem Coinslider-Script geladen sein.

Zu dem Effekt:

Code: [Auswählen]

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 501, height: 250, navigation: true, opacity: 0.5, delay: 5000, effect: 'straight'});
});
</script>

[rollerfahrer]

Komando zurück

War wohl noch im Halbschlaf! Hatte hier auf Arbeit noch die index.html aufgerufen. Das richtige Script wird aber mit index.php aufgerufen. Hatte nicht dran gedacht das beide noch auf dem Server liegen. Jetzt klappts auch hier! Sorry

Der richtige "Slider" Effekt ist leider nicht mit dabei