Diashow mit Überblendeffekt

[TestFreak]

Hallo,

habe eine Diashow mit javascript und den dynamischen Filtern von MS.
http://de.selfhtml.org/dhtml/modelle/dynamische_filter.htm

Sieht ja eigentlich ganz toll aus mit dem Überblendeffekt, jedoch nur für den IE.

Gibt es sowas auch für den Firefox?

[Snafu]

Hallo!
Schau dir mal http://script.aculo.us/ an.

[TestFreak]

Hallo!
Schau dir mal http://script.aculo.us/ an.

Nicht übel, was man alles anstellen kann.
Müsste ajax sein oder?

[Snafu]

Hallo!

Nicht übel, was man alles anstellen kann.
Müsste ajax sein oder?

Nur das Ajax Zeugs, der Rest ist "normal JS" *gg*

[TestFreak]

Hallo!

Nicht übel, was man alles anstellen kann.
Müsste ajax sein oder?
Nur das Ajax Zeugs, der Rest ist "normal JS" *gg*

Habe mal den Fading Effect ausprobiert, den ich als Diashow nutzen will.
Bei größeren Bilder sieht das schlecht aus. Da ist der MS Befehl
blendTrans() wirklich besser.

Gibt es denn eine Möglichkeit eine Diashow mit Flash zu machen ohne dass man die Authoring-SW Adobe Flash benötigt?

[Snafu]

Gibt es denn eine Möglichkeit eine Diashow mit Flash zu machen ohne dass man die Authoring-SW Adobe Flash benötigt?

Nein, ausser es gibt irgendeine Seite die soetwas fertig anbietet wo man nur noch seine Bilder hochladen muss.
Ich kenne aber keine.

[Snafu]

Vl willst du aber auch http://www.huddletogether.com/projects/lightbox2/ ausprobieren?

[TestFreak]

Vl willst du aber auch http://www.huddletogether.com/projects/lightbox2/ ausprobieren?

Kann diese Bibliothek Überblendeffekte produzieren?
Auf den ersten Blick ist das eher ein Tool für eine Galerie.

Wenn du Adobe Flash hättest, würdest du es mit Flash oder Javascipt und diesen Libraries machen?

[Snafu]

Hallo!

Auf den ersten Blick ist das eher ein Tool für eine Galerie.

Ja, stimmt. Ist mir nur grad eingefallen.
Vl gibts aber bereits einen fertigen Diashow-Hack.
Gibt soviel ich weiß ein paar lightbox-Hacks.

Wenn du Adobe Flash hättest, würdest du es mit Flash oder Javascipt und diesen Libraries machen?

In Flash wärs leichter. JavaScript würd aber auch nicht schwer sein.
Wie ich es machen würde ist ja egal - abgesehen davon, dass ich mich nicht als Experte einstufen würde - du musst wissen wie du es machen solltest.
Eine Alternative für nicht JS Benutzer wäre aber löblich.
Muss man halt selber weiterklicken.

[Christian]

Hallo zusammen, habe gerade ein ähnliches Problem mit einem Skript. Es geht auch um die Überblendung von Bildern. Das Skript habe ich aus dem Netz, von dieser Seite: http://zeeohemgee.blogspot.com. Ich kann etwas HTML, bin aber absoluter Javaneuling.

Die Blendeffekte werden auf Mac und PC in FF und Opera korrekt dargestellt, nur der IE7 auf PC lässt unten einen Rand des nächsten bildes durchblitzen.
woran kann das liegen? Anbei das Skript: Wär klasse, wenn es nur ein kleiner Fehler wäre, sonst müsste ich ein anderes Skript einbauen.

Besten Dank und viele Grüße
Christian

+++

var fade_pause = 4500; //pause between fades, in milliseconds. 1000 = about one second
var fade_speed = 30;    //fading speed, smaller -> faster
var fade_images = new Array('bilder/jobs1.jpg', 'bilder/jobs1.jpg','bilder/jobs2.jpg','bilder/jobs3.jpg','bilder/jobs4.jpg','bilder/jobs5.jpg');

