pixelspace.org

Slideshow mit Scriptaculous

Dan — Thu, 09 Jul 2009 21:05:01 +0000

Die Slideshow basiert auf Prototype sowie Scriptaculous und ermöglicht verschiedene Instanzen. Die Darstellung erfolgt über eine unsortierte Liste. Dadurch ist es möglich neben Bildern und Fotos auch anderen HTML-Code wie auch einfache Texte darzustellen.

Hier das Beispiel wie die Galerie umgesetzt ist.

Das Javascript zur Slideshow:

toggle code

```
function init() {
```
```
 
```

  var slides = document.getElementsByClassName('slide-show');

```
 
```
```
  for(i=0;i<slides.length;i++){
```
```
 
```

    var lis = $(slides[i].id).getElementsByTagName('li');

```
 
```
```
    for( j=0; j < lis.length; j++){
```
```
      if(j!=0){
```
```
        lis[j].style.display = 'none';
```
```
      }
```
```
    }
```
```
    end_li = lis.length -1;
```
```
 
```

    setTimeout(swapElements(0,0,end_li, 3000, lis), 2000);

```
  }
```
```
}
```
```
 
```

function swapElements(cur_li, start_li, end_li, delay, lis) {

```
 
```
```
  return (function() {
```

    Effect.Fade(lis[cur_li],{ duration:3, from:1.0, to:0.0 });

```
 
```
```
      if (cur_li == end_li) {
```
```
        cur_li = start_li;
```
```
      } else {
```
```
        cur_li++;
```
```
      }	
```
```
 
```

      Effect.Appear(lis[cur_li], { duration:3, from:0.0, to:1.0 });

```
 
```

      setTimeout(swapElements(cur_li,start_li,end_li,delay,lis),

```
      delay + 3000);
```
```
    }
```
```
  )
```
```
}
```
```
 
```

Event.observe(window, 'load', init, false);

Alle Elemente mit der Klassendefinition ‘slide-show‘ werden durchlaufen und für jedes Listenelement werden die Bilder nacheinander ausgewechselt.

Damit die Positionierung der Galerie bei den Überblendeffekten sichergestellt ist empfiehlt es sich, einige Anpassungen im CSS vorzunehmen.

Der CSS-Code:

toggle code

```
.slide-show li{
```
```
 
```
```
  position:absolute;
```
```
 
```
```
  list-style:none;
```
```
  display:block;
```
```
  width:200px;
```
```
  height:200px;
```
```
  overflow:hidden;
```
```
}
```

Wichtig dabei ist, dass die Listenelemente absolut positioniert werden damit sie beim wechseln eine feste Position behalten und nicht verschoben werden.

Die Ausgabe der Slideshow erfolgt, wie schon gesagt, über eine unsortierte Liste.

Der HTML-Code dafür ist folgender:

toggle code

<ul id="my_slide_show" class="slide-show">

<li><img src="1.jpg" alt="first image"/></li>

<li><img src="2.jpg" alt="second image"/></li>

<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</li>

```
</ul>
```

Da das Javascript auf alle Objekte mit der Klassendefinition ‘slide-show‘ zugreift, muss diese Angabe im HTML-Code mit der Klasse aus dem Javascript übereinstimmen.

Beispielcode herunterladen
Dateigröße: 69KB | Dateityp: .zip

LIVE DEMO

Social Bookmark Dienste

Dan — Sat, 14 Feb 2009 12:05:09 +0000

Nachdem ich neulich über twitter zu Toms neuer Seite geleitet wurde, entdeckte ich nicht nur das neue und ziemlich ansprechende Layout, sondern eine ziemlich sinnvolles Feature. Nämlich die Möglichkeit Beiträge in anderen Netzwerken zu verbreiten und Freunden zu schicken!

Wie versprochen habe ich nun auch mal etwas aufgerüstet. Nun besteht auch auf pixelspace.org die Möglichkeit, Artikel über verschiedene Social Bookmark Dienste zu speichern und Freunden zu empfehlen. Somit können die ~3 Besucher, die hier zufällig mal landen auch einen Eintrag ganz bequem weiterleiten. Bleibt nur noch das eine Problemchen mit dem Inhalt. Bislang hab ich einfach nicht die Zeit gefunden oder mir die Zeit genommen um ausführliche Einträge zu verfassen. Irgendwie komm ich mir blöd dabei vor, etwas komplett unbedeutendes zu posten.

Mal sehen wie sich das in Zukunft so entwickelt.

Kleines Update im CG Bereich

Dan — Wed, 17 Dec 2008 13:32:50 +0000

Sooo mal wieder ein kleines Update, ich hab mal das Modell eines russischen Angriffs-und Transporthelikopters hochgeladen die vorläufige Bildergalerie zur Mil-Mi 24 gibt es hier.

Kommentare und Kritik sind wie immer gern gesehen, wenn Interesse am Modell besteht, einfach bei mir melden. Derzeit komme ich leider nicht dazu es weiter zu bearbeiten.

Chicago 2008

Dan — Mon, 15 Dec 2008 15:40:13 +0000

Endlich hab ich es geschafft einige Bilder vom Aufenthalt in Chicago hochzuladen.

PHP: Link zum Twitter User generieren

Dan — Wed, 26 Nov 2008 18:45:23 +0000

Ich hab hier mal eine simple PHP-Funktion geschrieben, die es ermöglicht @user-Tags in Links umzuwandeln. Die Funktion sucht nach Zeichen die mit @ beginnen und ersetzt die Zeichenkette durch einen Link zum Twitterprofil des Nutzers. Es ist zwar nicht viel und durchaus erweiterbar aber vielleicht hilft es ja dem ein oder anderen.

toggle code

```
function parseContent($content){
```
```
  $content_array = split(' ',$content);
```
```
  $result = null;
```
```
  if(sizeof($content_array)>0){
```
```
    foreach($content_array as $str){
```

      if(preg_match("|@[a-zA-Z_0-9-]*|",$str)){

```
	$str = str_replace($str,'.
```

               substr($str,1,strlen($str)).'">'.$str.'',$str);

```
      }
```
```
      $result .= ' '.$str;
```
```
     }
```
```
   }
```
```
   return trim($result);
```
```
}
```
```
?>
```

Für Tags kann dieser Codeschinpsel ebenfalls verwendet werden, es müsste lediglich @ mit # ersetzt werden und die erlaubten Zeichen überprüft werden.

Server-Umzug

Dan — Wed, 19 Nov 2008 08:42:23 +0000

Nach einem Anbieterwechsel befinden sich diese Seiten für einige Tage im Umbau. Dadurch kann es hin und wieder zu kleinen Problemen bei der Verfügbarkeit kommen.

re:publica 09

Dan — Tue, 11 Nov 2008 14:04:20 +0000

Nach bisher zwei erfolgreichen Konferenzen wird es im April 2009 wieder hoch hergehen. Blogger, Netzbewohner und Internetexperten diskutieren über soziale Medien, digitale Gesellschaft wie auch Netzpolitik. Dabei sein lohnt sich!

“re:publica 09 – Die Konferenz über Blogs, soziale Medien und die digitale Gesellschaft”

Flash und valides XHTML

Dan — Tue, 20 May 2008 23:16:20 +0000

Nachdem ich in letzter Zeit etwas öfter mit Flash zu tun hatte, blieb die Situation natürlich nicht aus, Flash in einen XHTML valide Seite zu integrieren. Als einfaches Beispiel nehme ich mal den Code der bei Youtube.com zum Einbinden von Clips angezeigt wird:

toggle code

```
<object width="425" height="355">
```

<param name="movie" value="http://youtube.com/v/hvDDDKnNhuE"></param>

<param name="wmode" value="transparent"></param>

```
src="http://youtube.com/v/hvDDDKnNhuE"
```
```
	type="application/x-shockwave-flash"
```

	wmode="transparent" width="425" height="355"></embed>

```
</object>
```

Das – Tag jedoch ist kein Standard HTML Tag. Es muss also eine andere Lösung geben, um das Flashobjekt und validen HTML Code zu vereinen. Der Schlüssel zum Erfolg ist auch kein Geheimnis. Eine Möglichkeit stellt die bewährte Flash Satay Methode dar.

Man wirft das – Tag raus und gibt dem – Tag 2 Attribute.

Data Das attribut data benötigt die URL zur Quelle des gewünschten Flashobjektes
Also: http://youtube.com/v/hvDDDKnNhuE
Type Das Attribut type bestimmt den MIME-Typ des Objektes, in diesem Falle Flash application/x-shockwave-flash

Da es sich um eine Einbettung in XHTML 1.0 validen Code handelt, muss das – Tag als leeres Tag geschlossen werden.

Das validierte Beispiel könnte dann so aussehen:

toggle code

<object data="http://youtube.com/v/hvDDDKnNhuE"

```
	type="application/x-shockwave-flash"
```
```
	style="width:425px;height:355px;">
```
```
 
```

<param name="movie" value="http://youtube.com/v/hvDDDKnNhuE" />

```
 
```
```
</object>
```

Die Größe des Objektes kann dabei auch mit Style-Angaben gelöst werden.

Das Ergebnis ist weniger Code, welcher zudem noch valides XHTML ermöglicht.

CG: Audi Q7 Work in Progress

Dan — Thu, 09 Aug 2007 10:00:00 +0000

Ein neues Lichtsetup sowie bessere Materialen.

Den gesamten Entwicklungsstand kann man auf http://www.cg-cars.com und auf http://www.c4dboard.com/ einsehen.

CG: Transrapid

Dan — Thu, 26 Jul 2007 21:20:20 +0000

Neulich angefangen:ein CG Modell des Transrapids, ob ich es schaffe das Modell weiter zu bauen steht wohl noch nicht fest.