Mini SlideShow mit Bilder Spezial

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
User avatar
defect
Posts: 95
Joined: Thu 27. Jan 2005, 17:17
Location: Rostock
Contact:

Mini SlideShow mit Bilder Spezial

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

User avatar
top
Posts: 457
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Mini SlideShow mit Bilder Spezial

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?

User avatar
juergen
Moderator
Posts: 4553
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Mini SlideShow mit Bilder Spezial

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.

;)

User avatar
top
Posts: 457
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Mini SlideShow mit Bilder Spezial

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. :wink: )

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
Posts: 45
Joined: Sun 13. Jul 2008, 10:45

Re: Mini SlideShow mit Bilder Spezial

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

User avatar
top
Posts: 457
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Mini SlideShow mit Bilder Spezial

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

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Mini SlideShow mit Bilder Spezial

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
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
update
Moderator
Posts: 6386
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Mini SlideShow mit Bilder Spezial

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...
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Jensensen
Posts: 2994
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: Mini SlideShow mit Bilder Spezial

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.
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Mini SlideShow mit Bilder Spezial

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
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
update
Moderator
Posts: 6386
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Mini SlideShow mit Bilder Spezial

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....
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Mini SlideShow mit Bilder Spezial

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 :idea:
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... :wink:

Schönes WE, Heiko...
Not longer here - sorry...

Haubner-IT GbR Dresden

User avatar
top
Posts: 457
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Mini SlideShow mit Bilder Spezial

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

(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... 8) )

Viel Spaß,
top

hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: Mini SlideShow mit Bilder Spezial

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
Posts: 1
Joined: Wed 1. Jul 2009, 12:26

Re: Mini SlideShow mit Bilder Spezial

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.

Post Reply