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
img srcset
of the small preview image also asdata-srcset
for Fancybox' JS large image. By theory the browser should select the small src for the block and Fancybox should load the large src for the lightbox