2

first post so hopefully i've followed protocol.

I'm using bxslider with colio on my site - specifically trying to add the bxSlider gallery within the hidden colio content. I saw on previous questions people having an issue initiating the gallery due to it being within a hidden div here

I did a test with a toggled hidden div which worked fine

But can't get it to work with colio: my_colio_test

Any ideas?

So Javascript for my_colio_test:

<script type="text/javascript">
$(document).ready(function(){

    var mySlider;

    mySlider = $('.bxslider').bxSlider({
    auto: true,
    video: true,
    useCSS: false
    });



        // "scrollTop" plugin
        $.scrollUp();


        // "colio" plugin
        $('.portfolio .list').colio({
            id: 'my_portfolio',
            theme: 'black',
            placement: 'inside',
            hiddenItems: '.isotope-hidden',
            onContent: function(content){
                 $(".holder").show(); 
                 mySlider.reloadSlider(); 
            }
        });




        // "isotope" plugin
        var filter = '*', isotope_run = function(f) {
            var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});      
            window.setTimeout(function(){
                list.trigger('colio','excludeHidden');
            }, 25);
        };

        $('.portfolio .filters a').click(function(){
            $(this).addClass('filter-active').siblings().removeClass('filter-active');
            var href = $(this).attr('href').substr(1);
            filter = href ? '.' + href : '*';
            isotope_run(filter);
            return false;
        });

        isotope_run(filter);            

    });
</script>

In the toggle test i did an initial function defining the slider so it initated:

    <script type="text/javascript">
$(document).ready(function(){
        var mySlider;

        mySlider = $('.bxslider').bxSlider({
        auto: true,
        video: true,
        useCSS: false
        });



      var $content = $(".content").hide();
      $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
        $content.slideToggle();

        $(".holder").show();     // DIV that contain SLIDER
        mySlider.reloadSlider();   
      });


    });
</script>

Steven wanderski - bxSlider developer about having to initialise hidden slider:

Since the slider cannot calculate the height and width's of hidden elements, you need to either call .bxSlider after the elements have been set to display:block, or move them off screen, set them to display: block, initialize the slider, then hide them.

SO I've sort of got it to work - yay. In the CSS the colio-content is set to display:none - so i removed it and put it in the javascript function instead. Only issue i have now is that i get replicated/duplicated sliders as i don't know how to target.

Where i'm at now: my_colio_test_2

Community
  • 1
  • 1
Lis_locket
  • 21
  • 2
  • Welcome to SO. Please add the relevant code to your question. – Luís Cruz Oct 30 '14 at 14:50
  • Thanks milz! I added the URLS to the tests i'd done as thought it might be a bit clearer than pasting the code in. – Lis_locket Oct 30 '14 at 14:58
  • Why do you reload the slider? Do you add new content, new settings to it? And why do you have the jQuery ready state 2 times? $(function() is the same as $( document ).ready(function() :) – Bojan Petkovski Oct 30 '14 at 15:10
  • @Lis_locket it's always better if you post the code in your questions/answers. Doing this guarantees that future readers or readers with the same issue have always access to the information. Having said this, providing a link or a fiddle is always a bonus : ) – Luís Cruz Oct 30 '14 at 15:24
  • @milz thanks - the code is super long and *sloppy* - should i put the html in too? Cheers for your help & patience – Lis_locket Oct 30 '14 at 15:28
  • @Bojan Thanks sorry - it should be pretty apparent i'm pretty new to javascript have tidied up code so the ready state is only done the once (updated the javascript above and on the urls). I've reloaded the slider due to what I read from the developer of bxslider, quoted above. Thanks for looking I know i'm being a ditz – Lis_locket Oct 30 '14 at 15:37
  • I ran into this exact issue when trying to do the same thing except I made what Colio does. I ended up giving up (Not worth the time) but what if you called the .bxSlider inside of the click function? That way it would run after Colio has run. You could also add a delay on click before it runs bxSlider to make sure that it is open. – austinthedeveloper Oct 30 '14 at 16:10
  • Ah man - thought this was just tough as I was being daft & had missed something. Thanks for the heads up - think i'm already beyond my capabilities and trying to amend the colio code would be a bit too tough for me. Will keep plugging away - am trying to get it to work for my portfolio. Checked yours out @austinthedeveloper nice! – Lis_locket Oct 30 '14 at 17:22

0 Answers0