zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Lightbox mit Captions

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.03.2016, 09:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2010
Beiträge: 19
irenehofer befindet sich auf einem aufstrebenden Ast
Standard Lightbox mit Captions

Ich verwende mehrere Slideshows, basierend auf dieser Lightbox-Lösung
Leve, simples e responsivo Lightbox com Jquery

Nun möchte ich jeweils pro Galerie eine Caption verwenden. Also ich habe grob gesagt folgenden Code:
Code:
<section class="Titel1">Hier ist Lightbox-Galerie 1 mit mehreren Bildern</section>
<section class="Titel2">Hier ist Lightbox-Galerie 2 mit mehreren Bildern</section>
<section class="Titel3">Hier ist Lightbox-Galerie 3 mit mehreren Bildern</section>
Wenn die Lightbox-Galerie geöffnet wird, soll jeweils der Titel angezeigt werden (bei allen Bildern der Galerie ist es derselbe Titel).
Ich gehe schwer davon aus, dass ich dies im Javascript tun kann. Leider kenne ich mich damit aber zu wenig aus. Danke für eure Hilfe.

Hier noch das Script:

HTML-Code:
$(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>');
			});
		});
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
javascript, lightbox

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jcarousel + jquery lightbox plugin Thorolf Javascript & Ajax 0 23.02.2011 13:18
Lightbox nur über Button verlassen maeck Javascript & Ajax 8 14.05.2009 23:16
Lightbox mit zweiter CSS Datei funktioniert nicht T4ke CSS 12 11.12.2007 19:20
LightBox ed the horse Javascript & Ajax 3 17.11.2007 18:20
Lightbox 2 wie Lightbox 1 öffnen .wired Javascript & Ajax 3 31.10.2007 22:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:27 Uhr.