|
|||
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> 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>'); }); }); |
Sponsored Links |
Stichwörter |
javascript, lightbox |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jcarousel + jquery lightbox plugin | Thorolf | Javascript & Ajax | 0 | 23.02.2011 14:18 |
Lightbox nur über Button verlassen | maeck | Javascript & Ajax | 8 | 15.05.2009 00:16 |
Lightbox mit zweiter CSS Datei funktioniert nicht | T4ke | CSS | 12 | 11.12.2007 20:20 |
LightBox | ed the horse | Javascript & Ajax | 3 | 17.11.2007 19:20 |
Lightbox 2 wie Lightbox 1 öffnen | .wired | Javascript & Ajax | 3 | 31.10.2007 23:35 |