I want to make the effect of a smooth appearance of pictures in a modal window by clicking on the prev and next buttons. I use this script

$('.next').click(function(){ clicked.find('img').fadeOut().end().next().find('img').trigger('click'); });

It works in a strange way. The toggle button works, but the current picture fades, not in a modal window, but in the gallery itself! Tell me, please, what is the error? Thank you in advance!

  • 2
    because you need to select the current picture and above it shaman. What is clicked? Write the correct selection, such as $ ('. Modal img') ... Keep some array with images and the current index of the selected image. When you click Next, load pos + 1. With Prev: pos - 1. If you have reached the last element, then the next one will be zero. If you are on the first and click back - load the last element of the image array images [images.length - 1] - mountpoint
  • clicked is a variable where information about the current image is saved. The modal window is the simplest: $ (". Gallery li"). Click (function () {$ (". Modal-content, # modal-background"). FadeIn (); $ ('. Modal-content img'). attr ('src', $ (this) .find ('img'). attr ('src')); clicked = $ (this);}); $ ("# modal-background, .modal-close"). click (function () {$ (". modal-content, # modal-background"). fadeOut ();}); The toggle button is working. Button code: $ ('. Next'). Click (function () {clicked.next (). Find ('img'). Trigger ('click');}); - Olga Moscow
  • So the modal window works and the toggle button goes to the next picture, everything is as it should be. I only need the picture to appear smoothly, the current fading, the next, on the contrary, manifest itself. If it is not difficult, tell me about the correction in more detail, I am just starting in jq and have not really understood the comment so far) - Olga Moscow
  • one
    @Olga Moscow make an example on jsfiddle, but I made an alternative gallery interface a long time ago. jsfiddle.net/oceog/LZ7Eq - zb '
  • one
    jsfiddle.net/ETJB9/14 - zb ' '

1 answer 1

First, you need to save a link to the image that is currently displayed.

 curImg = $('.modal-content img').attr('src', $(this).find('img').attr('src'));

Further, in the button handlers, use fadeOut on this picture, passing the callback function in which to switch to a new picture and do fadeIn back, for example:

 curImg.fadeOut(function() { imageClicked.next().find('img').trigger('click'); curImg.fadeIn(); });

Edited jsfiddle

 jQuery(document).ready(function($) { var imageClicked, curImg; $(".gallery li").click(function() { $(".modal-content").fadeIn(); curImg = $('.modal-content img').attr('src', $(this).find('img').attr('src')); imageClicked = $(this); }); $(".modal-close").click(function() { $(".modal-content").fadeOut(); }); $('.btnModal-right').click(function() { curImg.fadeOut(function() { imageClicked.next().find('img').trigger('click'); curImg.fadeIn(); }); }); $('.btnModal-left').click(function() { curImg.fadeOut(function() { imageClicked.prev().find('img').trigger('click'); curImg.fadeIn(); }); }); }); 
 ul.gallery { position: relative; display: block; width: 100%; } .gallery li { display: inline-block; position: relative; width: 100px; height: 100px; } .gallery li img { display: block; position: relative; width: 100px; height: 70px; } .modal-content { background-color: white; display: none; padding: 10px 10px 20px 10px; position: fixed; z-index: 1000; height: 350px; width: 500px; } .btnModal-left, .btnModal-right { display: inline-block; border: 1px solid black; } .modal-content img { display: block; position: relative; max-height: 350px; max-width: 500px; } .modal-close { position: absolute; z-index: 9999; right: 15px; top: 15px; width: 40px; height: 20px; display: block; overflow: hidden; border: 1px solid black; opacity: 1; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> <div class="modal-content"> <div class="modal-close">Close</div> <div class="btnModal-left">Prev</div> <!--end btnLeft--> <div class="btnModal-right">Next</div> <!--end btnRight--> <img src="http://o.aolcdn.com/hss/storage/adam/5d7b5eedccc289bd332af80a1ad5a226/montero-2017-us.jpg"> <br> </div> </div> <!--.modal-content--> <ul class="gallery"> <li> <img src="http://o.aolcdn.com/hss/storage/adam/a1289c4c6916baabb98e4673c7052f8/2014-hyundai-veloster-reflex-chicago.jpg"> </li> <li> <img src="http://o.aolcdn.com/hss/storage/adam/a039929c8405451173090144693c1fa0/vw-grc-beetle-chicago.jpg"> </li> <li> <img src="http://o.aolcdn.com/dims-shared/dims3/GLOB/crop/1280x850+0+0/resize/628x417!/format/jpg/quality/85/http://o.aolcdn.com/hss/storage/adam/1799bb1e072b82bda13c81563bdf5d0f/01-lingenfelter-reaper-chicago-1.jpg"> </li> </ul>

  • Many thanks to all for the answers. And especially, zb! Although the problem was solved a couple of days after the issue was published, it remained unclosed. I would like to ask zb (since it was he who gave jsfiddle with the implementation of the desired effect) to transform the comment into a question so that I could mark it as correct. - Olga Moscow