Галерея с превью
Сделал галерею с превью,
Помогите как сделать в модальном окне так же что б переносились фото с превью и листались в модальном окне так же сохраняясь после закрытия фото на котором остановились. Количество фото не ограничивается двумя. https://jsfiddle.net/4gW4y/711/ |
DimonFreeman,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .current { border: 2px solid red; } .photo img { width:400px; } nav a { display:inline-block; border: 2px solid white; } nav img { display:block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function() { $(".photo").on("click", function() { $('#modal nav').replaceWith($(".photo + nav").clone(true)) $('#modal').modal('show'); }); $("nav").on("click", "a", function () { var index = $(this).index(); $("nav a").removeClass("current") $("nav").find("a:eq("+index+")").addClass("current") $(".photo img, #preview").attr("src", $(this).prop("href")) return false; }) }); </script> </head> <body> <!-- Modal --> <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Закрыть</span></button> <h4 class="modal-title" id="myModalLabel">Изображение</h4> </div> <div class="modal-body"> <img src="" id="preview" style="width: 500px; height: 250px;" > <nav> <a href="" class="photo1"><img /></a> <a href="" class="photo2"><img /></a> </nav> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <div class="photo"><img src="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" alt=""></div> <nav> <a href="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" class="current"><img src="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/scale_crop/84x56/center/" alt=""></a> <a href="http://i.fotorama.io/5c22d9ee-a631-44bd-b848-363e5f2695cd/-/stretch/off/-/resize/1280x/"><img src="http://i.fotorama.io/5c22d9ee-a631-44bd-b848-363e5f2695cd/-/scale_crop/84x56/center/" alt=""></a> </nav> </body> </html> |
Супер! Спасибо!
Может по анимации svg поможете ? (https://javascript.ru/forum/showthread.php?p=494483) |
Часовой пояс GMT +3, время: 01:00. |