create new image style using javascript

Question

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('<a class="fancybox" data-fancybox="gallery" href="/sites/my_site/files/' + StyleCutPath + '"></a>'); });

  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

Answer 1

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 %}
      <a data-fancybox="group" href="{{ url }}">{{ image }}</a>
    {% else %}
      {{ image }}
    {% endif %}