[GELÖST] iPhone Slider in jQuery

Mäxim · 20.12.2010, 15:01

Hallo liebes Netzwelt-Team !

Ich habe soeben einen perfekten jQuery Slider für meine Website gefunden (Quelloffen natürlich), und zwar hier.

Gedacht wäre der Slider als "Intro" für die Seite, also ich Bewege den Slider und werde weitergeleitet. Das einzige was fehlt ist, dass das iPhone nicht in der Mitte vom Bildschirm ist. Und da ich mich mit jQuery (oder überhaupt mit JavaScript) gar nicht auskenne wollte ich mich mal an Euch wenden, ob Ihr es schaffen würdet, so etwas hinzubekommen.

Wie immer, Danke im Vorraus !

.:Philipp:. · 20.12.2010, 15:16

Hallo Mäxim,

in der js ist doch eine Weiterleitung dabei oder hab ich dich falsch verstanden?

Code:

$("#iphone-inside").fadeOut("normal", function(){window.location="index.html";});

Mäxim · 20.12.2010, 15:28

Danke sehr!

Ja, das hatte ich auch bemerkt, hab meinen Beitrag anscheinend zu spät erst wieder geändert

.

Wie würde ich das ganze denn in die Mitte vom Screen kriegen ?

.:Philipp:. · 20.12.2010, 15:31

Sehe ich auch grad, hat sich überschnitten - halb so wild

Um den Slider in die Mitte zu bekommen brauchste nur in der style.css und index.html etwas ändern:

style.css

Spoiler:

Code:

/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
                                                                  
*/
body { background-color:#25262b; padding:0; margin:0; text-align: center;}
a { outline:none; }
p { padding:0; margin:0; }
img { border:0; }

#iphone-container { background-image:url(../images/iphone-bg.png); background-repeat:no-repeat; padding:0; margin: auto; text-align: left; width: 398px; height: 801px; position: relative;}
#iphone-scrollcontainer { height:461px; width:320px; position:absolute; top:140px; left:40px; background-color:#000000; }

#iphone-inside { overflow: hidden; height:100%; width:100%; background-image:url(../images/background.png); }
#unlock-top { position: relative; height:95px; background-image:url(../images/lock-top.png); }
#unlock-spacer { height:272px; /* Total height = 461px - 95px (top) - 94px (bottom) */ }
#unlock-bottom { position: relative; height:94px; background-image:url(../images/lock-bottom.png); }
#slide-to-unlock {  position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height:94px; background-image:url(../images/slide-to-unlock.gif); }
#unlock-slider-wrapper { padding-left:22px; padding-top:23px; }
#unlock-slider { width:277px; height:50px; }
#unlock-handle{ position: absolute; z-index: 10; height: 50px; width: 72px; top: 0px; left: 0px; background-image: url(../images/lock-slider.png); }

.time { text-align:center; color:#FFFFFF; font-family:Georgia, Times, serif; font-size:45px; padding:6px 0; }
.date { text-align:center; color:#FFFFFF; font-family:Georgia, Times, serif; font-size:12px; }

/* Used by the jQuery slider */
.ui-slider { position: relative; background-repeat: no-repeat; background-position: center center; }

index.html

Spoiler:

Mäxim · 20.12.2010, 16:09

Nur zum Verständnis:

Kann ich das jetzt einfach mit Copy&Paste übernehmen ?
Finde nämlich jetzt auf den ersten Blick die Änderungen nicht

Danke schonmal für deine Mühe !

.:Philipp:. · 20.12.2010, 19:28

Ja das kannst du so übernehmen

Geändert wurde in der index.html nichts, nur ein div (#iphone-container) wurde hinzugefügt.

In der style.css habe ich die Attribute vom body angepasst da dieser die images als Background hatte.

Mäxim · 20.12.2010, 21:28

Danke, funktioniert perfekt!!!