Hi, new to Couch, doing my first site with it and so far love it!
Nearly ready to pass it on to the client but have one question first.

How do I set the Featured Image Slider created during the Home Page Tutorial to Auto Scroll?

I know this is probably a very basic tweak but I've searched the forums for a couple of days and haven't found the answer.

Cheers,
GG

[KK]

Hi GG,

That is really a front-end issue that will require tweaking the JS used by the site (that is to say it has little to do with Couch).

I am usually out of my depth dealing with JS so perhaps someone from our community could chip in with the solution or any suggestion?

At the beggining you have this function:

Code: Select all

<script type="text/javascript">
      $(document).ready(function() { //Start up our Featured Project Carosuel
         $('#featured ul').roundabout({
            easing: 'easeOutInCirc',
            duration: 600
         });
      });
   </script>

So it's a "Roundabout" carousel.

Just add the options:

Code: Select all

autoplay:true, 
autoplayDuration:5000, 
autoplayPauseOnHover:true

Adjust as needed.
Should end like:

Code: Select all

<script type="text/javascript">
      $(document).ready(function() { //Start up our Featured Project Carosuel
         $('#featured ul').roundabout({
            easing: 'easeOutInCirc',
            duration: 600,
            autoplay:true, 
            autoplayDuration:5000, 
            autoplayPauseOnHover:true
         });
      });
   </script>

Thanks for the reply LordNeo

Unfortunately, that didn't do the trick. I actually tried various switches with it before posting and nothing seemed to work.
Had a look through the js for the carousel and couldn't find any hints to what switch to use, maybe there is none for this script. Might need to look at some other js for a carousel/roundabout style slider.

Cheers,
GG 8-)

OK, finally got it working...

Got the latest jquery.roundabout.js from Fred LeBlanc's GitHub. It's a few years old and no longer supported but found that using this full version, instead of the .min.js, solved the issue.

For anyone else having the same problem here's the code I used for my home page and portfolio page.

index.php

Code: Select all

   <!-- Scripts -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="<cms:show k_site_link />js/jquery.roundabout.js"></script>
   <script type="text/javascript" src="<cms:show k_site_link />js/jquery.easing.1.3.js"></script>
   <script type="text/javascript" src="<cms:show k_site_link />js/jquery.roundabout-shapes.js"></script>
   <script type="text/javascript">
      $(document).ready(function() { //Start up our Featured Project Carosuel
         $('#featured ul').roundabout({
            easing: 'easeOutInCirc',
            duration: 600,
            autoplay: true, 
            autoplayDuration: 3000, 
            autoplayPauseOnHover: true
         });
      });
   </script>

portfolio.php

Code: Select all

   <!-- Scripts -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script type="text/javascript" src="<cms:show k_site_link />js/jquery.roundabout.js"></script> 
   <script type="text/javascript" src="<cms:show k_site_link />js/jquery.easing.1.3.js"></script>
   <script type="text/javascript" src="<cms:show k_site_link />js/jquery.roundabout-shapes.js"></script>
   <script type="text/javascript">         
      $(document).ready(function() { //Start up our Project Preview Carosuel
         $('ul#folio_scroller').roundabout({
            easing: 'easeOutInCirc',
            shape: 'waterWheel',
            duration: 600,
            autoplay: true, 
            autoplayDuration: 3000, 
            autoplayPauseOnHover: true
         });
      });
   </script>  

Cheers,
8-)