• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Caption bei Lightbox

I

irenehofer

New member
Auf einer Webseite verwende ich die Lightbox von folgendem Link: Leve, simples e responsivo Lightbox com Jquery
Ich habe allerdings mehrere Galerien. Codebeispiel HTML:
HTML: 
<div class="mtlsr-images-for-lightbox">
     <ul>
          HIER KOMMT DIE 1. GALERIE
     </ul>
</div>
<div class="mtlsr-images-for-lightbox">
     <ul>
          HIER KOMMT DIE 2. GALERIE
     </ul>
</div>
<div class="mtlsr-images-for-lightbox">
     <ul>
          HIER KOMMT DIE 3. GALERIE
     </ul>
</div>

Pro Galerie möchte ich nun eine Caption verwenden (also bei allen Bildern in der jeweiligen Galerie soll es die gleiche Caption sein. Ich habe versucht, das irgendwie in folgendem Code unterzubringen, welcher immer in der Lightbox angezeigt wird (Pfeile und Schliessen):
HTML: 
	<div class="mtlsr-lightbox">
		<a href="#" class="close">Ⓧ</a>
		<a href="#" class="prev">‹</a>
		<a href="#" class="next">›</a>
	</div>

Leider ohne Erfolg. Ich gehe davon aus, dass ich das im Javascript unterbringen muss. Leider kenne ich mich damit aber zu wenig aus... Ich hoffe, mir kann jemand helfen. Hier wäre der JS-Code:

HTML: 
$(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 big_image_href = $(this).attr('href');
				
				$(this).parent().addClass('current');
				$('.mtlsr-lightbox').fadeIn();
				$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
				
				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>');
			});
		});
 
Zuletzt bearbeitet von einem Moderator:
Du musst bei den Gallerien irgendwo die Überschrift speichern (z.B. in einem data-*-Attribut oder einem separatem Tag, das du normalerweise ausblendest). In dem click-Eventlistener von '.mtlsr-images-for-lightbox ul li' holst du dir dann den Text und zeigst ihn in einem Element an, dass du zu dem "mtlsr-lightbox" im HTML hinzufügst.

HTML: 
<div class="mtlsr-images-for-lightbox" data-caption="Überschrift"> ...</div>

...

	<div class="mtlsr-lightbox">
		<span class="caption"></span>
		<a href="#" class="close">Ⓧ</a>
		<a href="#" class="prev">‹</a>
		<a href="#" class="next">›</a>
	</div>
Code: 
			$('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
				event.preventDefault();
				var $this = $(this);
				var big_image_href = $this.attr('href');
				var caption = $this.parent(".mtlsr-images-for-lightbox").data("caption");
				
				$this.parent().addClass('current');
				
				var lightbox = $('.mtlsr-lightbox');
				lightbox.fadeIn();
				lightbox.append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
				lightbox.find(".caption").text(caption);
				
				check_image_position();
			});
- ungetestet.
 
Danke für die Antwort. Leider hat es nicht geklappt. Ich habe allerdings einen kleinen Fehler beim Code gemacht. Die Struktur ist folgendermassen:
<div class="mtlsr-images-for-lightbox">
<div class="section" data-caption="Überschrift 1">
<ul>
INHALTE GALERIE 1
</ul>
</div>
<div class="section" data-caption="Überschrift 2">
<ul>
INHALTE GALERIE 2
</ul>
</div>
<div class="section" data-caption="Überschrift 2">
<ul>
INHALTE GALERIE 3
</ul>
</div>
</div>

Hat das ev. eine Auswirkung, dass es nicht funktioniert? Deinen Javascript-Code habe ich einfach am Ende des Scripts eingefügt. Stimmt das so?
 
