Ergebnis 1 bis 4 von 4
  1. #1
    schikkiberlin ist offline Grünschnabel
    registriert
    07-07-2010
    Ort
    Berlin. mittendrin.
    Beiträge
    2

    Slideshow mit image-Rotating + fading

    Hallo allerseits!

    Vorweg: bin ein absoluter Programmier-Newbie.
    Das Erlernen der basics von Javascript u.w. steht mir erst noch bevor.
    Nu hab ich aber ein Prob., das nich so lang warten kann und wofür ich Eure Hilfe benötige.

    Ich möchte eine gefadete Bilderslideshow realisieren, mit autoplay und zusätzlichem manuellen Bildwechsel per mouseover oder click,
    wie im jquery-cycle-Beispiel "Manual and Auto Advance": http://jquery.malsup.com/cycle/int2.html

    Allerdings mit zusätzlichem besonderen Bildwechsel-Effekt:
    die DVDs sollen bei Bildwechsel einmal um mind. 720 deg. rotieren, dabei ausfaden, während das neue sich dabei ebenso drehend einfadet.
    (Flash/Actionscript wäre für diese Geschichte zwar prädestinierter, aber wg. iPhone-Unverträglichkeit hinfällig)

    Das mit dem Rotieren hab ich bereits in zwei Varianten hier:
    http://www.cape-red.net/demo/index.html
    modifiziert vorbereitet.
    Einmal mit der auf raphael basierenden Version von Dmitry Baranovskiy und sep. Button http://raphaeljs.com/
    und animationstechnisch schöner weil mit ease-Effekt von Wilq32 (dziękuję nach Breslau!)
    http://wilq32.adobeair.pl/jQueryRota...eryRotate.html

    ...nu müssten die Funktionen aus den Scripten kombiniert werden, wobei ich aber noch jämmerlich versagen tu...

    Kann mir hierbei jmd. auf die Sprünge helfen?
    Würde mich -passenderweise- auch gern mit einer originalen Film-DVD aus dem Programm von www.capelight.de revanchieren...

    Gruß aus Berlin,
    Andreas

  2. #2
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Slideshow mit image-Rotating + fading

    Zitat Zitat von schikkiberlin Beitrag anzeigen
    Kann mir hierbei jmd. auf die Sprünge helfen?
    Wie sollen wir das machen?

  3. #3
    schikkiberlin ist offline Grünschnabel
    registriert
    07-07-2010
    Ort
    Berlin. mittendrin.
    Beiträge
    2

    AW: Slideshow mit image-Rotating + fading

    :-) ja, die naiven Grünschnäbel...
    Trotz noch fehlenden Basiswissens, probier ich natürlich selber rum und habe hier dieses jquery-bezogene script:

    $(document).ready(function() {

    //Slideshow ausführen
    slideShow();

    });

    function slideShow() {

    //Deckkraft aller Bilder auf 0 setzen
    $('#gallerie a').css({opacity: 0.0});

    //Erste Bild ansprechen und Deckkraft auf 100 setzen
    $('#gallerie a:first').css({opacity: 1.0});

    //Info-Text-Hintergrund auf Deckkraft 20% setzen
    $('#gallerie .caption').css({opacity: 0.2});

    //Info-Text-Breite an Bildbreite anpassend
    $('#gallerie .caption').css({width: $('#gallerie a').find('img').css('width')});

    //Info-Text für das erste Bild über rel-Attribut sichtbar machen
    $('#gallerie .content').html($('#gallerie a:first').find('img').attr('rel'))
    .animate({opacity: 0.5}, 500);

    //gallerie-Funktion aufrufen und Bildwechsel-Intervall in MilliSekunden setzen
    setInterval('gallerie()',6000);

    }

    function gallerie() {

    //wenn Bilder ohne .show-Klasse, das erste Bilder anzeigen
    var current = ($('#gallerie a.show')? $('#gallerie a.show') : $('#gallerie a:first'));

    //bei Ende geh zum Anfang, erstes Bild
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallerie a:first') :current.next()) : $('#gallerie a:first'));

    //nächste Text-Info finden
    var caption = next.find('img').attr('rel');

    //nächstes Bild einfaden und .show-Klasse hinzufügen, die einen höheren z-Index hat
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //aktuelles Bild ausblenden, Deckkraft auf 0 setzen
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

    //Text-Info-Deckkraft auf 0 und -Höhe auf 1px setzen
    $('#gallerie .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

    //Text-Info-Hintergrund animiert anzeigen, durch Deckkraft auf 70% und Höhe auf 35px
    $('#gallerie .caption').animate({opacity: 0.7},100 ).animate({height: '35px'},500 );

    //Text-Info-Inhalt (den eigentlichen Info-Text) anzeigen
    $('#gallerie .content').html(caption);

    }

    Jetzt meine konkrete Frage:
    Wie lässt sich die rotate-Funktion hier (zum script von http://wilq32.adobeair.pl/jQueryRota...yRotate.html):

    <script type="text/javascript">
    $(document).ready(function()
    {
    $('#image1').rotate({angle:0,
    bind:
    [
    {"mouseover":function(){$(this).rotateAnimation(1440);}},
    {"mouseout":function(){$(this).rotateAnimation(-360);}}
    ]
    });
    });
    </script>

    ohne mouseover-Funktion, sondern gleichzeitig als autoplay mit dem Ein- und/oder Ausfaden in das obige slideshow-script integrieren??

    Die demo-Seite der slideshow, ohne Dreh-/rotate-Effekt:
    http://www.cape-red.net/demo/index.html

    Vielen Dank für die Hilfe!!!

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.646

    AW: Slideshow mit image-Rotating + fading

    überhaupt nicht - ist vielleicht übertrieben, jedenfalls ist es keine reine kombination 2er scripte.
    du musst in das rotate-script die funktionalität des fadens einbringen.

Ähnliche Themen

  1. Antworten: 9
    Letzter Beitrag: 17-11-2010, 21:15
  2. slideshow bei background-image:url(/image.jpg)
    Von sascha_kote im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 10-09-2008, 19:28
  3. Image Slideshow
    Von mareike77 im Forum JavaScript
    Antworten: 17
    Letzter Beitrag: 24-06-2005, 20:50
  4. Antworten: 1
    Letzter Beitrag: 04-07-2001, 09:22
  5. rotating
    Von rendy im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 06-03-2001, 12:35

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •