Mobile (Iphone) Firmen-Präsentation in TYPO3

Wir haben aktuell eine Idee, unsere Agenturpräsentation auf das Iphone zu bringen. Da sich die serielle Präsentationsform eignet, erstellen wir optimierte Slides nach Powerpoint-Logik als PNG Bilder, und stellen diese als Mobile-Präsentation dar. Am besten gleich mit Photoshop auf die optimale Größe 320×480 erstellen! Und damit das ganze auch einfach ist, soll es in TYPO3 bearbeitbar sein:

1. Als erstes auf einer neuen Seite eine neues Seitentemplate einstellen (CSS-Styled-Content einbinden):

#genug breite
styles.content.imgtext.maxW = 100000
tt_content.image.20.maxW = 100000
page = PAGE
#jquery muss am Platz sein
page.includeJS.file1 = fileadmin/template/js/jquery-1.4.min.js
#folgende Dateien werden weiter unten im Artikel beschrieben
page.includeCSS.file1 = fileadmin/template/css/mobile_slider.css
page.includeJS.file2 = fileadmin/template/js/mobile_slider.js
page.5 = TEXT
page.5.value=<div id="slider"><div id="mask">
page.10 < styles.content.get
page.15 = TEXT
page.15.value=</div></div>

Warum die ganze Div-Parade notwendig ist:

Die Logik ist geliehen von: http://css-tricks.com/create-a-slick-iphonemobile-interface-from-any-rss-feed/

2. Dann ein Image-Element in der Mittleren Spalte platzieren mit mehreren Bildern füllen, eine Reihe je Bild:

3. Dann jQuery einbinden

4. Dann die Datei mobile_slider.js:

$(document).ready(function(){
	$('img:not(:last)').click(function() {
		$("#mask").animate({left: "-=320px"});
	});
	$('img:last').click(function() {
		$("#mask").animate({left: "0px"});
	});
});

Dann die Datei mobile_slider.css:

* {margin: 0 !important;}
#slider { width: 320px; overflow: hidden; position: relative; }
#mask { width: 1280px; position: relative; left: 0px;}
.csc-textpic-image { width: 320px; float: left; overflow: hidden;}

Und fertig!

Leider sind die Bildhöhen und Größen noch nicht perfekt justiert, da gebe ich ein Update, wenn wir weiter sind.

Share Button
Getagged mit: , , , , , ,
Veröffentlicht unter Allgemein
5 Kommentare auf “Mobile (Iphone) Firmen-Präsentation in TYPO3
  1. Alex sagt:

    vielleicht ist das hier dann ja auch für euch interessant: http://www.blog.exotec.de/?p=482

  2. Thank you very much for this blog post. I really appreciate you giving out this amazing information.

    I truly hope you may visit my web site. People who
    play games very much appreciate this information.

    The site is concerning microsoft points for free.

  3. Quality content is the secret to interest the users to pay
    a quick visit the web page, that’s what this web page is providing.

  4. Great article! That is the type of information that are meant to be shared
    across the internet. Disgrace on the search engines for now not positioning this post higher!

    Come on over and consult with my site . Thanks =)

  5. My spouse and I absolutely love your blog and find almost all of your post’s
    to be what precisely I’m looking for. Do you offer guest writers to write content for you personally?
    I wouldn’t mind publishing a post or elaborating on most of the subjects you write regarding here.

    Again, awesome web log!




Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>