jQuery next modal img opacity animation

0
votes

I have made modal window for my img gallery. I want to animate opacity changing of next/prev images inside modal. When i click "next" button i want next modal images fade in smoothly, changing opacity from 0 to 1. At the same time i want current img fade out smoothly too. Please, give me advice how i can achive this? Now, when i click next/prev button i change opacity of images in gallery, not inside modal.

Working example

HTML

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

  </div><!--#content-->

CSS

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

Jquery

jQuery(document).ready(function ($) {
var сlicked;    

 $(".gallery li").click(function() {

        $(".modal-content").fadeIn();

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

 сlicked = $(this);

}); 

    $(".modal-close").click(function() {

        $(".modal-content").fadeOut();


}); 

    $('.btnModal-right').click(function(){

    сlicked.find('img').fadeOut().end().next().find('img').fadeIn().trigger('click');



});

$('.btnModal-left').click(function(){
 сlicked.find('img').fadeOut().end().prev().find('img').fadeIn().trigger('click');


}); 



});
3
javascriptjquery
can you create a fiddle? – Ramzan Zafar
My working example here jsfiddle.net/ETJB9/8 – Lucky

3 Answers

1
votes

Demo:http://jsfiddle.net/robschmuecker/pznnj/1/

jQuery(document).ready(function ($) {
    var сlicked, clone;

    $(".gallery li").click(function () {
        clicked = this;
        $(".modal-content").fadeIn();
        var clone = $(this).find('img').clone(true);
        clone.css({
            opacity: 0
        });
        $('.modal-content').append(clone);
        clone.animate({
            opacity: 1
        }, 1000);
    });

    $(".modal-close").click(function () {
        $(".modal-content").fadeOut();
    });

    $('.btnModal-right').click(function () {
        if ($(clicked).next('li').length) {
            nextImage = $(clicked).next('li').find('img');
            clicked = $(clicked).next('li');
            nextClone = nextImage.clone(true);
            nextClone.css({
                opacity: 0
            });
            $('.modal-content').append(nextClone);
            nextClone.animate({
                opacity: 1
            }, 1000, 'swing', function () {
                $(this).prev().remove();
            });
        }
    });

    $('.btnModal-left').click(function () {
        if ($(clicked).prev('li').length) {
            prevImage = $(clicked).prev('li').find('img');
            clicked = $(clicked).prev('li');
            prevClone = prevImage.clone(true);
            prevClone.css({
                opacity: 0
            });
            $('.modal-content').append(prevClone);
            prevClone.animate({
                opacity: 1
            }, 1000, 'swing', function () {
                $(this).prev().remove();
            });
        }
    });
});
0
votes

Hi you need to add fadeout after next() and need to use this like following example

$(this).find('img').end().next().fadeOut();
0
votes

Check Out this Fiddle

You want to fade out the original image and tap into the OnComplete event before changing the IMG source and fading back in.

jQuery(document).ready(function ($) {
    var selectedItem;

    $(".gallery li").click(function () {
        selectedItem = $(this);
        $(".modal-content").fadeOut(500, function() {
            // Change the IMG source and fade in AFTER the fade out is complete.
            $('.modal-content img').attr('src', selectedItem.find('img').attr('src'));
            $(".modal-content").fadeIn();    
        });
    });

    $(".modal-close").click(function () {
        $(".modal-content").fadeOut();
    });

    $('.btnModal-right').click(function () {
        selectedItem.find('img').end().next().find('img').trigger('click');
    });

    $('.btnModal-left').click(function (){
        selectedItem.find('img').end().prev().find('img').trigger('click');
    });
});