Weltgestalten » Theater - Kommunikation - Fotografie - Mediengestaltung

Eingetragen am 08.12.2011 - 16:08 von romansta (67)

Screenshot der Webseite:

Beschreibung der Webseite:

Am kompliziertesten gestaltete sich die Picasa-Einbindung, die leider noch nicht mit CCK und Views realisiert ist. Zusätzlich wurde für die Darstellung viel mit Javascript gearbeitet.

Im Kommentar finden sich einige der Scripte.

URL der Webseite:

http://www.welt-gestalten.de

Eingesetzte Core-Module:

Path, Menu,

Eingesetzte Nicht-Core-Module:

Wurden eigene Module entwickelt oder vorhandene erweitert?

Erläuterung zu eigenen Modulen bzw. zu Erweiterungen:

Kategorien

Medien & Informationen, Kunst & Kultur, Firmen Webseite, Drupal 6.x,

Deine Bewertung:

Bewertung: 6 (4 Votes)

Anmelden oder Registrieren um Kommentare zu schreiben

Wow !

Eingetragen von sepp68 (444)
am 08.12.2011 - 22:25 Uhr

eine echt tolle, moderne Seite.

Zwei Sachen interessieren mich:

das "weiche" Einblenden der Seiten und
die Bilder-Gallery.

Welche Skripte benutzt du da ?

Danke

Anmelden oder Registrieren um Kommentare zu schreiben

Danke fürs Lob. Hier die

Eingetragen von romansta (67)
am 11.12.2011 - 13:10 Uhr

Danke fürs Lob.

Hier die Scripte für die Seitenübergänge. Die Idee war, einerseits die gefühlte Wartezeit für den Besucher zu verkürzen, andererseits das "blitzartige" Erscheinen von Inhalten erträglicher zu gestalten.

Das weiche Ausblenden betrifft nur den eigentlichen Inhalt - Header und Footer bleiben stehen.
Mit der Animate-Funktion wird die Seite immer sanft nach oben gescrollt.

  window.onbeforeunload = function(){
   $("#main-content").fadeTo(500, 0);
   $("#content-top").fadeTo(500, 0);
   $("#footer").fadeTo(500, 0);
   $("#block-block-3").fadeTo(500, 0);
   $('html, body').animate({scrollTop:0}, 1000);
 }

Das weiche Einblenden funktioniert genauso, nur das es mittels window.onload geladen wird. Durch unterschiedliche Zeiten "rollt" der Inhalt quasi rein.
Mittels der Klasse front ist beim Laden der Startseite eine längere Dauer eingebaut, da hier der Code das erste Mal in den Cache geladen wird. (Setzt natürlich voraus, dass die Besucher immer über die Startseite kommen...)

  window.onload = function(){
   $(".not-front #content-top").fadeTo(400, 1);
   $(".not-front #main-content").fadeTo(600, 1);
   $(".not-front #footer").fadeTo(1500, 1);
   $(".not-front #block-block-3").fadeTo(2000, 1);

   $(".front #page").fadeTo(500, 1);
   $(".front #content-top").fadeTo(1000, 1);
   $(".front #main-content").fadeTo(1500, 1);
   $(".front #block-block-13").fadeTo(2000, 1);
   $(".front #block-block-4").fadeTo(2500, 1);
   $(".front #block-block-3").fadeTo(3000, 1);
   $(".front #footer").fadeTo(3000, 1);
 }

Hier die Scripte für die Bilder.
Die Bilder liegen in voller Vorschaugröße in 2 div's von 186x186, wo sie mittels overflow:hidden beschnitten werden. Das innere div (.photo) wird dann animiert.

Ziel war, die Bilder beim Vergrößern mittig über dem Rahmen zu platzieren. Die Schwierigkeit bestand darin, die Höhe/Breite der Bilder zu ermitteln, da diese durch Picasa nicht im Quellcode übermittelt werden.
Lösung siehe Code - das Script funktioniert mit allen Bildformaten :-)

Details im Code.

    $('.photo').hover(function(){ 
      $(this).css({'z-index' : '10'}); //der Container des Bildes wird über alle anderen gelegt
      $("#block-picasa-photo-teaser").find("img").fadeTo(200, 0.4);  // alle Bilder werden etwas blasser, 
      $(this).find("img").fadeTo(100, 1); // außer dem aktuellen Bild 
      $(this).find("img").css({'z-index' : '11','box-shadow' : '0 0 10px #555555','background' : 'none #ffffff','border' : '1px solid #cccccc','border-radius' : '7px 7px 7px 7px','padding' : '10px','margin' : '10px','opacity' : '1'}); // äußeres Styling des Bildes 
      imgHeight = $(this).find("img").outerHeight(); //Bildhöhe wird ermittelt
      imgHeight = imgHeight+34; //plus zweimal box-shadow und padding
      marginT = -((imgHeight-200)/2); // Mittelpunkt wird ermittelt - die 200 ergibt sich aus dem Rahmen (186px + padding) 
      imgWidth = $(this).find("img").outerWidth();
      imgWidth = imgWidth+34;
      marginL = -((imgWidth-200)/2);
      $(this).addClass('hover').stop() //und jetzt wird das Bild zu seiner vollen Größe ausgefahren
	    .animate({
		  width:imgWidth,
		  height:imgHeight,
		  marginTop: marginT,
		  marginLeft: marginL //WICHTIG: bei der letzten Zeile kein Komma
            }, 200);
    }, function() { //hier wird es wieder an die ursprüngliche Position gebracht
      $(this).find("img").css({'z-index' : '0','box-shadow' : '0 0 0','background' : 'none','border' : '0','border-radius' : '0','padding' : '0','margin' : '0'});
      $(this).removeClass('hover').stop()
            .animate({
		  width:'186',
		  height:'186',
		  marginLeft:'0',
                  marginTop:'0'
            }, 300); 
      $(this).css({'z-index' : '0'});
    });

Hoffe, das ist einigermaßen verständlich.

Anmelden oder Registrieren um Kommentare zu schreiben

wla	9461
stBorchert	6003
quiptime	4972
Tobias Bähr	4019
bv	3924
ronald	3857
md	3717
Thoor	3678
Alexander Langer	3416
Exterior	2903

Weltgestalten » Theater - Kommunikation - Fotografie - Mediengestaltung