Contentflow/Coverflow - neu laden nach wechsel der Bilder

Herr_M

Herr_M

Erfahrenes Mitglied
Hi Leute,

Ich habe eine Bildergalerie erstellt unter Verwendung des Contentflow von Jacks Asylum

http://www.jacksasylum.eu/ContentFlow/

Soweit alles kein Problem. Das Skript habe ich nun um die Funktion erweitert, das man
in einer Art "Select Box" (so ähnlich wie die <select> von HTML nur optisch hübscher :) )
eine neue Galerie auswählen kann. Wählt der Benutzer nun also eine andere Gallerie
aus dem Menü aus, wird per AJAX Aufruf die neue Gallerie geladen und alle
vorhandenen Bilder/Elemente der Alten Gallerie durch die neue ersetzt.

Laut Firebug sind tatsächlich die neueh Elemente in den Quelltext der Seite eingesetzt worden. Zu sehen sind diese aber leider nicht. Ich habe schon versucht,
das JavaScript für die Gallerie neu zu initialisieren, aber das hat nichts gebracht, außer, dass die Seite komplett weiß wurde und garnichts mehr zu sehen war...
von der sich minutenlang drehenden Firefox "Sanduhr" mal abgesehen.

Hat jemand ne Idee was fehlt, damit die neue Gallerie auch zu sehen ist und nicht nur
der Quellcode ersetzt wird?

Hier erstmal die Egänzungen zur contentflow.js
Interessant dürfte vor allem die function changeContent(neueKollektion)
sein, da diese ja den eigentlichen Austausch der Gallerie vornimmt. Der Übrige Code
ist für das erstellen und Anzeigen der Select Box.
HTML: 
var charcount = 0;
$('div.cfmenu', '#coverflow_wrapper').find('.cufon')
	.each(
		function(i){
			var cc = $(this).contents().text().length;
			charcount = cc > charcount ? cc : charcount;
			
		}
	);
charcount = ((charcount) * 8) + 'px'; /*bei der Annahme, dass ein h3-cufon Buchstabe im schnitt 8px breit ist.*/

$('div.cfmenu', '#coverflow_wrapper')
	.find('li')
	.each(
		function(index){
			var stri = (index * 30);
			$(this).css('top', stri + 'px');
			$(this).find('.cfmimiddle').css('width', charcount );
		}
	)
	.hide()
	.first()
	.show()
	.bind('mouseenter',
		function(){
			$('div.cfmenu', '#coverflow_wrapper')
				.find('li')
				.fadeIn('slow');
		}
	);

$('div.cfmenu', '#coverflow_wrapper').find('ul')
.bind('mouseleave',function(){$('div.cfmenu', '#coverflow_wrapper').find('li').not('.first').fadeOut('slow');});

$('div.cfmenu', '#coverflow_wrapper').find('li')
	.each(function(index){
		$(this).bind('click',
			function(){
				var ic = $(this).find('cufontext').text();
				var iname = $(this).attr('name');
				var fc = $('div.cfmenu', '#coverflow_wrapper').find('.first').find('cufontext').text();
				var fname = $('div.cfmenu', '#coverflow_wrapper').find('.first').attr('name');
				$(this).attr('name',fc).find('h3').text(fc);
				$('div.cfmenu', '#coverflow_wrapper').find('.first').attr('name',ic).find('h3').text(ic);
				BSW.cufonSingleReplace($('div.cfmenu', '#coverflow_wrapper').find('.first').find('h3'));
				BSW.cufonSingleReplace($(this).find('h3'));
				
				$('div.cfmenu', '#coverflow_wrapper').find('li').not('.first').fadeOut('slow');
				// todo
				var neueKollektion = 'Ausgewählter Menüpunkt.';
				changeContent(neueKollektion);
			}
		);
	}
);
	

function changeContent(neueKollektion){
	$.ajax(
		{
			url: './zweitesKarusell.html', //welche könnte das sein?
			chache: false,
			global: false,
			type: "GET",
			data: "kollektion="+neueKollektion,
			success: function(data)
			{
				//Neues Karusell anfragen
				$("#contentFlow").fadeOut("slow", function(){
					$("#contentFlow").html(data);
					$("#contentFlow").fadeIn("slow");
				});
				ContentFlowGlobal.init();//Funktioniert nicht :(
			},
			failure: function(){
				//TODO altes Karusell behalten
			}
		}
	);
}

