Imageflow mehrfach benutzen

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
thoblerone
Posts: 104
Joined: Fri 27. Jan 2006, 23:34
Location: Essen, Germany
Contact:

Imageflow mehrfach benutzen

Post by thoblerone » Fri 24. Jun 2016, 23:45

Hallo zusammen,

dank Kukis Spielwiese war es ein Klacks, eine Imageflow-Gallerie auf meiner Webseite einzubauen. Aber wie es so ist, kaum hat man etwas fertig, will man mehr :)

Nun würde ich gerne zwei CPs einbauen um zwei Gallerien untereinander zu erzeugen. Leider wird aber im Template die Haupt div ID der Gallerie fest eingestellt und auch so im zugehörigen JS verwiesen. Da das JS im header ist, finde ich nicht den Trick um es zu überzeugen alle gallerien zu initialisieren :( Habt Ihr das schon einmal erfolgreich gemacht? Wo ist der Trick?

Gruß ausm Ruhrpott

Thomas

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Imageflow mehrfach benutzen

Post by Oliver Georgi » Sat 25. Jun 2016, 18:47

es über Klassen zu machen
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Old Boy
Posts: 1110
Joined: Fri 23. Nov 2012, 13:52

Re: Imageflow mehrfach benutzen

Post by Old Boy » Sat 25. Jun 2016, 23:45

Erweitere doch im Template die Haupt-ID einfach um die CPID, dann kannst du doch beliebig viele Slideshows in einem Artikel ansprechen, ohne jedesmal überlegen zu müssen!

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Imageflow mehrfach benutzen

Post by Oliver Georgi » Sun 26. Jun 2016, 05:57

das Problem dabei, dann muss Du immer genau wissen, wie die ID heißt.

Code: Select all

// Auswählen über Klasse (statt ID) und dann in Schleife
$('.mygallery').each(function(){
    // Jedes Element separat initialisieren, falls nicht
    // sowieso vom Script bereits unterstützt
    $(this).init(); // Achtung!!! Das init() ist nur exemplarisch
});
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

thoblerone
Posts: 104
Joined: Fri 27. Jan 2006, 23:34
Location: Essen, Germany
Contact:

Re: Imageflow mehrfach benutzen

Post by thoblerone » Sat 2. Jul 2016, 18:42

Hallo zusammen,

danke für Eure Antworten, sie waren Anregung genug, um das Ziel zu erreichen. Wie dann gerne von mir gemacht, hier die Lösung im Detail, damit ich sie selber dereinst hier wieder finden mag :) - vielleicht findet es aber auch sonst jemand noch nützlich...

Meine Änderungen basieren auf der Imageflow-Version 1.0.3 - Credits und Grüße gehen an Kukki http://spielwiese.strausberg-nord.de/bi ... ussel.html
- keine Änderung am Stylesheet notwendig
- im Template - hier für Bilder <div> wird zusätzlich zur Klasse dem Haupt-DIV eine Instanzabhängige ID mitgegeben. Hier ist es imageflow-{CPID}:

Code: Select all

<!--IMAGES_HEADER_START//-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]

<div class="imageflow" id="imageflow-{CPID}" >
<!-- CSS: template/inc_css/imageflow/imageflow-1.0.3.css  -->
<!-- JS:  template/inc_js/imageflow/imageflow-1.0.3.js    -->
<!--IMAGES_HEADER_END//-->

<!--IMAGES_ENTRY_START//-->
        <img src="{THUMB_REL}"  longdesc="{IMAGE_REL}" alt="{CAPTION}" />

<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
</div>    
[TEXT]{TEXT}[/TEXT]
<!--IMAGES_FOOTER_END//-->
- im .js Code muss jedes imageflow-div einzeln initialisiert werden. In der Ursprungsdatei findet man ganz am Ende:

Code: Select all

/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function()
{
    var instanceOne = new ImageFlow();
    instanceOne.init({ ImageFlowID:'srb-flow' });
});
[/size]
Diese domReady-Funktion wird komplett ersetzt durch diese Variante:

Code: Select all

/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function()
{
	imgflowArray = new Array(); 
	
	// jQuery Selektion und Schleife über alle Elemente der Klasse .imageflow
	$('.imageflow').each(function(){
		// ID auslesen
		 var divID = $(this).attr('id');
	 	// Instanz anlegen
		imgflowArray[divID] = new ImageFlow();
		// Instanz initialisieren
		imgflowArray[divID].init({ ImageFlowID:divID } );
	});
});

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Imageflow mehrfach benutzen

Post by Oliver Georgi » Sun 3. Jul 2016, 07:48

So sollte es effektiver sein. Und nimm die aktuelle Version http://finnrudolph.com/products/imageflow

Code: Select all

/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function() {
    // jQuery Selektion und Schleife über alle Elemente der Klasse .imageflow
    $('.imageflow').each(function(){
        // Instanz anlegen
        var iflow = new ImageFlow();
        iflow.init({ImageFlowID: $(this).attr('id')});
    });
});
Ich würde den domReady Teil normalerweise dort herausnehmen, da das aufgrund von jQuery doppelt gemoppelt ist. Oder die Funktion etwas umschreiben, sodass jQuery nicht erforderlich ist.

Code: Select all

/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function() {
    // Selektion und Schleife über alle Elemente der Klasse .imageflow
    var imageFlowItems = document.getElementsByClassName("imageflow"), iflow = [];
    for (var i = 0; i < imageFlowItems.length; i++) {
        // Instanz anlegen
        iflow[i] = new ImageFlow();
        iflow[i].init({ImageFlowID: imageFlowItems[i].id});
    };
});
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Imageflow mehrfach benutzen

Post by kukki » Wed 6. Jul 2016, 08:12

@thoblerone

Merci für Deine Dankereaktion. Leider findet man hier nur ganz wenige solcher Reaktionen, die Downloadzahlen auf meiner Spielwiese sprechen aber eine andere Sprache!
Trotz Deines Erfolges muss ich aber darauf hinweisen, dass die Version nicht kostenlos ist.

:arrow: Danke an Oliver für die Ergänzungen

:!: Man bräuchte aber eine Lizenz bei kommerzieller Nutzung :!:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Imageflow mehrfach benutzen

Post by Oliver Georgi » Wed 6. Jul 2016, 09:25

Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Post Reply