How can I add different event handlers for outer and inner elements?

Question

I am working on a project for an upcoming exhibition and need your help with some of the script. I used jQuery to implement a transition on click for the images and it works really well.

Now I want to implement some kind of lightbox gallery which enlarges the images on a second click on a specific image. Afterwards, when clicked anywhere but the enlarged image the lightbox gallery should close. All I know it that I need another onClick event in jQuery... but honestly I am pretty lost!

I hope someone can help me here.

This is the code I use right now:

jQuery(document).ready(function($){
  $('ul.cards').on('click', function(){
    $(this).toggleClass('transition');
  });
});

ul.cards{
  width: 1500px; margin: 0 auto 20px;
  height: 450px;
  list-style-type: none;
  position: relative;
  padding: 50px 0;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 300px; width: 250px;
    border-radius: 7.5px;
    position: absolute; left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 560px;
      }

      &.card-2{
        left: 280px;
      }
      
      &.card-3{
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
    <li class="title">
        <h2>Foncemagne, Étienne Lauréault</h2>
    </li>
    <li class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
    </li>
    <li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
    </li>
    <li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
    </li>
</ul>

Answer 1

im not sure enough, but I just tried, maybe the meaning is more or less like this.

I change ul.card to double click, so that the image can also be clicked.

if you use second way maybe there will be less coding no need to use function if ($ ('li.card'). css ('transform', 'scale (1)')) on javascript,

but I can't use second way, maybe because it's css on element .li there is have a transform property.

jQuery(document).ready(function($){
  $('ul.cards').on('dblclick', function(){
    $(this).toggleClass('transition');
    $('li.card').css("transform","");
    /* $('li.card').removeClass('transformation'); -- second way*/
    $('li.card').off('click'); //delete the event listener click from li.card, so that when the collapsed cant be clicked
    if ($('ul.cards').hasClass('transition')){
      $('li.card').on('click', function(){
      
      /* $(this).toggleClass('transformation');
        -- second way */
      
      if ($('li.card').css('transform','scale(1)'))
      {
      	$(this).css('transform','scale(1.5)');
      } else {
      	$(this).css('transform','scale(1)');
      }
      });
    }
  });
  
});

$(document).mouseup(function (e) { // when clicked anywhere the image close/back to default scale
        if ($('ul.cards').hasClass('transition')){
            if ($(e.target).closest('li.card').length 
                        === 0) { 
                $('li.card').css('transform','scale(1)'); 
            }
        } 
        }); 
 

ul.cards{
  width: 1500px; margin: 0 auto 20px;
  height: 450px;
  list-style-type: none;
  position: relative;
  padding: 50px 0;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 300px; width: 250px;
    border-radius: 7.5px;
    position: absolute; left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{

      }
      p{

      }
    }
    
    /* &.transformation {
      transform: scale(1.5);
    }  -- second way */
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
    
  }

  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 560px;
      }

      &.card-2{
        left: 280px;
      }

      &.card-3{
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="cards" id="cardsParent">
    <li class="title">
        <h2>Foncemagne, Étienne Lauréault</h2>
    </li>
    <li id="card-1" class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
    </li>
    <li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
    </li>
    <li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
    </li>
</ul>

<div style="height:100px;background-color:grey;color:white;text-align:center;">
click here or anywhere for close/change to default image
</div>

u can see in this link

https://jsfiddle.net/Lzp74drj/2/

I hope this is useful.