Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Manfred Rutschmann - VOLUMEN Werbe-/Internetagentur schrieb: wir haben auf Basis des Layersliders eine TYPO3 Extension entwickelt. Da immer wieder anfragen zum Thema kommen habe ich hier eine kleine Infoseite zum Thema erstellt: http://www.typo3-layerslider.de/ LG Manfred -- Manfred Rutschmann Telefon: +49 (0)751 - 561110-45 Mobil: +49 (0)163 - 1721748 rutschm...@agentur-volumen.de Danziger Straße 3, 88250 Weingarten, Deutschland www.agentur-volumen.de USt.-Id.Nr.: DE281344599 ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Hallo ZUsammen, ich bin ganz frisch hier da ich mit Typo3 auseinanersetzte und gerne etwas hilfe hätte :). Ich Schreibe das mal hierhinein da es ja Grob schon darum geht. Ist es möglich mit der Extention News und dem Sly Slider einen Slider zu erstellen der 3 Spaltig Bild und Text der News slidet? Vielen Dank schonmal :) ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
@axel oder andere gebraucher der DCE extension! Wurde mich sehr freuen ein wenig mehr Info zu bekommen. Vorlagen ins DCE und vielleicht auch on-line web vorlagen sind immer sehr hilfreich. Tank und Freundliches Gruß. Quote: Wiechert Hooghwinkel (mr_typo3) wrote on Mon, 24 March 2014 08:59 @axel Hast du vielleicht einige hinweisen wie ich deine vorlag mit sections aufsetze? Hat es verschiedene malen probiert ohne Erfolg. Du hast, oneSlide. und auch filed.slide. Ich habe angefangen mit eine section mit title: oneSlide fieldname: slides section filed tag:oneSlide und dan einige fielden: filedname: slideImage etc. bis fieldname: teaserTwoHeadline Aber das reicht nicht. Wie mach ich das am bestens? Hast du auch ein vorlag online? Wurde auch interessant sein. Gruß und Tank. Wiechert Hooghwinkel ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
@axel Hast du vielleicht einige hinweisen wie ich deine vorlag mit sections aufsetze? Hat es verschiedene malen probiert ohne Erfolg. Du hast, oneSlide. und auch filed.slide. Ich habe angefangen mit eine section mit title: oneSlide fieldname: slides section filed tag:oneSlide und dan einige fielden: filedname: slideImage etc. bis fieldname: teaserTwoHeadline Aber das reicht nicht. Wie mach ich das am bestens? Hast du auch ein vorlag online? Wurde auch interessant sein. Gruß und Tank. Wiechert Hooghwinkel ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Quote: Axel Wüstemann (awuestemann) wrote on Mon, 24 February 2014 18:06 Am 24.02.2014 17:57, schrieb Renzo Bauen: Hoi Alexander das sollte eigentlich mit dem Image Cycle (EXT:imagecycle) gehen. Da gibt es mehrere Layoutvarianten und darunter auch solche die resposive sind. Gruss Renzo das geht auch ohne extension, bzw mit DCE. Mit DCE kann man sich auf Fluid basierende Content-Elemente zusammen bauen. Wenn Du z.B. Bootstrap nimmst, dann kannst Du das mit DCE sehr einfach zusammenbauen. http://getbootstrap.com/javascript/#carousel In dem VideoTutorial Typo3 6.0 von Galileo Press ist der Slider auch einfach nur mit TypoScript gemacht. Da ich sowas nicht so mag und wir auch noch Teaser in den einzelnen Slides haben wollten, war DCE die beste Lösung. Axel Hallo, Hat mich ein bisschen orientiert auf den DCE Extension. Ein einfaches DCE mit Bilder, tekst, Link auf Bild und alt-tekst ist schnell gemacht. Aber bin ich sehr interessiert wie das #carousel ins DCE zusammengebaut ist. Hast du vielleicht eine Vorlage? Wann hier publiziert ist das auch fuhr andere Typo3 Verbrauchers ein schone Hilfe. Zum Beispiel das Template und Aufbau des Felds ins General tab? Sehr viel Tank. Freundlich Gruß, HocomAdvies Wiechert Hooghwinkel ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
bei uns war es noch etwas komplizierter, außer den Bildern haben wir
noch 1-2 Text-Bild-Teaser (Überschrift, Text, Bild und Link-Button) auf
den Bildern liegen.
Diese Felder musst Du erst einmal im DCE anlegen.
- Hintergrundbild (das eigentliche Slider-Bild)
- Hauptüberschrift
- Teaset1Überschrift
- Teaser1Text
- Teaser1Bild
- Teaser1Link
- Teaset2Überschrift
- Teaser2Text
- Teaser2Bild
- Teaser2Link
Das Fluid-Template ist so:
{namespace dce=Tx_Dce_ViewHelpers}
f:layout name=None /
f:section name=main
div id=slider-outer
div id=slider
div class=container fill
div id=myCarousel class=carousel slide
ol class=carousel-indicators
f:for each={field.slides} as=oneSlide
iteration=i key=slideNum
li data-target=#myCarousel
data-slide-to={i.index} {f:if(condition: '{i.index} == 0', then:
'class=active', else: '')}/li
/f:for
/ol
div class=carousel-inner
f:for each={field.slides} as=oneSlide
key=slideNumber
div class=item{f:if(condition:
'{0:i.index} == {0:slideNumber}', then: ' active', else: '')}
div class=fill
style=background-image:url('fileadmin{oneSlide.slideImage.0.identifier}');
div class=container
div class=row
div class=col-md-12
h1f:format.raw{oneSlide.headline}/f:format.raw/h1
/div
/div
div class=row
f:if condition={oneSlide.teaserOneText}
div class=col-sm-6
div class=slider-teaser
f:image
src=fileadmin{oneSlide.teaserOneImage.0.identifier}
alt={oneSlide.teaserOneImage.0.alternative} width=500c height=180c
treatIdAsReference=1 /
h2f:link.page
pageUid={oneSlide.teaserOneLink}
{oneSlide.teaserOneHeadline}/f:link.page/h2
pf:format.raw{oneSlide.teaserOneText}/f:format.raw/p
f:link.page
pageUid={oneSlide.teaserOneLink} class=btn btn-default
btn-bluemehr/f:link.page
/div
/div
/f:if
f:if condition={oneSlide.teaserTwoText}
div class=col-sm-6
div class=slider-teaser
f:image
src=fileadmin{oneSlide.teaserTwoImage.0.identifier}
alt={oneSlide.teaserTwoImage.0.alternative} width=500c height=180c
treatIdAsReference=1 /
h2f:link.page
pageUid={oneSlide.teaserTwoLink}
{oneSlide.teaserTwoHeadline}/f:link.page/h2
pf:format.raw{oneSlide.teaserTwoText}/f:format.raw/p
f:link.page
pageUid={oneSlide.teaserTwoLink} class=btn btn-default
btn-bluemehr/f:link.page
/div
/div
/f:if
/div
/div
/div
/div
/f:for
/div
div class=pull-center
a class=carousel-control left href=#myCarousel
data-slide=previ class=fa fa-angle-left/i/a
a class=carousel-control right
href=#myCarousel data-slide=nexti class=fa fa-angle-right/i/a
/div
/div
/div
/div
/div
/f:section
Viel Erfolg
Axel
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Axel, Tanke, das ist sehr schön. Versuch es Mahl nach zu bauen. Gruß Wiechert. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Axel es ist nicht genau gelungen. Das heißt, man soll fuhr dieser vorschlage mit sections arbeiten. Und das ist mir noch nicht ganz klar. Braucht man ein section fur jeder slide? Oder ist es ein section und darunter den liste wie du angebt? Nun habe ich Felder unter einander aber das wirkt nicht mit der condition. Wie ich kein section habe sind auch die Felder Name nicht gleich wie ins vorlag :) ? - Hintergrundbild (das eigentliche Slider-Bild) - Hauptüberschrift - Teaset1Überschrift - Teaser1Text - Teaser1Bild - Teaser1Link Und so weiter Section name : Slider section field tag: oneSlide ?? variabele name: field.slides ?? Und ins section ?: - Hintergrundbild (das eigentliche Slider-Bild) - Hauptüberschrift - Teaset1Überschrift - Teaser1Text - Teaser1Bild - Teaser1Link Wiechert. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Warum sich das Leben so schwer machen_
Mit der News Extension von Georg Ringer (tx_news) hast Du alles Werkzeug was
man braucht. In 5min hat man das Grundgerüst für den Slider gebaut und der Rest
ist jQuery und CSS.
Hier ein Beispiel für sly:
http://darsa.in/sly/examples/horizontal.html
general.html
f:if condition={0: settings.templateLayout} == {0: 'sly'}
f:then
div class=scrollbar
div class=handle
div class=mousearea/div
/div
/div
div class=frame id=cycleitems
f:flashMessages class=tx-news-flash-message /
f:render section=content /
/div
/f:then
f:else
...
/f:else
/f:if
= List.html == !!! Richtig einbauen. Mal Im Manual von tx_news
schauen.
f:if condition={0: settings.templateLayout} == {0: 'sly'}
f:then
ul class=ym-clearfix
f:for each={news} as=newsItem
f:render partial=List/sly arguments={newsItem: newsItem, settings:settings} /
/f:for
/ul
/f:then
/f:if
Im Ordner Partials eine neue html datei namens sly.html erstellen und folgendes
einfügen.
{namespace n=Tx_News_ViewHelpers}
li
div class=header
h3
n:link newsItem={newsItem} settings={settings}
{newsItem.title}
/n:link
/h3
/div
/li
Hier wird jetzt nur der Header zum Test ausgegeben.
Das minimal CSS mitgeben
/* sly*/
frame {
height: 250px;
line-height: 250px;
overflow: hidden;
}
frame ul {
font-size: 50px;
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
}
frame ul li {
background: none repeat scroll 0 0 #33;
color: #DD;
cursor: pointer;
float: left;
height: 100%;
margin: 0 1px 0 0;
padding: 0;
text-align: center;
width: 227px;
}
frame ul li.active {
background: none repeat scroll 0 0 #A03232;
color: #FF;
}
scrollbar {
background: none repeat scroll 0 0 #CC;
height: 2px;
line-height: 0;
margin: 0 0 1em;
}
scrollbar .handle {
background: none repeat scroll 0 0 #292A33;
cursor: pointer;
height: 100%;
width: 100px;
}
scrollbar .handle .mousearea {
height: 20px;
left: 0;
position: absolute;
top: -9px;
width: 100%;
}
Und die jQuery File von sly mit page.includeJsFooter Einbinden. In pageTsconfig
noch das sly Template Verfügbar machen.
tx_news.templateLayouts {
sly = sly
}
Im BE ein Content Element news in deiner Seite Einfügen Storage deiner News/Sly Elemente angeben, im News modul auch das Template auswählen welches wir eben Verfügbar gemacht haben (sly). Ein paar Artikel Erstellen, oder besser noch eine Categorie für den Sly Erstellen und im News Artikel jeweils vergeben.
Nun mal Cache Löschen und im FE schauen...
Dass lässt sich jetzt beliebig auf jeden jQuery Slider oder auch
SupersizedBackground Umbauen/Erweitern.
Gruss
maty
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Hallo Renzo, EXT:imagecycle funktioniert leider nicht mit 6.2. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Hoi Alexander das sollte eigentlich mit dem Image Cycle (EXT:imagecycle) gehen. Da gibt es mehrere Layoutvarianten und darunter auch solche die resposive sind. Gruss Renzo -- Renzo Bauen Dipl. Ing. ETH/SIA, ScrumMaster conPassione gmbh T +41 33 345 00 92 M +41 79 330 10 11 http://www.conpassione.ch TYPO3 Bronce Associate Am Montag, den 24.02.2014, 16:37 +0100 schrieb Alexander Averbukh: Hallo zusammen, mit welcher Extension zu Typo3 6.1-6.2 kann ich so einen Bilder-Slider mit Vergrößerungsfunktion realisieren? Hier der Link: http://www.typo3forum.net/forum/attachments/typo3-extensions/3545d1393255854-realisiere-bilder-slider-slider.png Es wäre schön, wenn das responsive Design unterstützt würde. Vielen Dank. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Am 24.02.2014 17:57, schrieb Renzo Bauen: Hoi Alexander das sollte eigentlich mit dem Image Cycle (EXT:imagecycle) gehen. Da gibt es mehrere Layoutvarianten und darunter auch solche die resposive sind. Gruss Renzo das geht auch ohne extension, bzw mit DCE. Mit DCE kann man sich auf Fluid basierende Content-Elemente zusammen bauen. Wenn Du z.B. Bootstrap nimmst, dann kannst Du das mit DCE sehr einfach zusammenbauen. http://getbootstrap.com/javascript/#carousel In dem VideoTutorial Typo3 6.0 von Galileo Press ist der Slider auch einfach nur mit TypoScript gemacht. Da ich sowas nicht so mag und wir auch noch Teaser in den einzelnen Slides haben wollten, war DCE die beste Lösung. Axel ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Alexander Averbukh schrieb: Hallo zusammen, mit welcher Extension zu Typo3 6.1-6.2 kann ich so einen Bilder-Slider mit Vergrößerungsfunktion realisieren? Hier der Link: http://www.typo3forum.net/forum/attachments/typo3-extensions/3545d1393255854-realisiere-bilder-slider-slider.png Es wäre schön, wenn das responsive Design unterstützt würde. Vielen Dank. Hi Alexander, wir haben auf Basis des Layersliders eine TYPO3 Extension entwickelt. Die Extension ist leider nicht offiziell verfügbar da wir noch in Verhandlungen mit den Enwticklern des Layersliders stehen. Zumal das ganze auch noch ein kommerzielles Produkt ist. Falls Du aber interesse daran hast kannst Du dich gerne melden. Der Slider bietet so eine Thumbnailnavigation mit an. Vielleicht hilft dir das weiter? Hier ein paar Screenshots aus dem Backend. Auf den meisten Screens ist der Slider auch als preview zu sehen. http://www.agentur-volumen.de/fileadmin/clients/self/ls/1.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/2.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/3.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/4.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/5.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/6.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/7.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/8.png http://www.agentur-volumen.de/fileadmin/clients/self/ls/9.png Wenn Du interesse hast melde Dich einfach bei mir. Die Extension baut auf den aktuellsten Layerslider 5 auf und setzt TYPO3 6.1.x voraus! LG Manfred -- Manfred Rutschmann Telefon: +49 (0)751 - 561110-45 Mobil: +49 (0)163 - 1721748 rutschm...@agentur-volumen.de Danziger Straße 3, 88250 Weingarten, Deutschland www.agentur-volumen.de USt.-Id.Nr.: DE281344599 ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?
Hier habe ich sogar noch ein Video rumfliegen aus einem Entwicklungsstand dass die Handhabung veranschaulicht... http://www.agentur-volumen.de/fileadmin/clients/test-neu.mov -- Manfred Rutschmann Telefon: +49 (0)751 - 561110-45 Mobil: +49 (0)163 - 1721748 rutschm...@agentur-volumen.de Danziger Straße 3, 88250 Weingarten, Deutschland www.agentur-volumen.de USt.-Id.Nr.: DE281344599 ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
