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
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.
toggle code
-
<?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.
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>
-
<embed src="http://youtube.com/v/hvDDDKnNhuE"
-
type="application/x-shockwave-flash"
-
wmode="transparent" width="425" height="355"></embed>
-
</object>
Das <embed> – 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 <embed> – Tag raus und gibt dem <object> – 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 <param> – 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.
Thomas Brücher und Ich haben das Projekt zur Entwicklung der Fliegerfilme im Rahmen der Vorlesung Filmgeschichte III an der Otto-von-Guericke Universität Magdeburg abgeschlossen. Zu finden ist das Projekt unter: http://fliegerfilme.pixelspace.org/
Das Projekt entstand im Rahmen des Seminars audiovisuelle Kommunikation zusammen mit Martin Goldschmidt. Projekt: http://irreversible.pixelspace.org/
