jQuery slider / Posts /

enlarge the image in the middle

4

Hi,

im trying to enlarge the image onclick with bootsrap modal.
https://bootsnipp.com/snippets/WPD9O#comments

$(function() {

        $('').on('click', function() {

            console.log("yes");

            $('.enlargeImageModalSource').attr('src', $(this).attr('href'));

            $('#enlargeImageModal').modal('show');

        });

});

I can select the image and enlarge it. Thing is that happens when i click on any image and not just the one in the middle. is there a way to detect and trigger the modal only when clicking on the image in the middle?


joe  8 months ago   viewed: 777    

3 Answers

0

In the section Built-in event handlers and functions in the page http://www.menucool.com/jquery-slider, you will find two functions: 

  • getPos()
  • getSlideIndex(li)

For the second one, you pass in the selected li, and compare the two values of above two functions, if they are equal, then popup the modal. This is my thought, but I didn't test it. You can have a try.

Milo
  8 months ago
0

to be honest i tried to activate these functions without success.. (im not that familiar with code). If you could show me an example id appreciate it.

joe
  8 months ago
0

Let's take the demo2.html in the download package as an example. 

If you add the following codes into the head section of your demo2.html, you will get the idea:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { function liClickFunc() { console.log(mcThumbnailSlider.getPos(), mcThumbnailSlider.getSlideIndex(this)); if (mcThumbnailSlider.getPos() == mcThumbnailSlider.getSlideIndex(this)) alert("I am clicking the expected slide#" mcThumbnailSlider.getPos()); else alert("I am clicking the not-centered slide#" mcThumbnailSlider.getPos()); } $("#thumbnail-slider li").click(liClickFunc); }); </script>


Milo
  8 months ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: