Resizing conflict between isotope, prettyPhoto, boostrap and slider.
I have a conflict which seems to have cascaded. A clients vCard website is using bootstrap, isotope, prettyPhoto and a jquery responsive slider.
http://www.precisiondesignandconstruction.com/dev/.
When an image was enlarged on the Portfolio tab using prettyPhoto the height and width of the slider on the Welcome tab ended up being set to small negative values. I was able to fix the problem with this code I was given.
- $("#home-tab").on("show", function() {
- setTimeout(
- function() { jQuery(".responsiveholder").trigger("resize") },
- 200);
- });
Unfortunately this broke the layout on the Portfolio tab. If you selected one of the filters on the Portfolio tab, went to the Welcome tab and returned to the Portfolio tab all the images were sitting on top of one another in the top-left corner of the tab. I was able to fix this using:
- $('#portfoliopage-tab').on("show", function(){
- setTimeout(
- function() {
- var container = jQuery('#portfolio');
- container.isotope( 'reLayout' )},
- 200);
- });
The images "relayout" when returning from the Welcome tab. But seeing as the problem doesn't happen when going to any of the other tabs it looks a little weird returning from those and not having the "relayout" occur. Unfortunately this solution doesn't work on a Galaxy tablet.
Is there a better and/or simpler method that would resolve the issues or is this the best I'm going to get? I am very new to jQuery and still trying to get a handle on everything.
Thanks!