Moin Moin,
Ich habe 2 Probleme mit ein Lightbox System und zwar wenn ich zum nächsten Bild gehen möchte beendet das script die Lightbox. Das 2. Problem ist wenn ich auf das X zum schließen klicke passiert nichts.
PHP Code Lightbox
HTML
<div class="modal img-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-8 modal-image">
<img class="img-responsive" src="/image/test.JPG">
<img class="img-responsive hidden" src="/image/test.JPG" />
<img class="img-responsive hidden" src="/image/test.JPG" />
<a href="" class="img-modal-btn left"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="" class="img-modal-btn right"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-md-4 modal-meta">
<div class="modal-meta-top">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div class="img-poster clearfix">
<a href=""><img class="img-circle" src="" /></a>
<strong><a href="">Test User 3</a></strong>
<span>12 minutes ago</span>
</div>
<ul class="img-comment-list">
<li>
<div class="comment-img">
<img src="">
</div>
<div class="comment-text">
<strong><a href="">Test User 1</a></strong>
<p>Hello this is a test comment.</p> <span class="date sub-text">on March 5th, 2014</span>
</div>
</li>
<li>
<div class="comment-img">
<img src="">
</div>
<div class="comment-text">
<strong><a href="">Test User 1</a></strong>
<p>Hello this is a test comment and this comment is particularly very long and it goes on and on and on.</p> <span>on March 5th, 2014</span>
</div>
</li>
<li>
<div class="comment-img">
<img src="">
</div>
<div class="comment-text">
<strong><a href="">Test User 2</a></strong>
<p class="">Hello this is a test comment.</p> <span class="date sub-text">on March 5th, 2014</span>
</div>
</li>
</ul>
</div>
<div class="modal-meta-bottom">
<input type="text" class="form-control" placeholder="Leave a commment.." />
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Alles anzeigen
Das JS Code
JavaScript
$(function () {
// This code is not even almost production ready. It's 2am here, and it's a cheap proof-of-concept if anything.
$(".img-modal-btn.right").on('click', function (e) {
e.preventDefault();
cur = $(this).parent().find('img:visible()');
next = cur.next('img');
par = cur.parent();
if (!next.length) { next = $(cur.parent().find("img").get(0)) }
cur.addClass('hidden');
next.removeClass('hidden');
return false;
})
$(".img-modal-btn.left").on('click', function (e) {
e.preventDefault();
cur = $(this).parent().find('img:visible()');
next = cur.prev('img');
par = cur.parent();
children = cur.parent().find("img");
if (!next.length) { next = $(children.get(children.length - 1)) }
cur.addClass('hidden');
next.removeClass('hidden');
return false;
})
});
Alles anzeigen
So ist es in die Seite eingebunden
HTML
<div class="col-md-8">
<div class="profile-content">
<div class="container">
<div class="row">
<img src="image/test.JPG" class="img-responsive" width="500" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal_1 img-modal">
<div class="modal-dialog_1 modal-lg">
<div class="modal-content_1">
<div class="modal-body_1">
<?php include("bildvorschau.php"); ?>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
</div>
</div>
</div>
</div>
Alles anzeigen
Danke schonmal für eure Hilfe