Hier die erste Gallerie zusammen mit dem HTML Code für die Selectbox:
HTML: 
            <div id="coverflow_wrapper">
				<div class="cfmenu">
					<ul>
						<li name="cfmi_1" class="cfmitem first">
							<div class="cfmileft"></div>
							<div class="cfmiarrow"><div class="cfmarrow"></div></div>
							<div class="cfmimiddle">
								<h3 class="cufon">Gallerie 1</h3>
							</div>
							<div class="cfmiright"></div>
							<div class="clearit"></div>
						</li>
						<li name="cfmi_2" class="cfmitem">
							<div class="cfmileft"></div>
							<div class="cfmiarrow"></div>
							<div class="cfmimiddle">
								<h3 class="cufon">Gallerie 2</h3>
							</div>
							<div class="cfmiright"></div>
							<div class="clearit"></div>
						</li>
						<li name="cfmi_3" class="cfmitem">
							<div class="cfmileft"></div>
							<div class="cfmiarrow"></div>
							<div class="cfmimiddle">
								<h3 class="cufon">Gallerie 3</h3>
							</div>
							<div class="cfmiright"></div>
							<div class="clearit"></div>
						</li>
					</ul>
                </div>
				<div id="coverflow" class="floatbox" style="height: 242px; width: 100%">
					<script language="JavaScript" type="text/javascript" src="js/contentflow/contentflow.js" load="lightbox"></script>
					<script tyle="text/javascript">
						var cf = new ContentFlow('contentFlow', {reflectionColor: "transparent",visibleItems:5});
					</script>
					<div id="contentFlow" class="ContentFlow" style="height: 100%; width: 100%">
					<!-- should be place before flow so that contained images will be loaded first -->
						<div class="loadIndicator">
							<div class="indicator">
							</div>
						</div>
						<div class="flow">
							<div class="item">
								<img class="content" src="images/image002_front.jpg" alt="NKD"/>
								<div class="caption">Bild 2</div>
							</div>
							<div class="item">
								<img class="content" src="images/image003_front.jpg" alt="MyToys"/>
								<div class="caption">Bild 3</div>
							</div>
							<div class="item">
								<img class="content" src="images/image004_front.jpg" alt="Doc Morris"/>
								<div class="caption">Bild 4</div>
							</div>
							<div class="item">
								<img class="content" src="images/image005_front.jpg" alt="Zalando"/>
								<div class="caption">Bild 5</div>
							</div>
							<div class="item">
								<img class="content" src="images/image006_front.jpg" alt="Neckermann"/>
								<div class="caption">Bild 6</div>
							</div>
						</div>
						<div class="globalCaption"></div>
					</div>
                </div>
            </div>

Und hier die zweite Gallerie durch die die erste ersetzt wird.
HTML: 
	<div class="flow" style="visibility: visible; height: 242px; margin-bottom: -80.6667px;">
		<div class="item">
			<img class="content" src="images/image002_front.jpg" alt="NKD"/>
			<div class="caption">Bild 2</div>
		</div>
		<div class="item">
			<img class="content" src="images/image003_front.jpg" alt="MyToys"/>
			<div class="caption">Bild 3</div>
		</div>
		<div class="item">
			<img class="content" src="images/image004_front.jpg" alt="Doc Morris"/>
			<div class="caption">Bild 4</div>
		</div>
		<div class="item">
			<img class="content" src="images/image005_front.jpg" alt="Zalando"/>
			<div class="caption">Bild 5</div>
		</div>
		<div class="item">
			<img class="content" src="images/image006_front.jpg" alt="Neckermann"/>
			<div class="caption">Bild 6</div>
		</div>
	</div>

P.S. Bevor jemand fragt, ja die Variable "neueKollektion" hat noch keine Verwendung
hier soll später mal übergeben werden welches Element der SelectBox augswählt wurde um dann die zugehörige Gallerie zu laden, im Moment wird quasi egal was man auswählt immer statisch die gleiche Gallerie geladen. Was zum Testen des Wechsels ja erstmal ausreichend ist.
 
Hab die Lösung gefunden :)
Damit das neu initialisieren fruchtet, muss garnicht das hier "ContentFlowGlobal.init();" gemacht werden sondern es reicht die variable cf erneut mit den Parametern für das Karusell zu füttern und
diese dann neu zu initialisieren:

HTML: 
function changeContent(neueKollektion){
	$.ajax(
		{
			url: './zweitesKarusell.html', //welche könnte das sein?
			chache: false,
			global: false,
			type: "GET",
			data: "kollektion="+neueKollektion,
			success: function(data)
			{
				//Neues Karusell anfragen
				$("#contentFlow").fadeOut("slow", function(){
					$("#contentFlow").html(data);
					 cf = new ContentFlow('contentFlow', {reflectionColor: "transparent",visibleItems:5});
					
					$("#contentFlow").fadeIn("slow");
                                        cf._init();
				});
				
				
			},
			failure: function(){
				//TODO altes Karusell behalten
			}
		}
	);
}
 
Zuletzt bearbeitet:
Hallo Herr_M,

ich versuche gerade auch den ContentFlow unterschiedlichen Galerien zu bestücken. Funktioniert soweit auch ganz gut, nur spinnt nach dem Reinitialisieren mein Slider rum. Wie es scheint, wird die alte Instanz nicht wirklich überschrieben und funkt mir noch dazwischen. Hattest du das auch?

Hier der Ausschnitt aus meinem Code
Code: 
				$(".flow *").remove(); 
				
				xmlResult.each(function() {
					$(".flow").append('<img class="item" src="img/polaroids/' + $(this).find("Polaroid").text() + '" href="' + $(this).find("Url").text() + '" />');
				});
				
				cf = new ContentFlow('contentFlow', {	
					reflectionHeight: 0.3, 
					onMoveTo:function(item) { 
						if(item) {
							updateOutput(item.getIndex())
						}
					},
					startItem:1
				});			

				cf._init();

Hilfe :(

Viele Grüße, David
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück