Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Is there a way for Fresco.js and Slick.js to get along?

Hello there!

I've recently purchased the unlimited license for fresco, which is beautiful and great to use. But I've run into some troubles trying to combine it with another library called slick.js.

Slick.js creates sliders and carousels from a specified set of images.
To wrap around the carousel, slick clones the images and puts the clones on the other side of the carousels on the fly. Even when those clones aren't visible, they use the same class property as Fresco.js, causing fresco to parse the cloned images in the gallery, resulting in duplicate images in the thumbnail bar and a much higher image count .

This isn't really a bug with either library, they just weren't designed to work with another. But I wonder if there might be a workaround or another way for them to get along - for example using the Fresco Javascript API?

My idea was to link each image in the carousel to a group specified in the script, while passing along the position number of the image to show in the gallery?

Fresco.show([
  { url: 'image1.jpg', caption: 'Caption for this image' },
  { url: 'image2.jpg', caption: 'Another caption' }
]);

Fresco.show(['image1.jpg', 'image2.jpg'], 2);

I'm not JS savvy enough to know how I would pass the image number, or even to consider the issues that might arise from this approach. It'd probably be a total hack too, so I'd be happy for any any pointers on how the issue could be tackled.

If this just isn't possible with the current architecture of either library, is there another carousel library that might work with Fresco.js?

Thanks!

Comments

  • Something like this should work, but it feels like a hack:

    <a href='#' class='fresco-custom' data-group='foo' data-position='1'>1</a>
    <a href='#' class='fresco-custom' data-group='foo' data-position='2'>2</a>
    <a href='#' class='fresco-custom' data-group='foo' data-position='3'>3</a>
    <a href='#' class='fresco-custom' data-group='bar' data-position='1'>1</a>
    
    <script>
    $(document).ready(function() {
      var frescoCustomGroups = {
        'foo': ['image1.jpg', 'image2.jpg', 'image3.jpg'],
        'bar': ['image1.jpg']
      };
    
      $(document).on('click', '.fresco-custom[data-group][data-position]', function(event) {
        event.preventDefault();
    
        var element = $(event.currentTarget),
              group = frescoCustomGroups[element.data('group'),
              position = parseInt(element.data('position'));
    
        Fresco.show(group, position);
      });
    });
    </script>
    

    It would be better to find a slider that doesn't mess with the order of the DOM, only repositioning elements visually.

  • Hey Nick,

    thank you for the swift response. Unfortunately I couldn't get the code to work - I'll try and see if I can find another carousel solution as it seems that is what's messing things up.
    Thanks again & all the best,
    Clemens

Sign In or Register to comment.