Page 1 of 1
Imageflow mehrfach benutzen
Posted: Fri 24. Jun 2016, 23:45
by thoblerone
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
Re: Imageflow mehrfach benutzen
Posted: Sat 25. Jun 2016, 18:47
by Oliver Georgi
es über Klassen zu machen
Re: Imageflow mehrfach benutzen
Posted: Sat 25. Jun 2016, 23:45
by Old Boy
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!
Re: Imageflow mehrfach benutzen
Posted: Sun 26. Jun 2016, 05:57
by Oliver Georgi
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
});
Re: Imageflow mehrfach benutzen
Posted: Sat 2. Jul 2016, 18:42
by thoblerone
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 } );
});
});
Re: Imageflow mehrfach benutzen
Posted: Sun 3. Jul 2016, 07:48
by Oliver Georgi
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});
};
});
Re: Imageflow mehrfach benutzen
Posted: Wed 6. Jul 2016, 08:12
by kukki
@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.
Danke an Oliver für die Ergänzungen
Man bräuchte aber eine Lizenz bei
kommerzieller Nutzung
Re: Imageflow mehrfach benutzen
Posted: Wed 6. Jul 2016, 09:25
by Oliver Georgi