Bild in Bild überblenden

mentalman · 16.05.2011, 23:42

Hallo,

ich lasse mit PHP je nach aufgerufener Seite ein anderes Bild anzeigen, und zwar so:

Code:

switch ($_GET['p']) {
   case 1:
   echo "<img id=\"bgimg\" src=\"img/bg_1.jpg\" name=\"bg\">";
   break;
   case 2:
   echo "<img id=\"bgimg\" src=\"img/bg_2.jpg\" name=\"bg\">";
   break;
   default:
   echo "<img id=\"bgimg\" src=\"img/bg_1.jpg\" name=\"bg\">";
   break;
}

Diese Bilder haben jeweils per CSS eine Opacity von 0 und werden nicht einfach angezeigt, sondern per JS langsam eingeblendet.

Mein Problem ist nun, dass, jedesmal wenn man auf eine der verfügbaren Seiten kommt, das Bild zwar eingeblendet wird, aber natürlich vor schwarz, und nicht vor dem vorherigen Hintergrundbild. Ist ja auch klar, denn das vorherige Hintergrundbild gibt es ja nicht mehr. Jedenfalls hat das einen unschönen "Sprung" zur Folge.
Ich hätte es aber gerne so, dass das neue Bild über dem bestehenden Bild eingeblendet wird.

Wer den bestehenden JS Code sehen möchte, ich kann ihn dann hier noch posten.
Ich weiss, dass es wahrscheinlich tausend Möglichkeiten gibt, Bilder per JS ineinander zu überblenden. Aber den, den ich hier benutze, ist tatsächlich recht simpel und hat auch direkt funktioniert, vor allem auch ohne zu ruckeln!

Ich denke, ich brauche eine Art Puffer, in den der Dateiname des vorherigen Bildes geschrieben wird, damit es auf der neuen Seite "hinter" dem neuen Bild angezeigt werden kann, bevor das neue Bild dann eingeblendet wird.

Hoffe, ihr habt verstanden, was ich meine!?
Danke schonmal!

nikosch · 16.05.2011, 23:44

Ja und nun?

mentalman · 16.05.2011, 23:47

Zitat:

Zitat von nikosch

Ja und nun?

Ein Lösungsansatz wäre nett.

Wäre es beispielsweise sehr unelegant, per HTTP_REFERER auf die aufrufende Seite und damit auf das dort eingesetzte Hintergrundbild zu schließen?

rudygotya · 17.05.2011, 01:32

Das hier könnte dir weiterhelfen:
http://stackoverflow.com/questions/9...-images-loaded

Um die Seiten per Ajax/Hashtag (mit vor-/zurück-Funktionalität) zu laden, kannst du dir das BBQ-Plugin ansehen.

Grüße Basti

edit: keine halbe Stunde alt, grade im IRC mitgelauscht: jquery ajax hooks (vom autor des jquery ajax moduls)

mentalman · 17.05.2011, 11:20

Zitat:

Zitat von rudygotya

Um die Seiten per Ajax/Hashtag (mit vor-/zurück-Funktionalität) zu laden, kannst du dir das BBQ-Plugin ansehen.

Grüße Basti

Hi Basti,

danke für die Antwort!
Habs jetzt erstmal per HTTP_REFERER gelöst, das klappt auch sehr gut! Ist zwar vielleicht etwas unkonventionell, aber es geht.

Eine "echte" vor-/zurück Geschichte ist das bei mir ja nicht, die Seiten können aus dem Menü wahllos aufgerufen werden.
Wenn kein Referer übertragen wird, überblenden die Bilder auch nicht, sondern werden einfach direkt angezeigt.
Ist zwar nicht ganz so schön, aber für diesen Notfall reichts!

nikosch · 22.05.2011, 00:35

Du könntest z.B. in der Session die letzte aktive Seite speichern.

mentalman · 22.05.2011, 13:48

Zitat:

Zitat von nikosch

Du könntest z.B. in der Session die letzte aktive Seite speichern.

Ja, hatte ich auch überlegt!
Werde ich wohl auch noch umbauen.
Wie schwierig ist es denn für den Durchschnittsuser, den Referrer zu unterdrücken?
Können das auch Antivieren- und Sicherheitsprogramme?

rudygotya · 23.05.2011, 01:24

https://addons.mozilla.org/en-US/fir...on/no-referer/
=> nicht schwer, wird aber der Durchschnittsuser nicht installiert haben.

Hier noch paar Anregungen:

Zitat:

Diese Bilder haben jeweils per CSS eine Opacity von 0 und werden nicht einfach angezeigt, sondern per JS langsam eingeblendet.

Modernizr integrieren, javascript nur als Fallback, wenn keine css transitions möglich sind.

Zitat:

Eine "echte" vor-/zurück Geschichte ist das bei mir ja nicht, die Seiten können aus dem Menü wahllos aufgerufen werden.

Sofern das alles auf der gleichen Domain ist, kannst du BBQ (sprich ajax + hashtags + ecma5 history api) verwenden. Alles andere lässt du unangetastet.

Wenn du die ajaxHooks integrierst, kannst du z.B. alle Bilder prefetchen und erst dann das Cyclen anfangen, a la:

