I'm creating a gallery for a responsive lay-out - I am using jQuery Riding Carousels for the thumbnails.

When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal ...

I'm doing it like this at present:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
  });
});
</script>

... the JS simply hooks up a class, but it doesn't do so if you re-size the browser window by dragging it - you need to refresh the page.

Is there a way to destroy the script and re-initialize it on the fly?

I'm creating a gallery for a responsive lay-out - I am using jQuery Riding Carousels for the thumbnails.

When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal ...

I'm doing it like this at present:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
  });
});
</script>

... the JS simply hooks up a class, but it doesn't do so if you re-size the browser window by dragging it - you need to refresh the page.

Is there a way to destroy the script and re-initialize it on the fly?

• javascript
• jquery
• resize
• window
• carousel

• Solution Added with working example. – gaurang171 Commented Jul 6, 2012 at 22:57

4 Answers 4

Please check Working exmpale: http://codebins./bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize Tested in all browsers and works perfectly fine. bounty is mine :) In the example i have give threshold widht 350 you can test it by resizing the result pane and as soon as you start havin horizontal scroll bar it will converted to vertical.

1 possible issue depending on your requirement is if you ahve any handlers on images they will be gone after changing display way. the solution for it is wrap your #mycarousel in a div and use Jquery delegate to handle events on the wrapper so no issue with events also. Let me know if you e under this situation.

Following code is exactly as per your need.

When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal .

which is revers form the example as for me it makes more sense if width is less make it vertical.

jQuery(document).ready(function() {
    var widthCheck = 1008;
    var resizeTimer = null,
        verticalFlg = $(window).width() > widthCheck;
    var obj = jQuery('#mycarousel').clone();
    $('#mycarousel').jcarousel({
        vertical: verticalFlg,
        scroll: 2
    });
    jQuery(window).resize(function() {
        resizeTimer && clearTimeout(resizeTimer); // Cleraring old timer to avoid unwanted resize calls.
        resizeTimer = setTimeout(function() {
            var flg = ($(window).width() > widthCheck);
            if (verticalFlg != flg) {
                verticalFlg = flg;
                $('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
                $('#mycarousel').jcarousel({
                    vertical: verticalFlg,
                    scroll: 2
                });
            }
        }, 200);
    });
})

Or you can look at the source. I'm guessing you are using version 0.2

Looking at the source https://github./jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.js we can see that there are two lines (80 and 81) which are only done in object init. Those lines are

this.wh = !this.options.vertical ? 'width' : 'height';
this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';

also this line at 149

if (!this.options.vertical && this.options.rtl) {
  this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}

It might be if you add those to the callback you will get better results.

You could also try version 0.3 of the plugin.

Prior answer:

Can't test it myself right now, but try this:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
    reloadCallback: function () {
        this.options.vertical = $(window).width() > 1008;
    },
  });
});
</script>

<script type="text/javascript">
    jQuery(document).ready(function() {
      var sizeCheck = function() {
        return $(window).outerWidth() >= 1024
      }
      jQuery('#mycarousel').jcarousel({
        vertical: sizeCheck(),
        scroll: 3,
      });
      var jCarousel = jQuery('#mycarousel').data('jcarousel');
      window.onresize = function() {
        jCarousel.options.vertical = sizeCheck(); // maybe you have to access the option through jCarousel.plugin.options.vertical
        jCarousel.reset();
      }
    });
    </script>

Maybe this works.

I haven't tested the following code, but I am fairly sure the following code should work:

<script type="text/javascript">
    var carousel;
    jQuery(window).resize(function() {
        if(carousel !== undefined) carousel.destroy();
        carousel = jQuery('#mycarousel').jcarousel({
            vertical: $(window).width() > 1008,
            scroll: 3,
        });
    });
</script>

or even better something along the lines of:

<script type="text/javascript">
    var carousel;
    jQuery(document).ready(function() {
        carousel = jQuery('#mycarousel').jcarousel({
            vertical: $(window).width() > 1008,
            scroll: 3,
        });
    });
    jQuery(window).resize(function() {
        //NOT SURE WHICH OF THE BELOW LINES WOULD WORK, try both and check which works
        carousel.options.vertical = $(window).width() > 1008;
        carousel.vertical = $(window).width() > 1008;
        carousel.reload();
    });
</script>

If it does not, you should add a console.log(carousel) to your code and check out what the prototype is of the outputted value (check F12). There should be something along the lines of destroy (or alternatively check console.log($.jcarousel())).