Skip to content
Advertisement

How to make a modal slider with next and prev buttons navigation on popup

Vit

Hello so I’ve been trying to create the next and previous buttons to move the picture when the modal opens up to the next one, I take the pictures like this from WordPress

<?php
                        if (!empty($data['images'])):
                            foreach ($data['images'] as $img) : ?>
                                <?php if (!empty($img['image'])) : ?>
                                    <div class="slide parentSlider">
                                        <div class="slider-inner pop parentSlider-cell">
                                            <?php echo wp_get_attachment_image($img['image'], 'carousel-image', '', ['class' => 'img-responsive', 'data-track-content' => '']); ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            <?php endforeach;
                        endif;
                        ?>

This takes all the pictures I got from WordPress and puts them on a column one after another then I added this to create the modal and show the picture when clicked on a popup with a 100% width

<div class="modal fade bd-example-modal-lg" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                            <div id="demo" class="carousel slide" data-ride="carousel">

                            <div class="carousel-inner">
                                <div class="carousel-item active">
<!--                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>-->
                                    <img src="" class="imagepreview" id="modal_image" style="width: 100%;" >
                                </div>
                            </div>
                                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                    <span class="carousel-control-prev-icon">❮</span>
                                </a>
                                <a class="carousel-control-next" href="#demo" data-slide="next">
                                    <span class="carousel-control-next-icon">❯</span>
                                </a>
                        </div>
                    </div>
                </div>
                </div>
                </div>

Here I’m trying to call the image from the PHP to here through the modal and jQuery

$('.pop').on('click', function() {
                //get index for div
                var idx = $(this).parents('div').index();
                console.log(idx)
                var id = parseInt(idx);
                $('.imagepreview').attr('src', $(this).find('img').attr('src'));
                $('#imagemodal').modal('show');
                $(".carousel-inner").carousel(id); // slide carousel to selected
    });

And it shows the picture selected in the modal which is great but it doesn’t work to move the picture next or previous one, I tried adding lots of other code I got online but nothing was working here ill attach the codes I tried and didn’t work maybe I only implemented them wrong and someone here might know how to do it better

// var modalImg = $(".imagepreview");
    // $('.pop').on('click', function() {
    //     $('.imagepreview').attr('src', $(this).find('img').attr('src'));
    //     $('#imagemodal').modal('show');
    //
    // $('.next').on('click',function() {
    //     var curr = $(modalImg).attr('src',$(this).find('img').attr('src'));
    //     var next = $('img[src="' + curr +'"]').parent('div').next().find('img').attr('src');
    //     modalImg.attr('src', next);
    // });
    // $('.prev').on('click',function() {
    //     var curr = $('modalImg').attr('src',$(this).find('img').attr('src'));
    //     var prev = $('img[src="' + curr + '"]').parent('div').prev().find('img').attr('src');
    //     modalImg.attr('src', prev);
    // });
    // });

//when img is clicked
    // $('.parentSlider-cell img').click(function() {
    //     //get index for div
    //     var idx = $(this).parents('div').index();
    //     console.log(idx)
    //     var id = parseInt(idx);
    //     $('.bd-example-modal-lg').modal('show'); // show the modal
    //     $(".carousel-inner").carousel(id); // slide carousel to selected
    // });

Just wanted a simple next and prev button to move the pics around anything simple will do thank you.

EDIT: For the question in the comments

<ol class="carousel-indicators" id="indicators">
                                        <li data-target="#myImg" data-slide-to="0" id="indicator">0</li>
                                        <li data-target="#myImg" data-slide-to="1" id="indicator">1</li>
                                        <li data-target="#myImg" data-slide-to="2" id="indicator">2</li>
                                    </ol>

$(".carousel-indicators").on('click', function(){

            let dataslide = $("#indicators").find(`[data-slide='${id}']`).index(this);
            //let dataslide = $("#indicators").find("data-slide").index(this); //Used this too but same result
            
            // let dsxid = dataslide.index(); - was testing with this
            // dsid = parseInt(dsxid) - testing
            console.log(dataslide);
            if(id === dataslide){
                let next_image = $('.imgs').eq(id).find('img').attr('src');
                $('.imagepreview').attr('src', next_image);
                $(".carousel-inner").carousel(id);
                $(".carousel-indicators").find("li[data-slide-to="+id+"]").addClass("active").siblings().removeClass("active");
            }
            // console.log(id);
        });

I think I got very close with making the buttons because without the index part it returns an array that shows the button for each image I’m at that time so I wanted to turn it into an index and all it as an id so that I can compare if the id is the same on click and then if not change picture or some logic like that but the index keeps returning -1 i tried to do a .filter and other code but without the id inside the data-slide but it wasn’t working

Advertisement

Answer

You can declare global variable which will have index of the current .pop class which is selected by user so everytime you click on next button you need to first increment this index and then get the particular div at that position and using find() get the image src and add same to your imagepreview.

Same you can do to prev button just you need to decrement index value by 1 and then use this value to get src of image and apply same to your imagepreview div .

Demo Code : 

var id;
$('.pop').on('click', function() {
  var idx = $(this).parent().index();
  id = parseInt(idx);
  $('.imagepreview').attr('src', $(this).find('img').attr('src'));
  $('#imagemodal').modal('show');
  $(".carousel-inner").carousel(id); // slide carousel to selected
});

$('.next').on('click', function() {
  id++; //increment
  if (id < $('.imgs').length) {
    //get id find src
    var next_image = $('.imgs').eq(id).find('img').attr('src');
    $('.imagepreview').attr('src', next_image); //add same
    $(".carousel-inner").carousel(id);
  }
});
$('.prev').on('click', function() {
  id--; //decremnt
  if (id > -1) {
    //find image
    var next_image = $('.imgs').eq(id).find('img').attr('src');
    $('.imagepreview').attr('src', next_image); //add same
    $(".carousel-inner").carousel(id);
  }
});
img {
  height: 50px;
  width: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!--addd this-->
<div class="outer">
  <!--add imgs class-->
  <div class="slide parentSlider imgs">
    <div class="slider-inner pop parentSlider-cell">
      <img src="http://placehold.it/1200x600/555/000&text=One" />
    </div>
  </div>
  <div class="slide parentSlider imgs">
    <div class="slider-inner pop parentSlider-cell">
      <img src="http://placehold.it/1200x600/555/000&text=two" />
    </div>
  </div>
  <div class="slide parentSlider imgs">
    <div class="slider-inner pop parentSlider-cell">
      <img src="http://placehold.it/1200x600/fcf00c/000&text=Three" />
    </div>
  </div>
</div>
<div class="modal fade bd-example-modal-lg" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div id="demo" class="carousel slide" data-ride="carousel">

          <div class="carousel-inner">
            <div class="carousel-item active">
              <!--                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>-->
              <img src="" class="imagepreview" id="modal_image" style="width: 100%;">
            </div>
          </div>
          <a class="carousel-control-prev prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon">❮</span>
          </a>
          <a class="carousel-control-next next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon">❯</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement