Retusche Portfolio (am besten auch für Tabletts & Smartphones)

[Chapsy]

Hallo,

Ich möchte eine Webseite für ein Retusche-Portfolio entwerfen. Am besten mit einer "vorher & danach" Fubnktionalität, so wie hier per Rollover:
http://www.gregapodaca.com/resources/-portfolio/-prepress/bikini/bikini1.html

Das wichtigste ist erst mal, daß die Seite ohne Flash auskommt, und auf normalen Rechnern läuft. Mit anderen Worten: Tablets & Smartphones "wäre schön", sind aber nicht zwingen notwendig

OK, der klassische Rollover ist ja ein alter Hut und kein Problem. Aber vielleicht gibt's da ja was eleganteres/moderneres, was per HTML5 funktioniert?
Oder vielleicht etwas, was doch Tablet & Smartphone-freundlich ist?

Ein "slider", bei dem man nahtlos zwischen original und retuschiertem Bild hin- und her- sliden kann wäre am besten – aber das gibts wohl nur per Flash, richtig?

Bin für jede Hilfe dankbar! (Gerne auch ein paar Stichworte, nach denen ich googlen kann...)

Bib

 

[teste123]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

hi
möchtest du so was ?
http://www.drweb.de/magazin/75-beauty-retusche-tutorials/
MfG

 

[Dobi78]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

"Portfolio Webdesign" heisst das Zauberwort.
Das was Du Slider nennst wird mit jQuery umgesetzt, da gibt es nahezu unendliche Möglichkeiten.....dies elegant zu lösen als per Hover

 

[Chapsy]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

"So was" ist ja echt gut Auf der Seite tummelt sich ja so ziemlich alles, von Retusche-Tutorial bis Retusche-Portfolio-Seite....

 

[Chapsy]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

OK, und die Slider per jQuery – sind die kompatibel mit Tablets & Smartphones?

Was beim Smartphone wirklich SEHR cool wäre:
Wenn das "danach" Bild über dem "vorher" Bild liegen könnte, und man dann mit dem Finger den Slider selbst irgendwo ansetzen könnte.
Also: im Prinzip so ähnlich, als wenn man durch seine Smartphone-Fotos durchzappen würde, nur mit dem Unterschied, daß eben nicht das eine Bild heraus- und das andere herein-geswiped wird. Sondern so, daß das vorher & nachher deckungsgleich bleiben.

Andere Möglichkeit (Smartphone) wäre:
Finger berührt den Screen = vorher Bild erscheint (am besten per pre-loader geladen)
Finger verläßt den Screen = nachher Bild erscheint

Im Prinzip also eine Art moderner Rollover

Oder eine Art animiertes GIF:
Finger berührt Screen = erstes Frame wird gezeigt
Finger verläßt Screen = zweites Frame wird gezeigt
(so entfallen dann auch die Ladezeiten bzw etwaige Verwirrung beim Betrachter, wenn er den Screen mit dem Finger berührt)

 

[Dobi78]

Nur mal so doof in die Runde gefragt....kennst Du dich überhaupt mit HTML, CSS und Co. aus?????

 

[Chapsy]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

Nur mal so doof in die Runde gefragt....kennst Du dich überhaupt mit HTML, CSS und Co. aus?????

Bin zwar kein Webdesigner, habe aber eine einigermaßen gute Basis in Sachen HTML und CSS. (Habe vor einiger Zeit z.B. mein Webseite von purem HTML auf Wordpress umgestellt, und dabei den "Look" per CSS so angepasst daß es keinen sichtbaren/funktionellen Unterschied zum alten HTML gab – inkl. CSS Menues bzw Dropdown-Menues)

 

[MyBad]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

Es gibt auch einige Slider auf jQuery-Basis, welche sich per Touch und somit auch auf Tablets und Smartphones wunderbar bedienen lassen.

Schau dir diesen hier mal an:
http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

oder dieses Tutorial:
http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery

 

[Chapsy]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

Supi! Vielen Dank!
Der ertse Link funktioniert leider nicht (403 forbidden)
Aber im 2. Link ist genau das, was ich gesucht habe

 

[Chapsy]

AW: Retusche Portfolio (am besten auch für Tabletts & Smartphones)

Kurzes Update nochmal:
Hab das ideale Plugin gefunden:


Super Funktionalität! Was mir besonders gefällt ist die Tatsache, daß man auch auf Smartphones den Slider per clilc&drag hin- und her-schieben kann.

Dieser hier ist auch nicht schlecht – nur leider funktioniert der Slider nicht auf Tablets: