Gelöst image slider gesucht

[baumbart]

Hallo Leute,

ich suche für meinen (JTL 3) Shop zur Gestaltung der Startseite einen Image Slider (Flash Slider). Da ich selbst relativ wenig Erfahrung damit habe, wende ich mich an die Profis unter euch.

Also das Programm sollte leicht in JTL Shop zu integrieren sein und das erstellen der Datei sollte möglichst über eine Bedieneroberfläche erfolgen. Und es sollte auf allen Plattformen laufen und benötigt keinen großen Schnickschnack wie 1000 Bilderrahmen oder so. Vielleicht 4 bis 5 Effekte für den Bildwechsel.

Äh achso, das Programm kann natürlich gern Freeware sein, aber auch wenns was kostet ist das völlig OK. Deutsch!

Vielen Dank für eure Hilfe im vorraus.

 

[ag-websolutions.de]

AW: image slider gesucht

und warum dann keinen slider auf jquery-Basis?

 

[baumbart]

AW: image slider gesucht

Wie gesagt, wenn er sich leicht bedienen lässt, ist es mir egal, ob Javascript, jquery oder Flash. Ich hatte mir schon verschiedene "Modelle" angesehen, aber wie gesagt: es muss einfach einzubinden und zu erstellen sein. Haste ´n Vorschlag? Deswegen wollte ich ja einen Experten Rat.

 

[ag-websolutions.de]

AW: image slider gesucht

schau mal in meinen Testshop rein ... www.anjas-hobbylaedchen.de/x_jtl3test ... Zugangsdaten

jtl3- shop / jtl3-shop

Erschrick nicht über die Bilder selber ... hab das nur auf die schnelle gemacht. Einrichtung 5 Minuten ... die Bilder sind statisch hinterlegt; wenn du hier was anderes haben willst, wird es aufwändiger

 

[baumbart]

AW: image slider gesucht

Na das ist doch mal was - verrätst du mir auch das Wie (Quelltext und Einbindung) ? Das mit dem roten Band hab ich schon mal gesehen ... bitte lass mich nicht dumm sterben :tongue:

Danke für die Zugangsdaten ... du hast mich auf eine Idee gebracht, hat aber hiermit nix zu tun.

 

[ag-websolutions.de]

AW: image slider gesucht

verrätst du mir auch das Wie (Quelltext und Einbindung)

klar,

1. Schritt) Im Shop-Admin über Inhalt->CMS->Startseite fügst du (am Ende) folgenden Code ein

<script type="text/javascript" src="templates/JTL-Shop3-Tiny/js/slider.js"></script>
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="slider_pictures/reel_1.jpg" alt="" /></a>
            <a href="#"><img src="slider_pictures/reel_2.jpg" alt="" /></a>
            <a href="#"><img src="slider_pictures/reel_3.jpg" alt="" /></a>
            <a href="#"><img src="slider_pictures/reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

2. Schritt kopiere die als Dateianlage beigefügte slider.js.txt in das Verzeichnis templates/JTL-Shop3-Tiny/js/ und benennen sie dabei um in slider.js

3. Schritt ergänze die themes.css von deinem Theme um folgende css-Elemente

/*--Main Container--*/
.main_view {
 float: left;
 position: relative;
}
/*--Window/Masking Styles--*/
.window {
 height:286px; width: 790px;
 overflow: hidden; /*--Hides anything outside of the set width/height--*/
 position: relative;
}
.image_reel {
 position: absolute;
 top: 0; left: 0;
}
.image_reel img {float: left;}
 
/*--Paging Styles--*/
.paging {
 position: absolute;
 bottom: 40px; right: -7px;
 width: 178px; height:47px;
 z-index: 100; /*--Assures the paging stays on the top layer--*/
 text-align: center;
 line-height: 40px;
 background: url(images/paging_bg2.png) no-repeat;
 display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
 padding: 5px;
 text-decoration: none;
 color: #fff;
}
.paging a.active {
 font-weight: bold; 
 background: #920000; 
 border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

4. Schritt Lege im root-Verzeichnis von deinem webspace ein Verzeichnis mit Namen slider_pictures an und kopiere dort 4 jpg-Grafikdateien rein mit Namen reel_1.jpg bis reel_4.jpg

5. Die Grafikdateien müssen folgende Größe haben 790px x 286px

6. Kopiere die Datei paging_bg2.png in dein image-Verzeichnis von deinem theme

Das wars

 

[german]

AW: image slider gesucht

hi anja, sag mir doch mal bitte - muss ich im admin-cms-ne startseite anlegen, denn ich habe hier keine ausser den links footer, header etc.

ich checke es leider nicht mehr, weil ich mich schon seit zwei stunden wieder am newslettermodul aufreibe!


wenn ich ne startseite in cms anlege, soll dies eine eigene linkgruppe werden, oder wie im aletn shop unter kopf - startseites anlegen und wenn dann mit welchen parametern bitte?

danke diiiiirrrrrr

 

[ag-websolutions.de]

AW: image slider gesucht

weil ich mich schon seit zwei stunden wieder am newslettermodul aufreibe!

spar dir die Zeit und warte aufs Update

muss ich im admin-cms-ne startseite anlegen

Also der Weg ist Shop-Admin->Inhalt->CMS(Eigene Seite) wenn du dort noch nicht in der Linkgruppe "Kopf" eine Seite "Startseite" hast....dann in der Linkgruppe Kopf auf "Seite hinzufügen" klicken ... wichtig ist "Seitentyp" auf "Spezialseite->Startseite" setzen

Im unteren Bereich kannst du denn den text (und halt oben den code wenn du willst) für deine Startseite setzen

 

[german]

AW: image slider gesucht

hi, danke habe es auch hinbekommen - bist eine sehr gute hilfe hier - tausend dank hierfür!

wegen dem newsletter, das ist echt zum verzweifeln, wenn du meinst die machen daran was, dann warte ich mal ab. schade dass so etwas was ja mit als kaufentscheidung angebriesen wird, nicht zu 100 % funzt!

 

[ag-websolutions.de]

AW: image slider gesucht

schade dass so etwas was ja mit als kaufentscheidung angebriesen wird, nicht zu 100 % funzt!

na ja Fehler sind dafür da dass sie der erste macht....der zweiten dem sie auffallen....und ein dritter der sie behebt

 

[german]

AW: image slider gesucht

thats the trough

sag mal weil ich dich gerade an der strippe habe
ich bastle mir gerade nen anderen JQ slider ein, wo baue ich den code für ein javascript denn ein? der steuert den slider!

den css habe ich bei mir mal in die theme.css,
html code mache ich dann auf die "NEUE ANJA STARTSEITE"!

thanks

 

[ag-websolutions.de]

AW: image slider gesucht

du das kommt ein wenig auf den js-code an ... entweder so wie oben....separate Datei und dann rein laden.....oder direkt rein (dann aber drauf achten dass du dichin der smarty-umgebung befindest)

so ohne zu wissen was wie wo...bischen schwierig

 

[german]

AW: image slider gesucht

guckst du mal ne sekunde hier bitte:

jQuery Photo Slide Show with Slick Caption Tutorial Revisited

thanks

 

[ag-websolutions.de]

AW: image slider gesucht

guckst du mal ne sekunde hier bitte:

ja hab ich ... nice....aber sehr ähnlich

HTML-Teil in die Startseite......CSS-Teil in die themes.css .......JS-Teil in eine separate Datei und genau wie oben vor dem html-part laden

Finger weg von jquery 1.3.1 im SHop ist schon ne höhere Version drin

 

[german]

AW: image slider gesucht

danke dir, ich probiere es mal so aus!

wie du siehst - ich lerne noch!

wegen 1.3.1 was muss ich beachten, sorry für die nachfragen , ICH LERNE NOCH

 

[ag-websolutions.de]

AW: image slider gesucht

nein im dem DL-Paket von "deiner" slidesho ist auch eine jquery-1.3.1.min.js drin und diese wird in der Beispiel index.html eingebunden....die Datei brauchst du nicht...und auch nichts einbinden, da im Shop schon ne jquery 1.4irgendwas standardmäßig drin ist

 

[german]

AW: image slider gesucht

@anja - kannst du mit firebug sehen wo eventuell der fehler im detail steckt
NOA NOA

bilder sind im ordner images/slider

die pfade im htmlcode habe ich auch alle benannt

die größen habe ich zum test im css und im html angeglichen.

thanks

 

[german]

AW: image slider gesucht

habe die startseite gerade mal offline genommen, da ich gesehen habe dass du es auch bist
wenn magts, funze mich mal wieder an wenn du zeit dafür hättest, dann mache ich wieder aktiv.

tausend dank

 

[german]

AW: image slider gesucht

@anja

wollen wir mal gucken?

per Teamviewer oder per firebug

eventuell siehst ja gleich meinen fehler.

danke

 

[ag-websolutions.de]

AW: image slider gesucht

du hast eine PN von mir