Mini SlideShow mit Bilder Spezial

defect · Post by **defect** » Fri 25. Apr 2008, 14:51

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

top · Post by **top** » Tue 13. Jan 2009, 13:02

Ich bin zu doof...

Kann mir mal jemand erklären, wie ich das Teil jetzt am geschicktesten einbinde?

Post by **juergen** » Tue 13. Jan 2009, 13:44

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.

top · Post by **top** » Fri 16. Jan 2009, 16:41

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.

rbstuttgart · Post by **rbstuttgart** » Wed 4. Feb 2009, 21:51

Super Klasse - habs gerade bei http://www.hirschstjohann.com eingebaut.

Einzige Modifikation: Zeit von 7200 auf 720 reduziert.

Gruß und Dank

top · Post by **top** » Thu 5. Mar 2009, 12:03

Hiho,

wie versprochen der Link zur Seite in dem ich das Skript verwurstet habe: www.tenzing.de

santscho · Post by **santscho** » Thu 5. Mar 2009, 21:18

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

Post by **update** » Thu 5. Mar 2009, 21:28

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

Jensensen · Post by **Jensensen** » Thu 5. Mar 2009, 21:35

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.

santscho · Post by **santscho** » Thu 5. Mar 2009, 21:37

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

Post by **update** » Thu 5. Mar 2009, 21:40

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

Heiko H. · Post by **Heiko H.** » Sat 7. Mar 2009, 09:38

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

Code: Select all

#imageContainer

eine feste Höhe und Breite verpassen und noch ein

Code: Select all

	overflow: hidden;

nachreichen und schon läuft der Laden, wie gewollt...

Schönes WE, Heiko...

top · Post by **top** » Mon 9. Mar 2009, 15:34

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

hausmeister · Post by **hausmeister** » Fri 19. Jun 2009, 13:27

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

jopps · Post by **jopps** » Wed 1. Jul 2009, 12:33

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.

Mini SlideShow mit Bilder Spezial

Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial

Re: Mini SlideShow mit Bilder Spezial