Kannst Du uns schon was zeigen? ...auch wenn es nicht läuft...oder hast es nur auf dem PC?
Bin neugierig ob Du es ans laufen kriegst 
Accordion und Bienenwabe als Galeryersatz
-
-
Moin zusammen,
also, irgendwo hab ich da Luft im Hirn. An dieser Aufgabe verzweifel ich noch. Könnt ihr euch das bitte mal anschauen? Variante2 von Mario funktioniert überhaupt nicht, bei Variante 1 komme ich wenigstens soweit das ich das Akkordeon sehe, bewegen tut sich allerdings, nix.
Für eure Hilfe vielen Dank schon jetzt.
-
-
Leider kann ich z.Zt. nur 'am Ball' bleiben und mitbekommen was sich um mich herum so tut.
Noch 2-3 Monate dann ist mein privates Projekt, die Sanierung meines Elternhauses, beendet.
Das raubt mir z. Zt. fast jede freie Minute
-
Das Text Accordion läuft doch, nur die Bilder nicht.
Vergleich doch mal die Scripte und ergänze bei den Bildern was das Textelement ans Laufen kriegt.
Sag ich einfach mal so
-
Jo wäre ein Ansatz.
Ich habe schon die halbe Nacht damit verbracht und nun auch schon wieder zwei Stunden. grrrrrrrrrrrr
Das Thema Haussanierung ist mir nur zu gut bekannt. Da kann ich nur sagen toi toi toi, für den Rest der Wegstrecke und nicht mehr Überraschungen als nötig, und wenn, dann nur positive
-
Da fehlt wohl die Startfunktion bei dir ! Setze das noch als erstes in das HTML Objekt dazu ! (sind aber meine Einstellungen)
Alles anzeigenJavaScript- <script>
- //---------------wiper------------------
- $(function() {
- $("ul#acordion_main").Wiper();
- //easing: 'linear',
- //easing: 'ease',
- //easing: 'ease-in',
- //easing: 'ease-out',
- //easing: 'ease-in-out',
- //Demonstration1
- $("ul#inner_wiper").Wiper({
- easing: 'ease-out',
- offset: -1,
- duration: 1000,
- binder: $("#inner_wiper_demo"),
- menuColors: [ '#000000', '#333333', '#666666', '#999999', '#cccccc' ]
- });
- });
- </script>
-
Tuts, auch nicht.
Danke Andy, habe es gerade probiert.
Ich habe bei der Header-Gestaltung ein HTML-Objekt eingefügt. Dort den Code eingefügt. Dort kann ich zwar nix auf php umstellen aber das muss doch trotzdem funktionieren.
-
Also hier die schnelle Beschreibung des Accordion Sliders !
Achtung ! Ist reines HTML5 und auf älteren IE nicht lauffähig und auf neueren IE nur beschränkt !
Was wird benötigt: "jquery.wiper.css" "normalize.css" "jquery.wiper.js" (Kann man gleich im HTML-Objekt unter erweitert einbinden - Häkchen nicht vergessen zu setzen)
In das HTML Objekt kommt rein: (auch gleich der Startvorgang)
Alles anzeigenHTML- <script>
- $(function() {
- $("ul#acordion_main").Wiper();
- $("ul#inner_wiper").Wiper({
- easing: 'ease-out',
- offset: -1,
- duration: 1000,
- binder: $("#inner_wiper_demo"),
- menuColors: [ '#000000', '#333333', '#666666', '#999999', '#cccccc' ]
- });
- });
- </script>
- <section id="acordion_box">
- <ul id="acordion_main">
- <li>
- <section id="inner_wiper_demo">
- <ul id="inner_wiper">
- <li>
- <h2>Energie 1</h2>
- <section class="li_sample5 en_box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</section>
- </li>
- <li>
- <h2>Energie 2</h2>
- <section class="li_sample4 en_box">Lorem ipsum dolor sit amet.</section>
- </li>
- <li>
- <h2>Natur 3</h2>
- <section class="li_sample3 en_box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</section>
- </li>
- <li>
- <h2>Natur 4</h2>
- <section class="li_sample2 en_box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
- the background-image.</section>
- </li>
- <li>
- <h2>Natur 5</h2>
- <section class="li_sample1" class="en_box">Blüten Harmonie
- </section>
- </li>
- </ul>
- </section>
- </li>
- </ul>
- </section>
Dann kommt noch die CSS die man gleich im HTML Objekt unter Erweitert eintragt !
Alles anzeigenCSS- @charset UTF-8;
- .sample_text {
- width:200px;
- font-size:20px;
- position:relative;
- top:5%;
- left:10%;
- }
- #inner_wiper_demo {
- width:640px;
- height:370px;
- position:relative;
- top:1%;
- left:1%;
- margin-bottom:30px;
- }
- #inner_wiper_demo .li_sample1,#inner_wiper_demo .li_sample2,#inner_wiper_demo .li_sample3,#inner_wiper_demo .li_sample4,#inner_wiper_demo .li_sample5 {
- color:#fff;
- position:relative;
- text-shadow:1px 2px 5px #000;
- opacity:0.7;
- font-size:13px;
- }
- #inner_wiper_demo ul#inner_wiper li {
- width:100%;
- height:376px!important;
- overflow:hidden;
- }
- #inner_wiper_demo ul#inner_wiper li h2 {
- color:#fff;
- box-shadow:0 -2px 1px #000;
- width:346px!important;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(1) {
- background:url(../images/demo1_1.jpg);
- background-repeat:no-repeat;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(1) .li_sample5 {
- width:300px;
- top:250px;
- left:200px;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(2) {
- background:url(../images/demo1_2.jpg);
- background-repeat:no-repeat;
- background-size:contain;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(2) .li_sample4 {
- width:300px;
- top:210px;
- left:300px;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(3) {
- background:url(../images/demo1_3.jpg);
- background-repeat:no-repeat;
- background-size:cover;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(3) .li_sample3 {
- left:75px;
- top:20px;
- color:#fff;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(4) {
- background:url(../images/demo1_4.jpg);
- background-repeat:no-repeat;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(4) .li_sample2 {
- width:140px;
- left:80px;
- top:40px;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(5) {
- width:100%;
- background:url(../images/demo1_5.jpg);
- background-repeat:no-repeat;
- }
- #inner_wiper_demo ul#inner_wiper li:nth-child(5) .li_sample1 {
- left:286px;
- top:5px;
- color:#fff;
- width:140px;
- opacity:0.6;
- font-size:20px;
- }
Dann fehlen eigentlich nur noch die Bilder die ich wie in der CSS zu ändern sind, im "images" Ordner drinnen. Man kann sie auch gleich im HTML-Objekt einbinden in den Ordner "images". Dann sieht man es gleich in der Vorschau ! (HTML-Objekt über die gesamte Seite und Höhe ca. 380 - 400 px)
-
Moin Andy, danke für deine Arbeit,
""Was wird benötigt: "jquery.wiper.css" "normalize.css" "jquery.wiper.js" (Kann man gleich im HTML-Objekt unter erweitert einbinden - Häkchen nicht vergessen zu setzen)""
Wenn ich bei der Templategestaltung im Header ein HTML-Objekt einfüge, gibt es da keinen Reiter erweitwert. Ich habe die Dateien unter allgemeine Einstellungen/Erweitert. Sorry, ich habe da voll den Black Out. Nehme mir das Thema heute Abend noch mal vor.
-
Hi Labelle !
Es wurde aber gefragt ob dieser Slider im Content eingebauen werden kann !
Im HEader geht der Reiter "Erweitert" beim HTML nicht. Da musst du die Files per Metatag einbinden (So wie in der original Anleitung). Außerdem die Bilder und Files "händisch" in den images oder files Ordner speichern. Die CSS in den </head> Tag.
-
Hallo Andy,
da kann ich mcih nur bei dir entschuldigen. Ich hätte wohl ein neuens Thema aufmachen sollen.
Ich habe versucht das Akkordeon von Marios Seite einzubauen. Mit der Variante 2 bekomme ich es überhaupt nicht hin, bei Variante2 funktioniert der Slider nicht. Und ich weiß nicht wo ich einen Knoten habe. Ich habe es schon mit zig verschiedenen Skripten probiert, ist zwar megapeinlich, aber ich krieg kein Akkordeon zu stande. Ich versuche es am abend noch mal.
-
Thema vorerst erledigt! Melde mich wenn ich weiter bin. Vielen Dank für eure schnelle Hilfe.
-
Ich bin auch schon 47 und lerne noch immer dazu !
Vielleicht ist ein Bild besser ! Relevante Stellen sind eingekreist beim HTML-Objekt!