Monitor Reply

Support

Filmstrip Gallery not working with bootstrap accordion

Permalink Browser Info Environment October 18, 2017 at 3:42 PM

We have an issue with the Filmstrip Gallery when used inside the bootstrap accordion which does not happen outside the accordion.
When the gallery is placed inside the accordion, all looks fine until the the page is published. There is no gallery there - when logged in or out it is not there. Sometimes it appears and then disappears again when the page is refreshed.
Here is the page where we have it appearing:http://karas.co.uk/newsite/index.php/contact-us...
Here is the page where it is not working:http://karas.co.uk/newsite/index.php/process...
The gallery is in section two (Alocrom 1200).

Can you see what the confilct is?

Thanks

Fergus

Type:	Pre-Sale
Status:	Resolved

emirii replied on Oct 18, 2017 at 7:01 pm Permalink Reply

Hi there, yes I have had a similar problem before!

The slideshow needs to be re-initialized in jQuery on expansion so that the width and height of the slideshow appear correctly.

Make sure the ID matches the accordion...

$('#accordion').on('shown.bs.collapse', function () {
  $('.flexslider').flexslider();
})

https://v4-alpha.getbootstrap.com/components/collapse/#events...

Let me know if this does the trick, if not I will try a demo myself, as I am just remembering from memory. :)

ferg replied on Oct 19, 2017 at 10:48 am Permalink Reply

Hi there

Sorry, but that has not fixed the issue - not sure if it something that we're doing wrony!
If you could try the demo that would be great.

Thanks

Ferg

emirii replied on Oct 22, 2017 at 1:14 am Permalink Reply

Hi there, thanks for your patience, I wish I could have gotten to this a bit sooner but things kept getting in the way.

I made a jsFiddle with working example!
https://jsfiddle.net/um3hpuzv/24/...

You should just have to put in the bottom of the page this code for it to work (taking the id of element from your website you provided):

$('#collapseTwo').on('shown.bs.collapse', function () {
    $.each($('.flexslider'), function(i, v) {
      $(v).data('flexslider').setup();
    });
})

apparently it's a pretty nasty bug in Flexslider. Hmmm.. :(

Hope this helps! Thanks!

ferg replied on Oct 23, 2017 at 8:40 am Permalink Reply

Hi there

Thanks for the help - the filmstrip is now showing on the accordion.
Follow-up question (sorry!)

Where is the setting that would allow us to change the height of the filmstrip container? Currently it appears to be 150px high - the client would prefer smaller thumbnails - say 50px high. I few set the images at 50px, then they just blow up to the 150px high container and pixelate. - you can see it here:http://karas.co.uk/newsite/index.php/process... - click on the second section down, "Alocrom 1200 ...".

Many thanks for the support.

Kind Regards

Ferg

-----Original Message-----
From: concrete5 Community [mailto:discussions@concretecms.com]
Sent: 22 October 2017 02:14
To: fergus@jagseven.co.uk
Subject: Filmstrip Gallery not working with bootstrap accordion : Support

GalleryES

Support

Filmstrip Gallery not working with bootstrap accordion

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post