pixelspace.org

Slideshow mit Scriptaculous

Webentwicklung | 1 Kommentar Donnerstag, 9. Juli 2009

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:

```
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:

```
.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:

<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

share and enjoy

Social Bookmark Dienste

Allgemein | Kommentare deaktiviert Samstag, 14. Februar 2009

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.

share and enjoy

Kleines Update im CG Bereich

Computergraphik | Keine Kommentare Mittwoch, 17. Dezember 2008

Sooo mal wieder ein kleines Update, ich hab mal das Modell eines russischen Angriffs-und Transporthelikopters hochgeladen die vorläufige Bildergalerie zur Mi-Mil 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.

share and enjoy

Chicago 2008

Allgemein | 2 Kommentare Montag, 15. Dezember 2008

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

share and enjoy

PHP: Link zum Twitter User generieren

Webentwicklung | Keine Kommentare Mittwoch, 26. November 2008

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.

```
<?php
```
```
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,'<a href="http://twitter.com/' .

               substr($str,1,strlen($str)).'">'.$str.'</a>',$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.

share and enjoy

pixelspace.org

Slideshow mit Scriptaculous

Social Bookmark Dienste

Kleines Update im CG Bereich

Chicago 2008

PHP: Link zum Twitter User generieren

Blogroll

Communities

Recent Tweets

Recent Bookmarks