Du bist nicht angemeldet. [Anmelden]
Optionen
Thema bewerten
Diashow von Bildern auf HP? - #2042804 - 19.07.2010, 15:37:47
das letzte Einhorn5
Nicht registriert


Kann man auf seiner HP irgendwie Bilder als Diashow ablaufen lassen? Ich meine Pic´s, die man aus dem Internet in seine Hp Eingefügt hat, oder in die Richtung?

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2042816 - 19.07.2010, 16:00:20
lutz39
​Innovationsbremse

Registriert: 08.04.2003
Beiträge: 12.908
Ort: Dresden
erstelle einfach eine Slideshow und setze binde diese in deine HP ein.
Tante Google schlägt zum Beispiel dazu diese Seite vor:
http://www.imageloop.com/de/setuplooop.htm

ansonsten in/mit Google nach Slideshow suchen.
_________________________
Hilf & sei nett zu allen. Versuche es wenigstens ;-)
Problem gelöst, bitte Rückmeldung damit andere auch davon profitieren. Beitrag wieder öffnen -> /m ...

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: lutz39] - #2042960 - 19.07.2010, 19:32:15
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Oder so:
Warnung! Spoiler!
Html:
   <style>
            body { background: #111 }
            #MeineBilder { position:relative; height:332px; width:500px; margin: 8em auto; }
            #MeineBilder img { position:absolute; left:0; top:0; }  
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   
        <div id="MeineBilder">
            <img src="random rotate/img/01_colosseum.png" alt="01 Colosseum" class="active">
            <img src="random rotate/img/02_vatican.png" alt="02 Vatican">
            <img src="random rotate/img/03_forum_romanum.png" alt="03 Forum Romanum">
            <img src="random rotate/img/04_fiat_500.png" alt="04 Fiat 500">
            <img src="random rotate/img/06_venetian_gondolas.png" alt="06 Venetian Gondolas">
            <img src="random rotate/img/07_pizza.png" alt="07 Pizza">
            <img src="random rotate/img/08_pool.png" alt="08 Pool">
            <img src="random rotate/img/09_florence.png" alt="09 Florence">
            <img src="random rotate/img/10_tower_of_pisa.png" alt="10 Tower Of Pisa">
        </div>
        
        <script>
            $(function(){
                $('#MeineBilder img:gt(0)').hide();
                setInterval(function(){$('#MeineBilder :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('#MeineBilder');}, 5000);
            });
        </script>

Demo: Klick mich

Original: Snook.ca: Simple Slideshow

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: huendchen] - #2043322 - 20.07.2010, 13:09:51
das letzte Einhorn5
Nicht registriert


Da komm ich nicht so mit klar, du müsstest mir genau erklären, wie ich das Einbaue (wo ich die namen der Bildadateien hin mache, wo der Ordnername hinkommt, usw.)!

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2043338 - 20.07.2010, 13:30:03
das letzte Einhorn5
Nicht registriert


hab die antwort von lutz39 genutzt, da ich mit deiner nicht klar kam!

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: huendchen] - #2043959 - 21.07.2010, 10:46:46
x Swinq <> Swinq x
Nicht registriert


Antwort auf: huendchen
Oder so:
Warnung! Spoiler!
Html:
   <style>
            body { background: #111 }
            #MeineBilder { position:relative; height:332px; width:500px; margin: 8em auto; }
            #MeineBilder img { position:absolute; left:0; top:0; }  
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   
        <div id="MeineBilder">
            <img src="random rotate/img/01_colosseum.png" alt="01 Colosseum" class="active">
            <img src="random rotate/img/02_vatican.png" alt="02 Vatican">
            <img src="random rotate/img/03_forum_romanum.png" alt="03 Forum Romanum">
            <img src="random rotate/img/04_fiat_500.png" alt="04 Fiat 500">
            <img src="random rotate/img/06_venetian_gondolas.png" alt="06 Venetian Gondolas">
            <img src="random rotate/img/07_pizza.png" alt="07 Pizza">
            <img src="random rotate/img/08_pool.png" alt="08 Pool">
            <img src="random rotate/img/09_florence.png" alt="09 Florence">
            <img src="random rotate/img/10_tower_of_pisa.png" alt="10 Tower Of Pisa">
        </div>
        
        <script>
            $(function(){
                $('#MeineBilder img:gt(0)').hide();
                setInterval(function(){$('#MeineBilder :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('#MeineBilder');}, 5000);
            });
        </script>

Demo: Klick mich

Original: Snook.ca: Simple Slideshow


Kannst den armen Burschen hier doch kein jQuery vor die Füße werfen. :-D

@ TE: Der gespoilerte Text ist nicht schwer zu verstehen.. Man sollte nur ein bisschen Englisch können (z.B Fade's) und ein bisschen HTML beherrschen. :-)

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2044182 - 21.07.2010, 15:20:20
Scnappi
Nicht registriert


x Swinq <> Swinq x der Code ist mit jQuery wohl wesentlich einfacher und kürzer als wenn man das mit einem "normalen" JavaScript machen würde. Und der Kommentar "man muss HTML können", bringt der TE wohl auch nicht allzu viel. ;-)

Den Code zum einbauen einfach so kopieren, wie huendchen ihn reingestellt hat (evtl. Leerzeichen und Umbrüche wegmachen). Dann geht es daran, diesen Teil zu bearbeiten:
Html:
        <div id="MeineBilder">
            <img src="random rotate/img/01_colosseum.png" alt="01 Colosseum" class="active">
            <img src="random rotate/img/02_vatican.png" alt="02 Vatican">
            <img src="random rotate/img/03_forum_romanum.png" alt="03 Forum Romanum">
            <img src="random rotate/img/04_fiat_500.png" alt="04 Fiat 500">
            <img src="random rotate/img/06_venetian_gondolas.png" alt="06 Venetian Gondolas">
            <img src="random rotate/img/07_pizza.png" alt="07 Pizza">
            <img src="random rotate/img/08_pool.png" alt="08 Pool">
            <img src="random rotate/img/09_florence.png" alt="09 Florence">
            <img src="random rotate/img/10_tower_of_pisa.png" alt="10 Tower Of Pisa">
        </div>

Einfach nach folgendem Muster:

Html:
        <div id="MeineBilder">
            <img src="BILD-DIREKTLINK" alt="BESCHREIBUNG" class="active">
            <img src="BILD-DIREKTLINK" alt="BESCHREIBUNG">
            <img src="BILD-DIREKTLINK" alt="BESCHREIBUNG">
            <img src="BILD-DIREKTLINK" alt="BESCHREIBUNG">
            ...
        </div>

"BILD-DIREKTLINK" ersetzt du bit dem Direktlink zum Bild (im Firefox Rechtsklick auf das Bild und dann "Grafikadresse kopieren"). BESCHREIBUNG ersetzt du durch eine Beschreibung des Bildes, die angezeigt wird, wenn das Bild mal nicht geladen werden kann.

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2045198 - 22.07.2010, 20:57:01
das letzte Einhorn5
Nicht registriert


Bei mir werden sie nur untereinander angezeigt!

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2045245 - 22.07.2010, 21:46:10
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Genau so kopieren und auch genau so einsetzen:
Warnung! Spoiler!
Html:
<style><!--
   #MeineBilder { position:relative; height:502px; width:500px; margin: 0 auto; }
   #MeineBilder img { position:absolute; left:0; top:0; }
   #MeineBilder br { display: none }
--></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="MeineBilder"><img src="http://is3.myvideo.de/de/movie15/22/thumbs/5459355_1.jpg" alt="Einhorn am See"><img src="http://baumanngraphik.de/bilder/filmplakate_m/das_letzte_einhorn.jpg" alt="Plakat meines Lieblingsfilmes"><img src="http://www.schrift-art.net/image/autoren/beagle.peter.s/beagle_-_das_letzte_einhorn_und_zwei_herzen_-_cover_large.jpg" alt="Cover meines Lieblingsbuches"><img src="http://is2.myvideo.de/de/movies/ca/thumbs/2997042_1.jpg" alt="Die hauptfigur meines Lieblingsfilmes"><img src="http://www.ds-dan.de/images/product_images/info_images/1186_0.jpg" alt="Mein Lieblingsfabeltier"></div>
<script><!--
   $(function(){
      $('#MeineBilder img:gt(0)').hide();
      setInterval(function(){$('#MeineBilder :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('#MeineBilder');}, 5000);
   });
--></script>

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: huendchen] - #2048217 - 27.07.2010, 12:13:06
das letzte Einhorn5
Nicht registriert


Danke, das klappt. Danke, dass du schon einige Bilder eingefügt hast. Ich mach noch einige dazu! Hab heute ja den ganzen Tag zeit!

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2048249 - 27.07.2010, 12:57:53
das letzte Einhorn5
Nicht registriert


Habs geschafft. Seht es euch mal an:

Meine HP

Ihr müsst ziehmlich weit runterscrollen. Die diashow befindet sich direkt über dem Bereich "Zitate aus DLE". wenn jemand weis, wie ich die Beschreibungen (das hinter alt in dem Code) bei der Diashow sichtbar mache, bitte melden!

Ach, woher hast du eigentlich die Links zu den Bildern, die ich auf der HP angab, erhalten?
Das fänd ich interessant zu wissen!

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2049132 - 28.07.2010, 12:14:09
das letzte Einhorn5
Nicht registriert


Kann man auch irgendwie die Einblendezeit der einzelnen Bilder verlängern?

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: huendchen] - #2049509 - 28.07.2010, 21:12:33
markup
Nicht registriert


Hallo, das letzte Einhorn5.

Im Spoiler befindet sich das Javascriptcodegerüst, welches dir erklärt, welche Änderungen du vornehmen muss, um dein gewünschtes Ergebnis zu erreichen.

Warnung! Spoiler! (Javascriptcodegerüst)
Html:
<script type="text/javascript">
<!--
   $(function(){
      $('#MeineBilder img:gt(0)').hide();
      setInterval(function(){$('#MeineBilder :first-child').fadeOut(ZEIT IN SEKUNDEN FÜR DAS AUSBLENDEN).next('img').fadeIn(ZEIT IN SEKUNDEN FÜR DAS EINBLENDEN).end().appendTo('#MeineBilder');}, GESAMTZEIT); 
   });
--></script>


markup.

[zum Seitenanfang]  
Re: Diashow von Bildern auf HP? [Re: ] - #2068769 - 21.08.2010, 14:18:41
das letzte Einhorn5
Nicht registriert


Danke!

[zum Seitenanfang]