/*
Don't touch below this line!
-----------------------------------
*/
var aImages = new Array();
var cImage = 0;

//to avoid stupid hassle in getting the IE's
//opacity from a string like alpha(opacity=foo)
//we store it in a separate variable
var ieopacity = 100;

function init()
{
initFading();
}

function preloadFadeImages()
{
 for(var i in fade_images)
 {
  aImages[i] = new Image();
  aImages[i].src = fade_images[i];
 }
}

function initFading()
{
 var bg = document.getElementById('fade');
 var img = document.getElementById('fadeimage');

//execution should stop here if fade and fadeimage
 //dont exist or there's only one image to fade
 if(bg && img && (fade_images.length > 1))
 {
  //preload images
  preloadFadeImages();

//set opacity
  img.style.opacity = 1;
  img.style.filter = 'alpha(opacity=100)'; //for IE

//set image and w and h (IE needs them to be set)
  img.src = aImages[cImage].src;
  img.width = aImages[cImage].width;
  img.height = aImages[cImage].height;

//set background image
  cImage++;
  bg.style.backgroundImage = "url('"+aImages[cImage].src+"')";
  bg.style.width = img.width+"px";
  bg.style.height = img.height+"px";

//start!
  startFading();
 }
}

function startFading()
{
 setTimeout('doFading()',fade_speed);
}

function doFading()
{
 var d = document.getElementById('fade');
 var di = document.getElementById('fadeimage');

//check if the image is already invisible
 if(di.style.opacity != 0 && ieopacity != 0) {
  di.style.opacity -= .01;
  ieopacity--;
  di.style.filter = 'alpha(opacity='+ieopacity+')';

//continue fading
  startFading();
 }
 else {
  //the image is invisible, should change to next image

cImage++;
  if(cImage == aImages.length) {
   cImage = 0;
  }
  di.src = getImageFromCSS(d.style.backgroundImage);
  d.style.backgroundImage = "url('"+aImages[cImage].src+"')";
  di.style.opacity = 1;
  ieopacity = 100;
  di.style.filter = 'alpha(opacity='+ieopacity+')';
  setTimeout('startFading()',fade_pause);
 }

//this *should* reduce memory leaks in IE?
 d = null;
 di = null;
}

/*
 Gets the url from a string like
 url("here_is_an_url")
 or without quotes (because IE = fail)
 */
function getImageFromCSS(cssurl)
{
 if(cssurl.indexOf('"') != -1)
  return cssurl.substring((cssurl.indexOf('"')+1),cssurl.lastIndexOf('"'));
 else
  return cssurl.substring((cssurl.indexOf('(')+1),cssurl.lastIndexOf(')'));
}

[EKKi]

Mahlzeit,

Ich kann etwas HTML, bin aber absoluter Javaneuling.

Geht's um Java oder doch Javascript?

Die Blendeffekte werden auf Mac und PC in FF und Opera korrekt dargestellt, nur der IE7 auf PC lässt unten einen Rand des nächsten bildes durchblitzen.

Das klingt nach http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug@title=Box-Model-Bug des IE bzw. fehlender http://de.selfhtml.org/css/formate/box_modell.htm#browser@title=Dokumenttyp-Deklaration. Bist Du sicher, dass Dein HTML-Code valide ist?

MfG,
EKKi

[Christian]

Hi Ekki,

JavaScript meine ich. danke.
Ich teste das mal mit den Deklarationen, vielleicht reicht das schon.

beste Grüße
c

[Cybaer]

Hi,

Sieht ja eigentlich ganz toll aus mit dem Überblendeffekt, jedoch nur für den IE.
Gibt es sowas auch für den Firefox?

Auf Coding: Transparenz (Funktion um Elemente browserübergreifend transparent darzustellen) findest Du ein kleines Beispiel, um Bilder (gleicher Größe) ineinander zu überblenden.

Gruß, Cybaer