Page 1 of 2
Mini SlideShow mit Bilder Spezial
Posted: Fri 25. Apr 2008, 14:51
by defect
Hy All,
hab ma mit Bilder Spezial ne kleine Slideshow gebastelt, basierend auf:
http://slayeroffice.com/code/imageCrossFade/xfade2.html
TPL
Code: Select all
<!--IMAGES_HEADER_START//-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<div id="imageContainer">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
[ZOOM]<a href="{IMAGE_ABS}" {LIGHTBOX_CAPTION}target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" /></a>
[/ZOOM][ZOOM_ELSE]
[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" />[IMAGE_URL]</a>[/IMAGE_URL]
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
</div>
[PHP]
$GLOBALS['block']['css']['slider'] = 'specific/xfade2_o.css';
$GLOBALS['block']['css']['slider'] = 'specific/xfade2.css';
$GLOBALS['block']['custom_htmlhead']['slider'] = ' <script type="text/javascript">
<!--
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
} //-->
</script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->
xfade2.css
Code: Select all
#imageContainer {
height:309px;
}
#imageContainer img {
display:none;
position:absolute;
}
xfade2_o.css
Code: Select all
#imageContainer {
position:relative;
margin:auto;
width:500px;
border:1px solid #000;
}
/* styles unrelated to the application follow */
h1 {
position:relative;
font:1em verdana;
}
.copy {
width:500px;
margin:auto;
position:relative;
font:0.9em verdana;
}
#so_credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
}
#so_credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
Ich denk ma man kann das auch alles in 1 Stylesheet packen, habs jetzt nur ma vom Original übernommen.
Viel Spass! Hoffe ihr könnt was damit anfangen...
Cheers Chrischan
Re: Mini SlideShow mit Bilder Spezial
Posted: Tue 13. Jan 2009, 13:02
by top
Ich bin zu doof...
Kann mir mal jemand erklären, wie ich das Teil jetzt am geschicktesten einbinde?
Re: Mini SlideShow mit Bilder Spezial
Posted: Tue 13. Jan 2009, 13:44
by juergen
Code: Select all
<link rel="stylesheet" type="text/css" href="xfade2_o.css" />
<script type="text/javascript" src="xfade2.js"></script>
Die beiden Dateien müssen vorhanden sein und im <head> /nicht im Kopf / der Seite verfügbar sein.
Re: Mini SlideShow mit Bilder Spezial
Posted: Fri 16. Jan 2009, 16:41
by top
Da ich es jetzt geschafft habe es zu meiner Zufriedenstellung einzubauen und anzupassen, will ich hier mal meine angepasste Version und eine etwas ausführlichere Anweisung zum Einbinden abliefern. (Für andere Dummies wie mich.
)
Zuerst einmal die Template-Datei "xfade.tmpl"
Code: Select all
<!--IMAGES_HEADER_START//-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<div id="imageContainer">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
[ZOOM]<a href="{IMAGE_ABS}" {LIGHTBOX_CAPTION}target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" /></a>
[/ZOOM][ZOOM_ELSE]
[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{INFOHTML}" border="0" />[IMAGE_URL]</a>[/IMAGE_URL]
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
</div>
[PHP]
$GLOBALS['block']['custom_htmlhead']['slider'] = ' <script type="text/javascript">
<!--
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement("link");
css.setAttribute("href","template/inc_css/specific/xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,7200);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.02;
nOpacity+=.02;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,7200);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
} //-->
</script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->
Muss in den Ordner "template/inc_cntpart/imagespecial/"
Was ich daran geändert habe:
- Die CSS-Datei wurde doppelt eingelesen. -> Jetzt nur noch durch das javascript.
- Die Zeiten zum Ein-/Ausblenden und bis zum nächsten Umblenden mal deutlich verlängert.
- Für das ALT-Atribut wird jetzt der Text aus dem Feld "Infotext" verwendet. (Und nicht der kryptische Dateiname.)
Die "xfade2.css" habe ich etwas gekürzt:
Code: Select all
#imageContainer {
height:273px; /*gew.groesse*/
width:615px; /*gew.groesse*/
overflow:hidden;
}
#imageContainer img {
display: none;
position: absolute;
}
Gehört in diesen Ordner: "template/inc_css/" und einfach in der Vorlage einbinden.
Da die Bilder zum Überblenden auf den verschiedenen Unterseiten unterschiedliche Höhen haben, ist das Definieren der Höhe bei mir raus geflogen. Damit sich der nachfolgende Artikel nicht unter das Bild schiebt, gebe ich bei diesem einfach manuell den Abstand nach oben an. Nicht sehr elegant, aber es Funktioniert.
(Dadurch, dass sich die xfade2.css nur bei aktiven javascript nachläd, werden die Bilder ohne Javascript einfach untereinander dargestellt.)
Die xfade2_o.css wird nicht benötigt.
Viel Spaß,
top
PS: Wenn die Seite mal online ist, liefere ich auch noch einen Link um zu zeigen, wie das Teil in Aktion aussieht.
Re: Mini SlideShow mit Bilder Spezial
Posted: Wed 4. Feb 2009, 21:51
by rbstuttgart
Super Klasse - habs gerade bei
http://www.hirschstjohann.com eingebaut.
Einzige Modifikation: Zeit von 7200 auf 720 reduziert.
Gruß und Dank
Re: Mini SlideShow mit Bilder Spezial
Posted: Thu 5. Mar 2009, 12:03
by top
Hiho,
wie versprochen der Link zur Seite in dem ich das Skript verwurstet habe:
www.tenzing.de
Re: Mini SlideShow mit Bilder Spezial
Posted: Thu 5. Mar 2009, 21:18
by santscho
Simple Frage.... warum verwendet ihr für die Slideshow nicht das Modul JW Image Rotator von Breitsch?
Ich finde diese Lösung hier zwar auch ganz toll, jedoch stört es mich, dass die Bilder zuerst untereinander dargestellt werden und dann im Nachhinein vom JS zu einer Diashow gebündelt wird.
Ralph
Re: Mini SlideShow mit Bilder Spezial
Posted: Thu 5. Mar 2009, 21:28
by update
<beinahe off-topic>
wenn ich eine rotator-Instanz (=1 Modul) habe und dies im cms in verschiedenen Sprachzweigen mit 1 (= einer einzigen) Domain ansteuere, zahle ich 1 x (= ein mal) Lizenzgebühr.
Habe ich nun aus userfreundlichen Gründen 10 (= zehn) Domains, die jede einen einzelnen Sprachzweig ansteuert, dann wollen die 10 x (= zehn mal) Lizenzgebühren...
Ist das normal?
</beinahe off topic>
PS: und die Gebühren sind saftig (geworden) und die generelle Lizenz gibt es so auch nicht mehr...
Re: Mini SlideShow mit Bilder Spezial
Posted: Thu 5. Mar 2009, 21:35
by Jensensen
alternativen zu haben, ist doch schön, odr?
allerdings kann ich die beobachtung von santscho mit FF3xMac bestätigen.
sone "erst laden - dann java div friemeln"-effekte kann man jedoch häufig beobachten.
Re: Mini SlideShow mit Bilder Spezial
Posted: Thu 5. Mar 2009, 21:37
by santscho
Ja, stimmt schon. Das sind 99-149 Euro. Ist mir gar nicht aufgefallen, denn bisher haben dies meine Kunden bezahlt, ohne sich zu beschweren.
Ralph
Re: Mini SlideShow mit Bilder Spezial
Posted: Thu 5. Mar 2009, 21:40
by update
Naja, dabei geht es (mir) weniger um's Geld als um die Logik, die da auf offener Straße verreckt, ohne dass es jemandem auffällt....
Re: Mini SlideShow mit Bilder Spezial
Posted: Sat 7. Mar 2009, 09:38
by Heiko H.
Hallo,
ich hatte diesen Thread noch gar nicht bemerkt, setze aber auch o.g. Script z.Bsp.
hier ein.
Jensensen wrote:alternativen zu haben, ist doch schön, odr?
Genau!!!
santscho wrote:Ich finde diese Lösung hier zwar auch ganz toll, jedoch stört es mich, dass die Bilder zuerst untereinander dargestellt werden und dann im Nachhinein vom JS zu einer Diashow gebündelt wird.
Auch dieser Effekt, lässt sich mit ein wenig CSS vermeiden
Man muss lediglich dem
eine feste Höhe und Breite verpassen und noch ein
nachreichen und schon läuft der Laden, wie gewollt...
Schönes WE, Heiko...
Re: Mini SlideShow mit Bilder Spezial
Posted: Mon 9. Mar 2009, 15:34
by top
santscho wrote:Simple Frage.... warum verwendet ihr für die Slideshow nicht das Modul JW Image Rotator von Breitsch?
Ich finde diese Lösung hier zwar auch ganz toll, jedoch stört es mich, dass die Bilder zuerst untereinander dargestellt werden und dann im Nachhinein vom JS zu einer Diashow gebündelt wird.
Ralph
Tja, ich gehöre zu den Leuten die erst die Suchfunktion nutzen bevor sie nach etwas fragen. Und wenn einem nicht die richtigen Suchbegriffe einfallen, ist die Auswahl halt etwas kleiner.
Mich hat der leicht springende Seitenaufbau auch gestört. Da ich keine einheitliche Bildhöhe habe, kann ich auch nicht mit dem von Heiko angesprochenem "overflow: hidden;" arbeiten. Daher habe ich meine Standard-CSS noch ein wenig erweitert:
Code: Select all
#imageContainer img {
display: none;
position: absolute;
}
#imageContainer img:first-child {
display: block;
}
Funktionuckelt leider nicht im IE6 und ohne JavaScript werden im IE6 gar keine Bilder mehr angezeigt. Aber solche User dürften es ja gewohnt sein, dass das halbe Internet nicht richtig läuft.
(Die "xfade2.css" ist dadurch also völlig überflüssig. Aber ich schmeiße die Einbindung dafür mal noch nicht raus, vielleicht fällt mir ja noch was genialeres ein...
)
Viel Spaß,
top
Re: Mini SlideShow mit Bilder Spezial
Posted: Fri 19. Jun 2009, 13:27
by hausmeister
hallo zusammen,
gibt es zu dem script auch eine random-funktion?
hat jemand vielleicht schon mal in diese richtung erweitert?
danke für hilfe
der hausmeister
Re: Mini SlideShow mit Bilder Spezial
Posted: Wed 1. Jul 2009, 12:33
by jopps
Hallo zusammen ist es auch möglich langsamer auszufaden bzw. mit mehreren Stufen.
Ich habe schon einige Anpassungen vorgenommen aber das konnte ich nirgends finden.