Как отображать изображение в загрузочном модальном формате с помощью Javascript

У меня возникли проблемы с отображением моих фотографий в модальном формате с помощью javascript. Все, что я получаю, когда я нажимаю на фотографию, - это пустая модальная всплывающая подсказка. Я считаю, что это потому, что я все еще изучаю javascript и связанные с ним вопросы не помогли. Был бы признателен за всю помощь я получаюКак отображать изображение в загрузочном модальном формате с помощью Javascript

Модальные HTML код

<!-- photos --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos"><img src="images/image1.jpg" alt="recent photo"></a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos"><img src="images/image2.jpg" alt="recent photo"></a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos"><img src="images/image3.jpg" alt="recent photo"></a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos"><img src="images/image4.jpg" alt="recent photo"></a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos"><img src="images/image5.jpg" alt="recent photo"></a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6"> 
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos"><img src="images/image6.jpg" alt="recent photo"></a> 
     </div> 
    </div> 
</div> 
<!-- ./photos --> 

<!-- modal --> 
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
       <h4 class="modal-title"></h4> 
      </div> 
      <div class="modal-body"><img src="" class="img-responsive"></div> 
      <div class="modal-footer"> 
       <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
       <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- ./modal -->

Это является Javascript я использую для вызова изображение

function displayPhotos(url) { 
//this should load photos 
$('.modal-body img').attr('src',url); 
//show modal 
$('#trslphotos').modal(); 
}

источник

2016-03-21 Mena

Просьба предоставить достаточно информации для отладки кода. Я сделал скрипку из вашего кода https://jsfiddle.net/Y3d3D/262/ и обнаружил, что функция 'displayPhotos()' не была выполнена. Пожалуйста, измените его на текущий код jquery и обновите скрипт. –

@ M.JunaidSalaat Хотел бы я знать, как это сделать. Как я уже сказал, я все еще новичок с javascript, следовательно, мой вопрос. Я хочу, чтобы вместо этого использовать плагин, например, лайтбоксы и код. Любые указания на то, что я должен делать? – Mena

Вот решение для вас. Я просто назвал вашу функцию displayPhotos() по показанной модальности.

Fiddle

$('#trslphotos').on('shown.bs.modal', function (a, b,c) { 
var clickedImageUrl = a.relatedTarget.childNodes[0].src; 
    displayPhotos(clickedImageUrl); 
}) 

function displayPhotos(url) { 
console.log(url); 
$('.modal-body img').attr('src',url); 
$('#trslphotos').modal(); 
}

Теперь он будет работать нормально с вашим кодом. Надеюсь, это поможет вам.

источник

2016-03-21 13:25:22

Спасибо, это решило проблему, которую я имел. Но предыдущая и следующая кнопки ничего не делают, когда я нажимаю тоже. Думаю, мне придется использовать javascript, чтобы это исправить. Теперь мне нужно очень хорошо изучить javascript – Mena

Я не знаю, что ваша проблема, может быть это помогите вам немного. Попробуйте прослушать по щелчку в trslphotos.

$(function() { 
 
    $('#trslphotos').on('show.bs.modal', function() { 
 
    $('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg"); 
 
    //$('#trslphotos').modal('show'); 
 
    }); 
 
    $('#trslphotos').on('click', function() { 
 
    //$('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg"); 
 
    $('#trslphotos').modal('show'); 
 
    }); 
 
});

<link href="https://bootswatch.com/united/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
 
     <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos"> 
 
     <img src="images/image1.jpg" alt="recent photo"> 
 
     </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
 
     <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos"> 
 
     <img src="images/image2.jpg" alt="recent photo"> 
 
     </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
 
     <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos"> 
 
     <img src="images/image3.jpg" alt="recent photo"> 
 
     </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
 
     <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos"> 
 
     <img src="images/image4.jpg" alt="recent photo"> 
 
     </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
 
     <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos"> 
 
     <img src="images/image5.jpg" alt="recent photo"> 
 
     </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
 
     <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos"> 
 
     <img src="images/image6.jpg" alt="recent photo"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- ./photos --> 
 

 
<!-- modal --> 
 
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
 
     <h4 class="modal-title"></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <img src="" class="img-responsive"> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
 
     <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-03-21 13:20:56

Как отображать изображение в загрузочном модальном формате с помощью Javascript

ответ

Смежные вопросы