PHP-Code:

  $.extend( $, {
    getImage : function ( url, callback ) {
        return jQuery.get(url, null, callback, "img");
    }
);

$.when.apply( 
    $, [ $.getImage("image1.jpg" ), $.getImage("image2.jpg"),$.getImage("image3.jpg") ]
)
.then(
    // alle Bilder fertig geladen - synchronisierte ajax calls
    // [ array an callbacks ] oder eine anonyme function oder ein Funktionsname
)
.fail(
    // on Error
);

Eventuell hab ich dich ja jetzt dein Interesse geweckt

Grüße Basti

ChrisB · 23.05.2011, 01:31

Zitat:

Zitat von rudygotya

https://addons.mozilla.org/en-US/fir...on/no-referer/
=> nicht schwer, wird aber der Durchschnittsuser nicht installiert haben.

about:config braucht er nicht mal „installieren“.

http://kb.mozillazine.org/Network.ht...dRefererHeader

mquadrat · 23.05.2011, 14:18

Das in der Session ablegen würde ich mir nochmal überlegen. Ich persönlich habe meist mehrere Tabs mit der gleichen Webseite offen. Das gibt dann immer sehr seltsame Effekte, wenn sich der Entwickler drauf verlässt, dass nur ein Tab/Fenster angezeigt wird.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
imagecreatefromjpeg() "Allowed memory size exhausted"	peter silie	PHP Tipps 2010	17	04.05.2011 14:25
[Erledigt] Bild ausgeben solange das Script läuft	favo	PHP-Fortgeschrittene	6	17.09.2010 13:34
[Erledigt] Bild erstellen, speichern und gespeichertes Bild anzeigen	Garog	PHP Tipps 2009	26	11.07.2010 18:01
daten und bild in die DB und ausgeben	Crimson007	PHP Tipps 2010	16	14.04.2010 00:00
[GELÖST] Bild in die Datenbank einspielen	Timmbow	Datenbanken	15	16.01.2010 19:45
[Erledigt] bild wird nicht gespeichert, finde fehler nicht	Kay654	PHP Tipps 2009	4	24.12.2009 07:52
Bildeffekte berechnen (Bild in den Hintergrund anschregen)	Frank	PHP-Fortgeschrittene	2	28.11.2009 02:20
Bild in enuem Fenster öffnen?	K3HLIM	JavaScript, Ajax und mehr	6	10.04.2009 20:43
[Erledigt] bild als link mit mouseover ohne zeilenumbruch	SteiniKeule	HTML, Usability und Barrierefreiheit	12	30.10.2008 21:12
Bild onMouseOver einblenden	rocco	HTML, Usability und Barrierefreiheit	8	22.02.2008 12:52
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30

16.05.2011, 23:42
mentalman Erfahrener Benutzer Registriert seit: 07.07.2010 Beiträge: 231 PHP-Kenntnisse: Anfänger	Bild in Bild überblenden Hallo, ich lasse mit PHP je nach aufgerufener Seite ein anderes Bild anzeigen, und zwar so: Code: switch ($_GET['p']) { case 1: echo "<img id=\"bgimg\" src=\"img/bg_1.jpg\" name=\"bg\">"; break; case 2: echo "<img id=\"bgimg\" src=\"img/bg_2.jpg\" name=\"bg\">"; break; default: echo "<img id=\"bgimg\" src=\"img/bg_1.jpg\" name=\"bg\">"; break; } Diese Bilder haben jeweils per CSS eine Opacity von 0 und werden nicht einfach angezeigt, sondern per JS langsam eingeblendet. Mein Problem ist nun, dass, jedesmal wenn man auf eine der verfügbaren Seiten kommt, das Bild zwar eingeblendet wird, aber natürlich vor schwarz, und nicht vor dem vorherigen Hintergrundbild. Ist ja auch klar, denn das vorherige Hintergrundbild gibt es ja nicht mehr. Jedenfalls hat das einen unschönen "Sprung" zur Folge. Ich hätte es aber gerne so, dass das neue Bild über dem bestehenden Bild eingeblendet wird. Wer den bestehenden JS Code sehen möchte, ich kann ihn dann hier noch posten. Ich weiss, dass es wahrscheinlich tausend Möglichkeiten gibt, Bilder per JS ineinander zu überblenden. Aber den, den ich hier benutze, ist tatsächlich recht simpel und hat auch direkt funktioniert, vor allem auch ohne zu ruckeln! Ich denke, ich brauche eine Art Puffer, in den der Dateiname des vorherigen Bildes geschrieben wird, damit es auf der neuen Seite "hinter" dem neuen Bild angezeigt werden kann, bevor das neue Bild dann eingeblendet wird. Hoffe, ihr habt verstanden, was ich meine!? Danke schonmal!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.05.2011, 23:44
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ja und nun? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.05.2011, 01:32
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Das hier könnte dir weiterhelfen: http://stackoverflow.com/questions/9...-images-loaded Um die Seiten per Ajax/Hashtag (mit vor-/zurück-Funktionalität) zu laden, kannst du dir das BBQ-Plugin ansehen. Grüße Basti edit: keine halbe Stunde alt, grade im IRC mitgelauscht: jquery ajax hooks (vom autor des jquery ajax moduls) __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog Geändert von rudygotya (17.05.2011 um 01:40 Uhr).

22.05.2011, 00:35
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Du könntest z.B. in der Session die letzte aktive Seite speichern. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

23.05.2011, 14:18
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Das in der Session ablegen würde ich mir nochmal überlegen. Ich persönlich habe meist mehrere Tabs mit der gleichen Webseite offen. Das gibt dann immer sehr seltsame Effekte, wenn sich der Entwickler drauf verlässt, dass nur ein Tab/Fenster angezeigt wird. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de