Hice una galería de imágenes. Y cuando hago clic en una imagen, se muestra una imagen grande en modal.
Si hay 5 imágenes y cuando hace clic en la 5.ª imagen, me gustaría desplazarme hacia abajo hasta la 5.ª imagen grande directamente en el modal. ¿Es posible hacerlo?
<!-- Button trigger modal --> <a href="#First" data-bs-toggle="modal" data-bs-target="#exampleModal">1st image</a> <a href="#Second" data-bs-toggle="modal" data-bs-target="#exampleModal">2nd image</a> <a href="#Third" data-bs-toggle="modal" data-bs-target="#exampleModal">3rd image</a> <a href="#Fourth" data-bs-toggle="modal" data-bs-target="#exampleModal">4th image</a> <a href="#Fifth" data-bs-toggle="modal" data-bs-target="#exampleModal">5th image</a> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="item" id="First"><img src="/first.jpg" /></div> <div class="item" id="Second"><img src="/second.jpg" /></div> <div class="item" id="Third"><img src="/third.jpg" /></div> <div class="item" id="Fourth"><img src="/fourth.jpg" /></div> <div class="item" id="Fifth"><img src="/fifth.jpg" /></div> </div> </div> </div> </div>https://codepen.io/jandspace/pen/xxPmVem
Gracias
Con algunos cambios leves en su código, puede agregar controladores de clics a cada uno de los botones que cambian el atributo src de la imagen dentro del modal:
['first', 'second', 'third', 'fourth', 'fifth'].forEach(function(key) { $('a[href="#' + key + '"]').click( function() { $('#image').attr('src', '/' + key + '.jpg'); } ) }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <!-- Button trigger modal --> <a href="#first" data-bs-toggle="modal" data-bs-target="#exampleModal">1st image</a> <a href="#second" data-bs-toggle="modal" data-bs-target="#exampleModal">2nd image</a> <a href="#third" data-bs-toggle="modal" data-bs-target="#exampleModal">3rd image</a> <a href="#fourth" data-bs-toggle="modal" data-bs-target="#exampleModal">4th image</a> <a href="#fifth" data-bs-toggle="modal" data-bs-target="#exampleModal">5th image</a> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="item"><img id="image" src="" /></div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>A menudo es mejor reaccionar a los eventos modales de Bootstrap. Aquí he convertido tus activadores en elementos de imagen. (Los anclajes realmente no deberían usarse para acciones de todos modos). Luego, podemos obtener la fuente de la imagen de la imagen desencadenante usando relatedTarget . Si necesita usar anclajes, se necesitará un ligero ajuste, pero se aplica el mismo concepto.
Además, podemos simplificar drásticamente su marcado al no repetir los elementos dentro del modal.
Tenga en cuenta que agregué la clase img-fluid a la imagen modal para evitar que se salga por los lados.
// this could be placed in a script element at the end of the body element const exampleModalEl = document.getElementById('exampleModal'); exampleModalEl.addEventListener('show.bs.modal', function(event) { document.getElementById('modalImage').src = event.relatedTarget.src; }); .thumb { width: 100px; cursor: pointer; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Button trigger modal --> <img src="https://via.placeholder.com/800" data-bs-toggle="modal" data-bs-target="#exampleModal" class="thumb" /> <img src="https://via.placeholder.com/800/ff0000" data-bs-toggle="modal" data-bs-target="#exampleModal" class="thumb" /> <img src="https://via.placeholder.com/800/0000ff" data-bs-toggle="modal" data-bs-target="#exampleModal" class="thumb" /> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="item"><img id="modalImage" class="img-fluid" /></div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>