tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
14316
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    socke999 socke999 ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Beiträge
    122
    Hallo, ich wollte mal fragen ob einer weißm,
    wie man so eine Bilderslide show macht, wo sich dann auch noch das Bild in seinem Fixen Container bewegt ...
    Ist ein bisschen schwer zu erklären,
    deshalb hier mal einen link wo so etwas gemacht wurde was ich meine:
    http://www.gucci.com/de/index2.html

    Also, da auf der Gucci seite bewegen sich ja so die "hauptbilder" von links nach rechts oder umgekehrt, nun möchte ich auch so etwas ähnlichen basteln,nur wie?

    Kann mir da einer weiter helfen?
    ich sehe schon das das mit Javascript Frameworks gemacht worden ist, wie prototype moetools script.aculos.us usw.

    nur welche funktionen konnte ich noch nicht herausfinden, da ich mich nicht wirklich so richtig mit den JS Frameworks auskenne....

    Vielleicht hat auch da einer eine Idee?
     

  2. #2
    knownix knownix ist offline Grünschnabel
    Registriert seit
    Jan 2008
    Beiträge
    1
    versuch´s mal mit "Microsoft Photo Story". es ist freeware, einfach mal googeln

    ich hoffe ich konnte dir helfen

    greetings

    // EDIT

    ups, sorry! hätte erstmal zu ende lesen sollen . hab nach der seitenbesichtigung zu schnell geantwortet.

    das tool erstellt videodateien die kamerafahrten über bilder macht, aber fürs web werden die sicher zu groß
     

  3. #3
    socke999 socke999 ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Beiträge
    122
    Als mit den sogenanneten Frameworks kann man ja verschiedene Effekte basteln...

    Nur hab ich keine Ahnung wie man so ein Bild anspricht bzw. bewegt ohne das sich der rest verschiebt.

    Ein Div box z.b. weiß ich schon wie ich die von A nach B verschieben kann mit einem Effekt- Animation, aber nicht so wie da bei Gucci...

    Kann da keiner weiter helfen?
     

  4. #4
    FipsTheThief FipsTheThief ist offline Mitglied Platin
    Registriert seit
    Oct 2004
    Ort
    Leipzig
    Beiträge
    589
    Ich hab dies mal mit einem Panorama Bild gemacht also 360 Grad Rundumschau , der Trick ist so simpel wie einfach. Man bindet es als Hintergrundbild ein und verschiebt es einfach über Background Position und fertig.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    <html>
        <head>
            <style type="text/css">
                .irgendwas {
                    background:url(meinbild.jpg);
                }
            </style>
            <script type="text/javascript">
                window.onload = function () {
                    var layer = document.getElementById('irgendwas');
                        layer.style.backgroundPosition = "xposi px yposi px";
                }
            </script>
        </head>
        <body>
            <div class="irgendwas" id="irgendwas">
            </div>
        </body>
    </html>

    Man bräuchte halt ein Interval , oder eine Funktion die sich Rekursiv aufruft bis die gewünschte Position vorhanden ist.
     

  5. #5
    Maik Tutorials.de Gastzugang
    @socke999: Bitte unterlasse hier zukünftig das Pushen eines Threads.

    Zitat Zitat von socke999
    hat da gar keiner einen Plan?
    nicht mal einen Ansatz?
    Zitat Zitat von socke999
    Niemand?
    Nicht einmal einen ANSATZ oder so?
    Siehe hierzu den Punkt 12 unserer Netiquette:

    Bitte erstelle keine Doppel-/Mehrfach-/Pushpostings. Dazu zählen insbesondere das Erstellen identischer Themen in mehreren unterschiedlichen Unterforen, das mehrfache oder erneute Einstellen eines bereits vorhandenen Themas, und das Posten von Beiträgen, die einzig und allein dem Zweck dienen, das entsprechende Thema in der Themenauflistung wieder weiter oben zu platzieren (sog. „Thread Pushing“). Derartige Beiträge werden restlos gelöscht. Sollte der Eindruck bei unseren Moderatoren entstehen, dass wissentlich gegen diesen Punkt verstoßen wurde, hat dies die unbegrenzte Sperrung des Accounts zur Folge.
     

  6. #6
    socke999 socke999 ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Beiträge
    122
    Entschuldigung, soll nicht wieder vorkommen ...

    Vielen Dank,Fips,

    ich habs jetzt versucht so zu machen:



    HTML-Code:
    <script language="JavaScript" src="js/slider.js"></script>
    <div class="slider" id="slider"></div>

    slide.js
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    function moverechtsunten(x,y)
    {   
        
        var maxx=(965 - 1200); // x Länge bild - x Länge .slider
        var maxy=(500-900); // y Länge bild - y Länge .slider
        
        var slider = document.getElementById('slider');
        x--;
        y--;
        alert("hier " + x+" "+y);
        if (x>maxx && y>maxy)
        {   
            slider.style.background-position = x+"px "+y+"px";  
            window.setTimeout("moverechtsunten("+x+","+y+")",200);
        }
        
    }
     
     
    window.onload=moverechtsunten(0,0);

    Jedoch ist ein etwas kompischer Fehler mit document.getElementById('slider');
    var slider = document.getElementById('slider');

    die variabel slider ist immer null und ich habe keine Ahnung wieso ....
    Geändert von socke999 (08.01.08 um 00:44 Uhr)
     

Ähnliche Themen

  1. Scriptaculous Slide-Show
    Von walle_89 im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 09.10.09, 23:17
  2. Slide Show
    Von rematrix im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 30.06.07, 11:40
  3. Bilder Slide
    Von inctube im Forum Flash Plattform
    Antworten: 8
    Letzter Beitrag: 24.03.06, 12:56
  4. Antworten: 2
    Letzter Beitrag: 12.01.05, 11:49
  5. Bilder Show --> Was stimmt hier nicht?
    Von perryrhodans im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 26.02.04, 18:21