Imageflow mehrfach benutzen

[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

[Oliver Georgi]

es über Klassen zu machen

[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!

[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
});

[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 } );
	});
});

[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});
    };
});

[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

[Oliver Georgi]

gibt ja genügend freie und aktuellere Lösungen:
http://brokensquare.com/Code/jquery-flipster/demo/
http://vanderlee.github.io/coverflow/