Jquery Cycle2 on Screen Resize

Hi,

Im currently in the process of make a responsive website and would like to use the Cycle2 jQuery plugin (http://jquery.malsup.com/cycle2/) for a slideshow only if the screen width is below 768px.

My first thought would be to add the 'cycle-slideshow' class to the object and the HTML5 data attributes (i.e. data-cycle-speed="1500") when the screen size goes under 768px then remove the class and stop the slideshow (and restyle) when over 768px. The jQuery would need to detect the screen size on page load too and apply/remove the class if over/under 768px.

Could someone help with this? Im not sure where to start and not an expert in jQuery.

We are using jQuery v1.7.2 as well.
JiveMediaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Duy PhamFreelance IT ConsultantCommented:
You can simply check for screen width and only turn on slideshows if width > 768px, for example:
$(document).ready(function () {
    if ($(window).width() > 768) {
        $('body').cycle();
    }
});

Open in new window

0
JiveMediaAuthor Commented:
Hi Duy,

Thanks for your reply.

That works fine if the page is loaded when already above or below that window size (depends if the statement is greater or less that 768).

If viewing on a desktop browser and i start off below 768 and resize the window up, it doesn't stop the slideshow and the images are all positioned under each other (due to the cycle2 inline styles i take it). I was wondering if its possible to start and stop it on the fly (adding and removing cycle2 logic) depending on the window size when i scale it up and down below that break point.

Does that make sense?
0
F PCommented:
http://jquery.malsup.com/cycle2/api/

Once you've started cycling, the API documentation says you can destroy it, stop it pause it, or whatever you'd like:

$('body').cycle();
$('body').pause();
$('body').destroy();

Open in new window


Commands
Commands are issued to slideshows by invoking cycle on the container element and passing it a string argument, which is the command name.

It is not valid to issue a command to an element that has not previously been initialized as a Cycle2 slideshow.
Command      Description      Argument      Example Usage
add      Adds one or more slides to the slideshow.      Slide markup or jQuery object      
var newSlide = '<img src="pic.jpg">';
$('.cycle-slideshow').cycle('add', newSlide);
destroy      Restores slideshow DOM to it's original state (and unbinds events).      none      
$('.cycle-slideshow').cycle('destroy');
goto      Transitions the slideshow to the slide index provided.      zero-based slide index      
// goto 3rd slide
$('.cycle-slideshow').cycle('goto', 2);
next      Transitions the slideshow to the next slide.      none      
$('.cycle-slideshow').cycle('next');
pause      Pauses an auto-running slideshow.      none      
$('.cycle-slideshow').cycle('pause');
prev      Transitions the slideshow to the previous slide.      none      
$('.cycle-slideshow').cycle('prev');
reinit      Reinitializes a slideshow. This is equivalent to issuing the 'destroy' command and then invoking cycle() again.      none      
$('.cycle-slideshow').cycle('reinit');
remove      Removes a slide from a running slideshow      zero-based slide index      
// remove 2nd slide
$('.cycle-slideshow').cycle('remove', 1);
resume      Resumes a paused slideshow.      none      
$('.cycle-slideshow').cycle('resume');
stop      Stops an auto-running slideshow.      none      
$('.cycle-slideshow').cycle('stop');

and more... Just manipulate the object based upon whatever logic you need it to act on.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Duy PhamFreelance IT ConsultantCommented:
Try to handle resize event, and either start/stop (or destroy/create slideshows accordingly):
$(window).resize(function() {
    if ($(window).width() <= 768) {
        $('body').cycle('destroy');
    }
    else {
        $('body').cycle();
    }
});

Open in new window

0
JiveMediaAuthor Commented:
Hey Duy,

Thanks for your help so far.

I have it working with the following code:
$(document).ready(function() {
  if ($(window).width() < 768) {
    $('#course_cta ul, #course_cta_info ul').cycle();
  }
  $(window).resize(function() {
    if ($(window).width() > 768) {
      $('#course_cta ul, #course_cta_info ul').cycle('destroy');
    } else {
      $('#course_cta ul, #course_cta_info ul').cycle();
    }
  });
});

Open in new window


However when looking in the web inspector log i see the following message:
[cycle2] slideshow must be initialized before sending commands; "destroy" ignored

Any advice on the above code and how to fix this error?
0
F PCommented:
Why couldn't you do this instead?

$(document).ready(function() {
  var cta_info = $('#course_cta ul, #course_cta_info ul');

  cta_info.cycle();
  cta_info.cycle('pause');

  if ($(window).width() < 768) {
    cta_info.cycle('resume');
  }

  $(window).resize(function() {
    if ($(window).width() > 768) {
      cta_info.cycle('destroy');
    } else {
      cta_info.cycle('reinit');
    }
  });
});

Open in new window

0
F PCommented:
Also, jQuery is just that. It queries your DOM, and is a function. Every time you write something like:

$('#course_cta ul, #course_cta_info ul')

... you're having the code look at the entire document again and go over it just to find an object it just found. It's very inefficient. When writing within the same scope, try to just assign a variable to the object in memory without having to look for it after you've already found it.
0
JiveMediaAuthor Commented:
Hi Frank,

I copy and pasted that code into my website and now it doesn't seem to be working at all!

Not sure why, it looks like it would be correct!
0
F PCommented:
The only thing I could see, and it wouldn't let me edit it here again... is to use the query selector and not the variable inside the anonymous function for the window resize.

$(window).resize(function() {
    if ($(window).width() > 768) {
      $('#course_cta ul, #course_cta_info ul').cycle('destroy');
    } else {
      $('#course_cta ul, #course_cta_info ul').cycle('reinit');
    }
  });
0
Duy PhamFreelance IT ConsultantCommented:
You don't need to worry about that. It just a warning when you try to destroy slideshows before it's initialized. But Cycle2 does already ignore that destroy command:  "destroy" ignored.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.