# [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?



## Worrel (16. November 2009)

*[HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

Gesehen hier:
http://muse.mu/  - rechte Spalte, dritter Block von oben.

  Da wird von einem Bild in ein anderes übergeblendet - wie funktioniert das? 


 Ähnliche Frage:
 http://www.newmodelarmy.org/

 Das Band mit Bildern oben, wie wird das gescrolled?


----------



## Mothman (16. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

ALso gibt natürlich immer mehrerer Möglichkeiten. Mit Flash oder Javascript. Mit Javascript kann ich dir in beiden Fällen weiterhelfen.

 Moment ich kram mal eben etwas alten Code zusammen und dann poste ich den hier rein.


----------



## Mothman (16. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

Also das erste (nicht mein eigenes Skript, aber ich weiß nicht mehr woher..irgendein altes Forum imo):

  Hier machst du eine Javascriptdatei raus (als Beispiel mal crossfade.js):


> var galleryId = 'gallery'; /* change this to the ID of the gallery list */
> var gallery; /* this will be the object reference to the list later on */
> var galleryImages; /* array that will hold all child elements of the list */
> var currentImage; /* keeps track of which image should currently be showing */
> ...


_
_Man...ist fast unmöglich hier Code zu posten.  

 Dann schaltet er alle Dateien in der Liste der Reieh nach durch als "crossfade".
 Die Methode ist aber schon sehr alt und ich weiß nicht, ob es mittlerweile bessere gibt. Das ist natürlich nur eine (simple) lösung dafür.

 Das Andere kommt gleich.


----------



## Mothman (16. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

So die scrollenden Bilder.
 Das ist eine von mir modifizierte Version eines Skripts. Ich habe das mit einem Lightbox-Skript  kombiniert, so dass man sogar ne schmucke Lightbx bekommt, wenn man eines der Fotos anklickt. 
 In Action kannst du das hier sehen: http://www.nageldesign-niederbayern.de/

 Also:
 Im Header bindest du das hier ein:
* <script src="js/prototype.js" type="text/javascript"></script>** <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>** <script src="js/lightbox.js" type="text/javascript"></script>* 

 Die Skripte, auf die du da verweist, bekommst du überall im Netz. Schicke sie dir aber gerne auch zu. Nur das hier posten geht definitiv NICHT.^^
 Die Skripte sind auch nur für die Lightbox. 

 Und an der Stelle, an der deine Laufleiste mit Bildern erscheinen soll, machst du foglendes Javascript rein (also mitten in eine Tabelle oder ein Div z.B.):

*<script type="text/javascript">**
**
**var sliderwidth="760px"**
**var sliderheight="145px"**
**var slidespeed=1**
**slidebgcolor="#000000"**
**
**var leftrightslide=new Array()**var finalslide=''**leftrightslide[0]='<a href="images/pictures/001.jpg" rel="lightbox" title="Studioansicht 1"><img src="images/thumbnails/001.jpg" border=1></a>'**leftrightslide[1]='<a href="images/pictures/002.jpg" rel="lightbox" title="Studioansicht 2"><img src="images/thumbnails/002.jpg" border=1></a>'**leftrightslide[2]='<a href="images/pictures/003.jpg" rel="lightbox" title="Studioansicht 3"><img src="images/thumbnails/003.jpg" border=1></a>'**
**var imagegap=" "**
**var **slideshowgap=5**
**var copyspeed=slidespeed**leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'**var iedom=document.all||document.getElementById**if (iedom)**document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')**var actualwidth=''**var cross_slide, ns_slide**
**function fillup(){**if (iedom){**cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2**cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3**cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide**actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth**cross_slide2.style.left=actualwidth+slideshowgap+"px"**}**else if (document.layers){**ns_slide=document.ns_slidemenu.document.ns_slidemenu2**ns_slide2=document.ns_slidemenu.document.ns_slidemenu3**ns_slide.document.write(leftrightslide)**ns_slide.document.close()**actualwidth=ns_slide.document.width**ns_slide2.left=actualwidth+slideshowgap**ns_slide2.document.write(leftrightslide)**ns_slide2.document.close()**}**lefttime=setInterval("slideleft()",30)**}**window.onload=fillup**
**function slideleft(){**if (iedom){**if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+)**cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"**else**cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"**
**if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+)**cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"**else**cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"**
**}**else if (document.layers){**if (ns_slide.left>(actualwidth*(-1)+)**ns_slide.left-=copyspeed**else**ns_slide.left=ns_slide2.left+actualwidth+slideshowgap**
**if (ns_slide2.left>(actualwidth*(-1)+)**ns_slide2.left-=copyspeed**else**ns_slide2.left=ns_slide.left+actualwidth+slideshowgap**}**}**
**
**if (iedom||document.layers){**with (document){**document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')**if (iedom){**write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')**write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')**write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')**write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')**write('</div></div>')**}**else if (document.layers){**write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')**write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')**write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')**write('</ilayer>')**}**document.write('</td></table>')**}**}**</script>

**Ist eigentlich selbsterklärend.
 Hier machst du die Grundeinstellungen zur Slideshow.
 Hier kommen die Bilder rein, die dann in der Lightbox gezeigt werden.
 Hier kommen die Bilder rein, die in der Slideshow angezeigt werden (können auch die gleichen sein, wie in der Lightbox, nur muss eben der Pfad stimmen).
 Hier kommt der Titel des jeweiligen Bilds rein. Der Tooltip.
 Die Lücke zwischen den einzelnen Bildern.


 Habe das jettz aber auch schon seit Ewigkeiten incht mehr angewendet, also es kann sein, dass ich jetzt was übersehen habe. Aber bei Fragen, einfach fragen.
*


----------



## Mothman (16. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

TOLL!
  Habe das alles extra schön farbig markiert und beschrieben und beim Absenden sind einfach alle Farben weg.
  Was ein Mist. Hab hier bald keine Lust mehr zu posten. Reines Glücksspiel hier.    

 EDIT:
 Ich mach mal nen ZIP mit den Beispieldateien und stelle die online. Dann kannst du dir in ca. 10 MInuten das zeug runterladen. Hier wird das ja nichts.^^


----------



## Mothman (16. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

So hier ein Beispiel mit dem Crossfade:
 http://rapidshare.com/files/307920627/crossfade.zip

 Und Hier ein Beispiel mit der Laufleiste:
 http://rapidshare.com/files/307920714/slidshow_lightbox.zip


 Musst eigentlich nur noch etwas formatieren, die Bilder anpassen und eventuell 1-3 Werte anpassen.
 Aber das Meiste davon brauchst du garnicht anschauen. Also z.B. in die JS-Dateien musst/solltest du nichts ändern, außer du weißt, was du tust.


----------



## Worrel (18. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*

Huch, ist das viel Text. ich hätte das irgendwie kürzer gedacht. 

 Danke auf jeden Fall für die Hilfe; ich probier das demnächst mal, ob das damit geht, was ich vohabe (bzw: plane erstmal, was ich denn _genau _damit vorhabe  )


----------



## Mothman (18. November 2009)

*AW: [HTML] Wechselnde Bilder mit Übergangseffekt - wie geht das?*



Worrel schrieb:


> Huch, ist das viel Text. ich hätte das irgendwie kürzer gedacht.


Ja, ist viel Text. Aber der kann dir ja egal sein. Musst du ja garnicht beachten. Das verwirrt ja nur. 
 Wichtig sind nur bestimmte Angaben und die Bilderpfade.   
 In den ZIP-Paketen liegt ja alles, was du brauchst, inkl.. leicht zu anpassbarem Beispiel. Du musst nicht jeder Zeile lesen und verstehen...macht doch keiner.


----------

