W3C Fehler

[knippi]

Hallo,

ich weiß nicht ob das Forum hier das richtige ist, wenn nein, dann bitte verschieben

Ich habe jetzt meinen Shop fertig und diesen mal mit W3C Validator gecheckt.
Es erscheinen 3 Fehler, die wohl an dem Modul Imageslider liegen. Kann mir da jemand helfen?

Achja, der Shop wäre Unitedlight - LED Online Shop

schönen Gruß
Knippi



Linkback: https://www.modified-shop.org/forum/index.php?topic=8661.0

[DJ-Ready]

Code: PHP  [Auswählen]

<div id="slidercontent"></div>

eine ID darf immer nur 1 mal vorkommen, bei mehrfachverwendung muss man Class benutzen. Und dieser Container mit der id slidercontent kommt mehrmals in der Seite vor daher der Fehler.
Lösung: Imageslider so umbauen das class anstelle von id verwendet wird. Nicht vergessen das ganze auch in den Javascript Dateien des Sliders zu ändern.

[GTB]

und den CSS Dateien !

[knippi]

Danke für die Info!

Das Modul wurde doch für Modified optimiert. Wäre das dann ein Fehler im Modul?
Könnte man das dann korrigieren? Oder habe ich das was falsch eingebaut, bzw. doppelt eingebaut.
Ich bin kein Programmierer, daher die Frage

[DJ-Ready]

Da wird wohl jemand geschlampt haben beim Bau bzw Umbau des Modules. Nur weil etwas funktioniert muss es noch lange nicht valide sein ^_^
Ist aber jetzt auch nicht unbedingt eine riesen Sache der Fehler.

[knippi]

Ich habe jetzt mal alle Dateien durchsucht wo dieses "slidercontent" drin vorkommt.
Diese imagesliders.php ist das wohl. Kann das jemand von euch für mich verbessern?
Ich habe da leider keine Ahnung was ich da machen muss.

Danke!

[DJ-Ready]

Nur mit der php Datei (bzw jetzt .txt) ists nicht getan. Das muss aller Wahrscheinlichkeit nach auch in den js und css Dateien des Sliders geändert werden.
Les dich doch erstmal durch den Forumthread von dem Modul durch, vielleicht hats ja schon jemand vor dir umgeschrieben: MODUL: Imageslider für modified eCommerce Shopsoftware by Hetfield

[knippi]

Danke für den Tipp. Ich habe Hetfield mal selber angeschrieben.

[koshiro]

Hallo Knippi,
das liegt an der box_imagesliders.html
Habe es jetzt nicht getestet, aber müßte so gehen.

Code: PHP  [Auswählen]

<ul id="imageslider">
        {$BOX_IMAGESLIDER}
</ul>

ändern in

Code: PHP  [Auswählen]

<ul class="imageslider">
        {$BOX_IMAGESLIDER}
</ul>
 

und dann noch den Teil der Stylesheet ändern von

Code: CSS  [Auswählen]

ul#imageslider {
        margin:0 auto;
        padding:0;
        list-style:none;
        list-style-position:outside;
        overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        width: 525px; /* Breite des Slideshowcontainers */
}
ul#imageslider #slidercontent {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 525px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
}

ändern in

Code: CSS  [Auswählen]

ul.imageslider {
        margin:0 auto;
        padding:0;
        list-style:none;
        list-style-position:outside;
        overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        width: 525px; /* Breite des Slideshowcontainers */
}
ul.imageslider .slidercontent {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 525px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
}

Gruß
Micha

[mantis]

in der source/boxes/imagesliders.php muss und der /javascript/imageslider.js muss auch jeweils einmal die id in class geändert werden, dann funzts

Gruss
mantis

[knippi]

ja das probier ich jetzt auch noch. Ich hatte gerade in der imagesliders.php das auch noch geändert.
Aber auch ohne Erfolg.

EDIT: Und in der imageslider.js finde ich aber nichts.

[knippi]

Also ich habe jetzt einiges rum experimentiert. Aber ohne Erfolg. Hat noch jemad ne Idee?

[franky_n]

Hallo knippi,

also ich sehe im Validator nur das er anmeckert:
"slidercontent"

Das steht in der Anleitung so:

Ganz am Ende der Datei folgendes einfügen und beliebig die Formatierung anpassen:

Code: CSS  [Auswählen]

/*---------------------------- Imageslider (c) 2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin --------------------------*/
ul#imageslider {
        margin:0 auto;
        padding:0;
        list-style:none;
        list-style-position:outside;
        overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        width: 525px; /* Breite des Slideshowcontainers */
}
ul#imageslider #slidercontent {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 525px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
}
/*---------------------------- Imageslider (c) 2008 by Hetfield - www.MerZ-IT-SerVice.de - End ----------------------------*/
 

und sollte dann so lauten:

Ganz am Ende der Datei folgendes einfügen und beliebig die Formatierung anpassen:

Code: CSS  [Auswählen]

/*---------------------------- Imageslider (c) 2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin --------------------------*/
ul#imageslider {
        margin:0 auto;
        padding:0;
        list-style:none;
        list-style-position:outside;
        overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        width: 525px; /* Breite des Slideshowcontainers */
}
ul#imageslider {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 525px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
}
.slidercontent {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 525px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
}
/*---------------------------- Imageslider (c) 2008 by Hetfield - www.MerZ-IT-SerVice.de - End ----------------------------*/
 

Und dann nur noch in \templates\xtc5\source\boxes\imagesliders.php in Z.90 das ändern:

Code: PHP  [Auswählen]

                $imagesliders_string .= '<li><a href="'.$url.'" title="'.$imagesliders_data['imagesliders_title'].'"'.$target.'>'.xtc_image(DIR_WS_IMAGES.$imagesliders_data['imagesliders_image'],$imagesliders_data['imagesliders_title']).'</a><div id="slidercontent">'.$imagesliders_data['imagesliders_description'].'</div></li>';

in das:

Code: PHP  [Auswählen]

                $imagesliders_string .= '<li><a href="'.$url.'" title="'.$imagesliders_data['imagesliders_title'].'"'.$target.'>'.xtc_image(DIR_WS_IMAGES.$imagesliders_data['imagesliders_image'],$imagesliders_data['imagesliders_title']).'</a><div class="slidercontent">'.$imagesliders_data['imagesliders_description'].'</div></li>';
 

Ansonsten ist im Quelltext zumindest kein "slidercontent" zumindest nicht in der Version die ich hier runtergeladen habe.
Soo und dann mal validieren ob's passt und ob noch alles geht...

Viele Grüße

Franky

[knippi]

W3C Fehler ist weg, dafür aber auch die ganze Slideshow.
Auf der Seite kommt keine Fehlermeldung.

Ich lad erstmal die alten Dateien wieder hoch.

[redrat]

In der Datei imageslider.js muss noch folgendes geändert werden damit es wieder funktioniert:

Code: Javascript  [Auswählen]

// Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin
$(document).ready(
                function(){
                    jQuery('ul.imageslider').innerfade({
                        speed: 4000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '300px'
                    });
                });
// Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - End
 

gruß