irenehofer schrieb:
Hat das ev. eine Auswirkung, dass es nicht funktioniert?
Zum Vergrößern anklicken....
Ja - dann passt der Code nicht mehr.
Code: 
			$('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
				event.preventDefault();
				var $this = $(this);
				var big_image_href = $this.attr('href');
				var caption = $this.parent(".section").data("caption");
				
				$this.parent().addClass('current');
				
				var lightbox = $('.mtlsr-lightbox');
				lightbox.fadeIn();
				lightbox.append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
				lightbox.find(".caption").text(caption);
				
				check_image_position();
			});
- wieder ungetestet.

irenehofer schrieb:
Deinen Javascript-Code habe ich einfach am Ende des Scripts eingefügt. Stimmt das so?
Zum Vergrößern anklicken....
Nein. Du musst den alten Code, der diesen click-Handler registriert, ersetzen.
 
Danke für deine Hilfe. Leider klappt es aber noch immer nicht... Ich habe alles mal hier hochgeladen: communicaziun.ch/truelove


HTML: 
<body>
	<main>
		<div class="logo"><img src="img/logo.png"/></div>
		<div class="mtlsr-images-for-lightbox">
			<div class="section" data-caption="Überschrift 1">
				<ul>
					<li class="circle">
						<a href="img/1.jpg">
							<img src="img/1.jpg" alt="Samira" />
						</a>
						<!--<div class="overlay"></div>-->
					</li>
					<li class="plus hidden">
						<a href="img/1a.jpg">
							<img 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="Überschrift 2">
				<ul>
					<li class="circle">
						<a href="img/2.jpg">
							<img src="img/2.jpg" alt="" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/1a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/2a.jpg">
							<img src="img/2a.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/2b.jpg">
							<img src="img/2b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/2c.jpg">
							<img src="img/2c.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/2d.jpg">
							<img src="img/2d.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>
			<div class="section" data-caption="Überschrift 3">
				<ul>
					<li class="circle">
						<a href="img/3.jpg">
							<img src="img/3.jpg" alt="" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/1a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/3a.jpg">
							<img src="img/3a.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/3b.jpg">
							<img src="img/3b.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>		
		</div>
		
		<div class="mtlsr-lightbox">
			<a href="#" class="close"><img src="img/close.png" alt="Schliessen"/></a>
			<a href="#" class="prev"><img src="img/prev.png" alt="Zurück"/></a>
			<a href="#" class="next"><img src="img/next.png" alt="Vor"/></a>			
		</div>
	</main>
	
	<a class="cd-menu-trigger" href="#main-nav"><span></span></a>
    <nav id="main-nav">
		
      <ul>
		  <div class="logo"><img src="img/logo.png"/></div>
		  <img src="img/logo2.png"/>
        <p><strong>TRUELOVE</strong> GmbH<br>
			Dorfstrasse 27 A • CH-8902 Urdorf ZH<br>
			Switzerland
		</p>
		<p>P +41 43 817 35 11<br>
		M +41 79 447 65 01<br>
		E <a href="mailto:heinz.ramseier@truelovebrand.ch">heinz.ramseier@truelovebrand.ch</a>
      </ul>
	   <a href="#0" class="cd-close-menu">Close<span></span></a>
	   <a class="cd-menu-trigger-bottom"><span></span></a>
   </nav>
</body>


<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 caption = $this.parent(".section").data("caption");
				
				$this.parent().addClass('current');
				
				var lightbox = $('.mtlsr-lightbox');
				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>
 
Zuletzt bearbeitet von einem Moderator:
Danke für deine Hilfe. Ich habe dies nun korrigiert - leider wird die Caption immer noch nicht angezeigt... :) Wo müsste diese dann überhaupt ausgegeben? Vielleicht ist es nun ein CSS-Fehler. Die Daten habe ich nochmals auf den entsprechenden Link geladen.
 
Du hast das HTML für die Anzeige nicht angepasst:
HTML: 
	<div class="mtlsr-lightbox">
		<span class="caption"></span>
		<a href="#" class="close">Ⓧ</a>
		<a href="#" class="prev">‹</a>
		<a href="#" class="next">›</a>
	</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben