Beiträge von Benko

<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>

$(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;
    })




});

<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>