Fotos "weich" einblenden

**exact.** · 21.07.2009 18:09

Hallo!

Ich designe vor allem Pages, code sie auch so gut ich kann, bin aber in allen "besonderen" Ecken wie Flash absolut unerfahren.

Ich bin gerade bei einer neuen Homepage für meine Fotografie und möchte folgenden Effekt gerne auch auf meiner HP sehen:
Das "weiche" einblenden der Fotos (und der restlichen Page, wobei das nicht so entscheidend ist).
Klick! Beispiel!

Kann mir da jemand helfen? Arbeite bisher mit PS (Designen, dann Slicen) und Dream Weaver (so gut es geht coden).

Danke schonmal!

**ojas** · 21.07.2009 18:43

jQuery ist eine JavaScript-Bibliothek, die eine ganze Menge von Effekten und Manipulationsmöglichekeiten von DOM-Objekten unter einer einheitlichen API browserübergreifend anbietet, unter Anderem auch fadeIn()

**exact.** · 21.07.2009 19:34

Ich danke dir, das werd ich direkt mal probieren!

**exact.** · 25.08.2009 16:16

Leider ohne Erfolg.. Wie gesagt bin ich ein Anfänger in dem Gebiet!

Wenn jemand mir konkret sagen kann wo ich was einbinden muss, wäre ich äußerst dankbar.

http://www.jendrikschroeder.de/test
Hier ist der Link zu der aktuellen WIP-Page. Quellcode kann man einsehen.

edit
der gesamte mittlere Teil soll einen Fade-In bekommen!

**ojas** · 25.08.2009 18:16

Als erstes sorgst du dafür, das jQuery eingebunden wird. Dazu musst du jQuery herunterladen (http://jqueryjs.googlecode.com/files...y-1.3.2.min.js), in dein Projektverzeichnis kopieren und ein passendes script-Tag im head-Tag einbauen:

HTML-Code:

<head>
  <!-- ... --!>
  <script src="/jquery-1.3.2.min.js"></script>
</head>

Dann musst du den Bildern ein class-Attribut geben, damit du leichter auf sie zugreifen kannst. Zum Beispiel

HTML-Code:

<img height="597" border="0" width="146" class="content-column-image" src="http://www.jendrikschroeder.de/test/Bilder/v5_11.jpg" name="Image13"/>

Dann musst du die Bilder einblenden:

HTML-Code:

<head>
  <!-- ... --!>
  <script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
    $(document).ready(
      function() {
        $('.content-column-image').fadeIn(1000); /* 1000 Millisekunden */
      }
    );
  </script>
</head>

Das alles ist natürlich nicht getestet.

**exact.** · 30.08.2009 15:39

Ich möchte ja am liebsten die ganze Page "einfaden" - muss ich dann jedes Bild "gleich" beschriften?

Ich habs so mal probiert, leider ohne Erfolg. Ich bedanke mich trotzdem!

[edit - die Page ist jetzt auf http://www.jendrikschroeder.de zu finden ]

**ojas** · 30.08.2009 17:03

Zitat von exact.

Ich möchte ja am liebsten die ganze Page "einfaden" ...

Das ist natürlich viel einfacher als die Bilder einzufaden:

HTML-Code:

<head>
  <!-- ... --!>
  <script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
    $(document).ready(
      function() {
        $('body').fadeIn(1000);
      }
    );
  </script>
</head>

Zitat von exact.

- muss ich dann jedes Bild "gleich" beschriften?

Falls du mit "Beschriften" das vergeben eines class-Attributes meinst: musst du nicht, darfst du aber.

Ich empfehle dringend die Lektüre eines Buches oder ähnlicher Publikationsformen über HTML und CSS. Halte dich von sogenannten Tutorials fern, die dir Quelltext vor die Füsse werfen ohne zu erklähren was da abgeht. Soetwas wie SELFHTML sollte es schon sein.

Zitat von exact.

Ich habs so mal probiert, leider ohne Erfolg.

Ich kann dir nicht sagen, was du falsch gemacht hast. Der Quelltext der Seite sieht genau so aus wie vorher.

**exact.** · 03.09.2009 21:17

Danke dass du dir die Zeit nimmst!

Ich wollte mich demnächst sowieso mal mit HTML beschäftigen, andere Dinge gehen gerade nur leider vor..

Es funktioniert leider immer noch nicht. Ich habe den Code mal eingefügt und hochgeladen (jQuery ist im richtigen Verzeichnis aufm Server).

Zu finden auf der "Nature" Seite.

Ich hab den Fade statt 1000 auf "slow" gestellt (wie auf der jQuerypage) - ging aber auch nicht /=

**Mafin** · 10.09.2009 15:16

Javascript kann was tolles:

getElementsByTagName("img");

Damit hast du alle Bilder die den Tag-namen IMG besitzen ( ich hoffe doch sehr dass es alle sind) "eingeschlossen" damit müsste sich doch sowas realisieren lassen ohne class oder name anweisungen

Mafin

Fotos "weich" einblenden

Themen-Optionen

Fotos "weich" einblenden

Berechtigungen