CODEWITHSUNDEEP
jqueryimageslider
Richard Bryce
Richard Bryce

Reputation: 13

full size on image click & slider

I try to make image slider when i image click.
'prev' and 'next' Button I want to make the slide! from the current image.
this jquery code is full screen image view function on image click.

Please help slide function when the button is clicked.

$('.media').ready(function() {
  $('.media_img').click(function() {
    var numImage = $('#image_slider').children().length;
    var total = numImage;
    var src = $(this).attr('src');

    window.alert(numImage);

    $('.media_full').fadeIn(500);
    $('.img_view img').attr('src', src);

    $('.prev').click(function() {
      window.alert('go to prev');

    });

    $('.next').click(function() {
      window.alert('go to next');
    });

  });
  $('.view_close').click(function(){
    $('.media_full').fadeOut(500);
  });
});
.media { position: relative; width: 100%; height: 150px; }
.media ul { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; }
.media ul li { height: 100%; display: inline-block; list-style: none; }
.media ul li img { width: auto; height: 100%; cursor: pointer; }
.media_full { z-index: 10; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.prev { position: absolute; top: 0; left: 0; width: 100px; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 2em; font-weight: bold; }
.next { position: absolute; top: 0; right: 0; width: 100px; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 2em; font-weight: bold; }
.view_close { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: 200px; height: 50px; font-size: 2em; color: #FFFFFF; background-color: rgba(0,0,0,0.8); border-radius: 30px; }
.img_view { position: fixed; top: 0; right: 0; bottom: 0; left:0; width: auto; height: 100%; }
.img_view img { display: block; margin: 0px auto; height: 100%; }
.prev { position: absolute; left: 0; } .next { position: absolute; right: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="media">
  <ul id="image_slider">
    <li><img class="media_img" src="sp1.jpg" alt="" /></li>
    <li><img class="media_img" src="sp3.jpg" alt="" /></li>
    <li><img class="media_img" src="sp2.jpg" alt="" /></li>
    <li><img class="media_img" src="sp4.jpg" alt="" /></li>
    <li><img class="media_img" src="sp_gif.gif" alt="" /></li>
  </ul>
  <div class="media_full">
    <div class="img_view">
      <img id="img" src="" alt="" />
    </div>
    <button class="prev" id="prev" type="button">◀</button>
    <button class="next" id="next" type="button">▶</button>
    <button class="view_close" type="button">close view</button>
  </div>
</div>

Upvotes: 0

Views: 2517

Answers (1)

Taleeb
Taleeb

Reputation: 1919

When next/prev button is clicked we can find and click the next/previous image. This will trigger the logic written for the click of the image. See the following code

$('.prev').off('click').click(function () {
    if ($(currImg).closest('li').prev().find('.media_img').length) {
        $(currImg).closest('li').prev().find('.media_img').trigger('click');
    }
    else{
        $('.media_img:last').trigger('click');
    }
});

$('.next').off('click').click(function () {
   if ($(currImg).closest('li').next().find('.media_img').length) {
       $(currImg).closest('li').next().find('.media_img').trigger('click');
   }
   else{
       $('.media_img:first').trigger('click');
   }
});

See JSFiddle here

Upvotes: 0

Related Questions