My trick to add Colorbox popup on Slideshow images in Drupal 8

Hello, If you want to show any slider image in the popup form on click on image
here is the my funny or easy trick to do it. i hope it will work for you :)

Trick 1 :-  I have a task that i have created a slider using image fieldslideshow , i have done this by using view and just set image formatter as image fieldslideshow but now requirement is that when we click on the image it should be open as colorbox popup.


solution : -
   step 1 :- I have added a same image field in view and set formatter "colorbox" and excluded that filed, its all because shwo we can found colorbox library on required page.

step 2 :-  just change twig file structure according colorbox :-

From :-

{% for key,value in url %}
            <img src="{{ value }}" />
        {% endfor %}


To :-

{% for key,value in url %}
    <a href="{{ value }}" class="colorbox cboxElement"><img src="{{ value }}" /></a>
    {% endfor %}

Step 3 :- Now you will be able to see popup on your slider image

 

Trick 2 - Need to add popup on field slide show image.

Step 1:- i have set filed slideshow on display format of image and link image to file.

Step 2:- create a other image field to and set Colorbox format to call Colorbox library, set a default image in this field, disable from disaplay form, and just add Css for display none.

Step 3 :- there is same structure which we want for colorbox popup except colorbox class so i have  added class using jquery

jQuery('.field--name-field-product-image .field-slideshow').find('a').addClass('colorbox cboxElement');