jQuery slider / Posts /

enlarge the image in the middle



im trying to enlarge the image onclick with bootsrap modal.

$(function() {

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


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




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  5 years ago   viewed: 3748    

3 Answers


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.

  5 years ago

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.

  5 years ago

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>

  5 years ago


Your name*
(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: