Lightbox Caption

[irenehofer]

Auf meiner Seite zeige ich unterschiedliche Galerien mit Captions. Bisher galt die Caption immer pro Galerie, nun müsste ich diese aber pro Bild definieren. Hier mein HTML:

<div class="mtlsr-images-for-lightbox align-left">
			<div class="section" data-caption="Samira" data-background="white">
				<ul>
					<li class="circle">
						<a href="img/1.jpg">
							<img src="img/1.jpg" alt="Samira" />
							<img class="plus plus-left" src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/1a.jpg">
							<img src="img/1a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/1b.jpg">
							<img src="img/1b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/1c.jpg">
							<img src="img/1c.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/1d.jpg">
							<img src="img/1d.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>	
			<div class="section" data-caption="Marina" data-background="white">
				<ul>
					<li class="circle">
						<a href="img/2.jpg">
							<img src="img/2.jpg" alt="" />
							<img class="plus plus-left" src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/2a.jpg">
							<img src="img/2a.jpg" alt="Marina" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/2b.jpg">
							<img src="img/2b.jpg" alt="Marina" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/2c.jpg">
							<img src="img/2c.jpg" alt="Marina" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/2d.jpg">
							<img src="img/2d.jpg" alt="Marina" />
						</a>
					</li>
				</ul>
			</div>
		<!-- HIER KOMMEN NOCH WEITERE GALERIEN -->
	</div>

Neu würde ich also die Caption beim Bild definieren, z.B. so:

<img src="img/1a.jpg" data-caption="Samira" alt="Samira" />

Auf Anhieb funktioniert dies aber nicht. Welche Änderungen müsste ich im Javascript noch vornehmen, damit das klappt?

<script>
	$(document).ready(function() {
		var current = '.mtlsr-images-for-lightbox ul li.current';
		
		//Função para verificar a posição atual da imagem e remover as setas(prev e next) conforme necessário
		function check_image_position(){				
			if ($(current).is(':last-child')) {
				$('.next').hide();
				$('.prev').show();
			}else if ($(current).is(':first-child')) {
				$('.next').show();
				$('.prev').hide();
			}else{
				$('.next, .prev').show();
			}
		}			
		
		$('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
				event.preventDefault();
				var $this = $(this);
				var big_image_href = $this.attr('href');
				var section = $this.parents(".section");
				var caption = section.data("caption");
				var backgroundColor = section.data("background");
				
				$this.parent().addClass('current');
				
				var lightbox = $('.mtlsr-lightbox');
				if (backgroundColor){
					lightbox.css("backgroundColor", backgroundColor);
				}
				lightbox.fadeIn();
				lightbox.append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
				lightbox.find(".caption").text(caption);
				
				check_image_position();
			});
		//Fechar
		$('.mtlsr-lightbox').on('click', '.close', function(event) {
			$('.mtlsr-lightbox').fadeOut();
			$('.mtlsr-lightbox .image-in-lightbox').remove();
			$(current).removeClass('current');
		});
		//Função Next e Prev
		$('.mtlsr-lightbox a').on('click', function(e){				
			if($(this).attr('class')=='next'){
				var big_image_href = $(current).next().find('a').attr('href');					
			
				$(current).next().addClass('current');
				$(current).prev().removeClass('current');
				
			}else if($(this).attr('class')=='prev'){
				var big_image_href = $(current).prev().find('a').attr('href');
			
				$(current).prev().addClass('current');
				$(current).next().removeClass('current');
			}
			check_image_position();
				
			$('.mtlsr-lightbox .image-in-lightbox').remove();
			$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
		});
	});
		
</script>

 

[kkapsner]

Neu würde ich also die Caption beim Bild definieren

Ich würde die Caption nicht beim Bild, sondern beim <a> definieren. Du hast ja teilweise zwei Bilder pro Link.

Um das dann auszulesen musst du dann im Click-Eventhandler auf dem <a> zuerst dessen data-caption auslesen:

				var caption = $this.data("caption") || section.data("caption");

Zusätzlich muss die Caption dann auch immer geändert werden, wenn auf den next- bzw. prev-Button geklickt wird:

		$('.mtlsr-lightbox a').on('click', function(e){
			var currentLi = $(current);
			currentLi.removeClass('current');
			var newLink;
			if ($(this).attr('class')=='next'){
				newLink = currentLi.next().find('a');
				currentLi.next().addClass('current');
				
			}
			else if($(this).attr('class')=='prev'){
				newLink = currentLi.prev().find('a');
				currentLi.prev().addClass('current');
			}
			check_image_position();
				
			$('.mtlsr-lightbox .image-in-lightbox').remove();
			var lightbox = $('.mtlsr-lightbox');
			lightbox.append('<img class="image-in-lightbox" src="' + newLink.attr("href") + '" alt=""></div>');
			
			var section = newLink.parents(".section");
			var caption = newLink.data("caption") || section.data("caption");
			lightbox.find(".caption").text(caption);
		});

- ungetestet.