Thema ohne neue Antworten

TYPO3-Browser: Slideshow


Autor Nachricht
Verfasst am: 14. 04. 2011 [15:52]
tgr
Thorsten
Themenersteller
Dabei seit: 14.04.2011
Beiträge: 13
Moin!

Ich baue grad eine Rezepte-Datenbank. List und Singleview funzt alles soweit prima. Nun hatte ich die Idee, dass es recht hübsch wäre, wenn ich meinentwegen 10 Rezepte per Zufall aus der Datenbank ziehe, die samt Bild, title und subtitle in eine Slideshow packe und durchlaufen lassen kann, mit Link der Bilder auf die Singleansicht.

Allerdings hab ich grad nicht so recht einen Ansatz, wie das funzen kann.

Jemand eine Idee?!

Danke!

Cheers, Thorsten


Verfasst am: 14. 04. 2011 [16:06]
tgr
Thorsten
Themenersteller
Dabei seit: 14.04.2011
Beiträge: 13
Ähm... kann mal jemand den Beitrag verschieben? Der sollte in "Fragen" und nicht in "Neuigkeiten"...

Cheers, Thorsten
Verfasst am: 15. 04. 2011 [11:08]
oRi
Oliver
Dabei seit: 29.03.2011
Beiträge: 9
Hallo Thorsten,

ein Ansatz wäre vielleicht, sich eine der diversen Slideshow- Extension zu installieren und diese in deine BrowserPlugIn-Umgebung zu integrieren. Beispielhaft könntest du dir das TUT Browser Tutorial Images und hier den Teil "jQuery-Fancybox" ansehen. Dies bezieht sich zwar nur auf Bilder aber bietet eventuell Ansätze. Durch eime Kombination von TS, Templateanpassung und einer geeigneten Extension aus dem TYPO3-Fundus müsste deine Idee umsetzbar sein. Sorry, dass ich dir keine konkreteren Hinweise bieten kann.

Sonnige Grüße
Oliver

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 15.04.2011 um 11:09.]
Verfasst am: 19. 04. 2011 [13:44]
mithri
Tobias Hümmerich
Dabei seit: 04.02.2011
Beiträge: 43
Hi,

random geht mit :

views.list.random = 1

Dann brauchst du nur noch ein Limit zu setzen und das ganze entsprechend in dein html Template ausgeben. Der Rest ist JS+CSS. Z.b. kannst du Jquery Tools verwenden: http://flowplayer.org/tools/tabs/slideshow.html

Beispiel wie ich das gemacht hab (ohne random): http://www.meso.de/

www.page-and-paper.de
Verfasst am: 19. 04. 2011 [15:54]
tgr
Thorsten
Themenersteller
Dabei seit: 14.04.2011
Beiträge: 13
Sehr cool... vielen Dank!

Das ist ein sehr netter Ansatz. Das werde ich auf jeden Fall mal testen. Mir kam dabei noch eine weitere Idee. Ich versuche grad dahinter zu kommen, wie ich folgendes lösen könnte:

Via random werden neun Datensätze gewählt die in Dreierblöcke aufgeteilt werden sollen.

HTML
<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>


Ob das wohl mit einem Optionsplit zu machen ist?

Cheers, Thorsten
Verfasst am: 22. 04. 2011 [14:49]
dirk
Dirk Wildt
Dabei seit: 27.09.2010
Beiträge: 872
Hallo Thomas,
herzlichen Dank für Deine Beiträge.

Hast Du Deine Lösung auf http://www.meso.de/ eventuell so umgesetzt, dass man die Bildergalerie in den Browser integrieren könnte?

Bislang haben wir für den Browser jq_fancybox empfohlen, doch in Verbindnung mit AJAX gibt es Probleme.

Viele Grüße
Dirk

--
Unterstütze meine Arbeit mit einer Spende oder sponser eine meiner TYPO3-Erweiterungen!
Klicke auf http://typo3-browser-forum.de/sponsoring
Verfasst am: 20. 05. 2011 [09:31]
mithri
Tobias Hümmerich
Dabei seit: 04.02.2011
Beiträge: 43
Hallo Dirk,

das ist alles statisch wie ich das gemacht habe und ohne AJAX. Ich erkläre das mal anhand unserer Seite www.page-and-paper.de/referenzen.html . Dort habe ich die Referenzen komplett mit TYPO3-Browser gemacht.

Folgendes Listen Template wird verwendet:

HTML
<!-- ###TEMPLATE_LIST### begin -->
<!-- ###LIST_TITLE### begin -->
        ###MY_TITLE###
<!-- ###LIST_TITLE### end -->
	<div class="slider" id="subsite_slider">
	<div class="items">	
