create new image style using javascript I am using fancybox JS library for creating a slideshow from a custom bloc with a multivalue image field.

it works but the images on the slideshow are small because a style have been applied to the images.

I then get the original size image using a substring JS function but it is not entirely satisfying

(function ($, Drupal) {

  $('.bloc-image-gallery img').each(function (){
    var currentImage = $(this);
    var path=currentImage.attr("src");
    var StyleCutPath = path.substring(
      path.lastIndexOf("/") -7,
      path.lastIndexOf("?")
    );
    currentImage.wrap('&lt;a class="fancybox" data-fancybox="gallery" href="/sites/my_site/files/' + StyleCutPath + '"&gt;&lt;/a&gt;'); });

  Drupal.behaviors.fancyBoxInit = {
    attach: function (context, settings) {
      $('[data-fancybox="gallery"]', context).once('fancyBoxInit').fancybox({
        buttons: [
          'close'
        ]
      });
    }
  }
})(jQuery, Drupal); 


I wonder how i could get the href with an new style applied to it ( bigger image but not original size )

The src takes this form 


  /sites/my_site/files/styles/directory_user_photo/public/2018-09/seminary.png?itok=5597asHF


i made it to 


  /sites/my_site/files/2018-09/seminary.png


but i would rather have smthg as


  /sites/my_site/files/styles/my_new_style_adapted_to_full_screen_visio/public/2018-09/seminary.png?itok=5597asHF
clive would suggest to create a new Formatter for image type fields that would allow in the render display to select a image style for the image link.

At least i could do "In the field formatter settings you can tell the image to render in one style, but link through to the full image" and clean the code to:

(function ($, Drupal) {

  Drupal.behaviors.fancyBoxInit = {
    attach: function (context, settings) {
      $('[data-fancybox="gallery"]', context).once('fancyBoxInit').fancybox({
        buttons: [
          'close'
        ]
      });
    }
  }
})(jQuery, Drupal); 


with in image-formatter--media--image--field-media-image.html.twig

   {% if url %}
      &lt;a data-fancybox="group" href="{{ url }}"&gt;{{ image }}&lt;/a&gt;
    {% else %}
      {{ image }}
    {% endif %}