[JesperA]

Japp det fungerar jättebra, dock dök det upp ett litet problem när jag lade till min gallerifunktion.

Kommer ha flera typer av blogginlägg, enskilda bilder, galleri inlägg som visar dom 7 senaste bilderna från det galleriet man precis uppdaterade, inlägg för enskilda bilder osv, ja ungefär som Facebooks system.

Nu när jag lade till ovanstånde .load funktion så strular det till sig lite med jQuery scriptet som sköter gallerifunktionen, jag har ju vanligtvis all JS i min footer men den tar ju bara hand om allt som laddas i samband med första sidladdningen, allt som laddas via jQuery .load vid ett senare tillfälle struntar ju den fullständigt i.

Därför var jag tvungen att lägga jQuery funktionen för galleriet i varenda galleri den hämtar via .load. Detta ser nu ut såhär:

<section>
	<p>Japp, sjukt gött är det att göra egna hambrugare, lite nötkött, lite dijonsenap och krydda, vilken krydda
	man själv vill ha går bra, men jag brukar köra på tacokrydda, alltså endel är nog skeptiska mot detta för
	hamburgare skall ju inte smaka tacos, right? Men nope, det smakar inte som tacos tacos, utan som kryddiga hamburgare, passar bra faktiskt..</p>

	<p>Har inte friterat på flera år nu men drog fram fritösen igår, blir riktigt gött hemma, blir inte så flötiga å fettiga som McDonalds strips.</p>
	
	
	<div class="item">
		<div class="gallery">
			<div class="thumbnails">
				<a href="http://www.jespera.se/media/pictures/2012/01/IMG_0651-880x660.jpg" data-large="http://www.jespera.se/media/pictures/2012/01/IMG_0651-880x660.jpg"></a>
				<a href="http://dev.jespera.se/1.jpeg" data-large="http://dev.jespera.se/1.jpeg"></a>
			</div>
		</div>
	</div>
	
	
	
	<script>
	
		(function(){
			var items = $('.item');
			var galleries = items.find('.gallery');
	
			galleries.each(function(){
				var gallery = $(this);
				var thumbnails = gallery.find('.thumbnails');
				var firstImg = thumbnails.find('a:first');
				var currentImg = $('<div/>')
					.addClass('current')
					.html('<img src="'+firstImg.attr('href')+'" alt="'+firstImg.text()+'">')
					.prependTo(gallery);
				thumbnails.find('a').each(function(){
					var thumbnail = $(this);
					thumbnail.html('<img src="'+thumbnail.attr('href')+'" alt="'+thumbnail.text()+'">');
					thumbnail.click(function(e){
						e.preventDefault();
						var this_thumb = $(this);
						this_thumb.parent().prev('.current').find('img').attr({
							src : this_thumb.data('large'),
							alt : this_thumb.find('img').attr('alt')
						});
					});
				});
			});
	
				expand.click(function(e){
					e.preventDefault();
					$(this).parent().next('.gallery').slideToggle();
				});
		// and so on    
	
		})();
	
		</script>
	
</section>

Ganska kladdig struktur men skit samma.

Ovanstående fungerar jättebra, om det antingen bara finns 1 galleri per sida, eller om det finns flera galleri per sida så fungerar det som tänkt om man klickar på en rubrik så bilderna laddas in, sen klickar på rubriken igen och sen klickar på nästa rubrik som innehåller ett galleri.

Problemet är om man redan har ett inlägg som har ett galleri, om man har öppnat en redan och sen öppnar en till utan att stänga första galleriet som man öppnade, ja då laddas det in ytterliggare en huvudbild i dom andra gallerierna man redan öppnat.

Testa gärna här: http://dev.jespera.se/

Klicka först på Koenigsegg rubriken, sen klicka på hamburgerubriken, då kommer första bilden i Koenigsegg inlägget att laddas in igen.

Jag tror att det har något med traversing att göra igen men ja, jag är så sjukt dålig på traversing så jag hittar inte riktigt vart jag skall ändra det i min gallerifunktion.

Någon vänlig skäl igen? :P Jag har försökt endel själv men blir lite svårare då http://api.jquery.com/category/traversing/ inte fungerar för mig just nu.

Edit

Ja alltså, mitt galleri script lägger till en div med classen "current" precis efter classen "gallery", det är alltså denna funktionen i scriptet:

var currentImg = $('<div/>')
					.addClass('current')
					.html('<img src="'+firstImg.attr('href')+'" alt="'+firstImg.text()+'">')
					.prependTo(gallery);

Så varje gång man klickar på ett blogginlägg som har ett galleri, så lägger den till ytterliggare en div med classen "current" även på dom blogginläggen som redan har en div med classen "current" under diven med "gallery" classen, så då kan det inlägget som redan är öppet få hur många divar som helst i princip.