<!-- ###LISTVIEW### begin -->
 
 
 
 
	<!-- ###LISTBODY### begin -->	
 
	<!-- ###LISTBODYITEM### begin -->	
 
			<div class="csc-default referenz-teaser">
				<div class="logo">###TX_PPREFERENZEN_CUSTOMER.IMAGE###</div>
				<div class="quote">###TX_PPREFERENZEN_PROJECT.QUOTE###
				<div class="quote-border"></div> 
				<div class="quote-arrow"></div> </div>
				<div class="autor">###TX_PPREFERENZEN_PROJECT.AUTHOR### </div>
				<span class=more">###MORE_LINK###</span>
				</div>
 
 
<!-- ###LISTBODYITEM### end -->				<!-- ###LISTBODY### end -->
 
 
 
<!-- ###LISTVIEW### -->
  </div>      </div>
	<div id="contactnavi">	
		<a id="left" class="prev browse left"></a>
		<div class="navi">
		</div>
		<a id="right" class="next browse right"></a>
	</div>
	<!-- /listarea -->
<!-- ###TEMPLATE_LIST### end -->


Danach werden die Felder mit Typoscript gefüllt:

TYPOSCRIPT
2 {
				name = Teaser
				singlePid = 60
				select (
					tx_ppreferenzen_project.name,
					tx_ppreferenzen_customer.image,
					tx_ppreferenzen_project.quote,
					tx_ppreferenzen_project.author
				)
				handleAs {
				}
				andWhere = tx_ppreferenzen_project.teaser = 1
 
				marker < plugin.tx_browser_pi1.marker
				marker {
					more_link {
						  value = zum Projekt
						  lang {
							de = zum Projekt
						  }
						  typolink {
						  #Link anpassen: 
							parameter = {$pp_referenzensinglePid}
							parameter {
								insertData = 1
							}
							additionalParams = &tx_browser_pi1[showUid]=###TX_PPREFERENZEN_PROJECT.UID###&###CHASH###
							#wrap = <span class="detail">|</span>
							ATagBeforeWrap = 1
						}
 
					}
				}
				tx_ppreferenzen_customer {
 
					image < tt_content.image.20
					image {
						imgList.field >
						imgList = ###TX_PPREFERENZEN_CUSTOMER.IMAGE###
						imgPath = uploads/tx_ppreferenzen/
						//imgMax  = 1
						1 {
						  file {
							width.field >
							width   = 350;
							height  = 350;
						  }
						  altText.field   >
						  altText         = ###TX_PPREFERENZEN_CUSTOMER.IMAGE###
						  titleText.field >
						  titleText       = ###TX_PPREFERENZEN_CUSTOMER.IMAGE###
						}
						stdWrap {
						  prefixComment >
						  wrap = <div class="image">|</div>
						}
					}
				}
				tx_ppreferenzen_project {
					name {
						crop = 40 | ... | 1
					}		
					author {
					#htmlSpecialChars = 1
					}
				}
				csvLinkToSingleView = tx_ppreferenzen_project.name
			}


Damit nicht alle im Teaser angezeigt werden gibt es ein Feld "tx_ppreferenzen_project.teaser" welches auf 1 gesetzt werden muss damit das Element im Teaser angezeigt wird.

Dann noch das entsprechende Javascript:

[javascript]
jQuery().ready(function() {
$("#subsite_slider"icon_wink.gif.scrollable({circular:true}).navigator({
navi:'div.navi'
}).autoscroll({
interval: 10500
});
});
[/javascript]

Alles keine Hexerei, dafür halt auch ohne AJAX. Bei ein paar Elementen im Teaser denke ich mal auch kein Problem.

Gruß
Tobias

PS: Der Javascript Code wird irgendwie nicht richtig angezeigt, bitte um Korrektur icon_smile.gif

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 20.05.2011 um 09:32.]

www.page-and-paper.de
Verfasst am: 01. 06. 2011 [11:45]
dirk
Dirk Wildt
Dabei seit: 27.09.2010
Beiträge: 872
Hallo Tobias,
vielen herzlichen Dank für Deine Schnipsel.

Ich habe im Moment wenig Zeit, werde mir Deine Lösung aber demnächst näher zu Gemüte führen und gucken, ob ich davon was in den Browser übernehmen kann.

Viele Grüße
Dirk

--
Unterstütze meine Arbeit mit einer Spende oder sponser eine meiner TYPO3-Erweiterungen!
Klicke auf http://typo3-browser-forum.de/sponsoring



Powered by TYPO3, TYPO3-Start und TYPO3-MM-Forum