Simple News Slider

Dr.CSS · Post by **Dr.CSS** » Tue May 08, 2012 8:08 pm

The simplest most basic news slider using the cycle script...

In the <head> of page template...

<__script__ type="text/javascript" src="uploads/jq/jquery162.js"></__script>
<__script__ type="text/javascript" src="uploads/jq/cycle.js"></__script>
<__script__ type="text/javascript">{literal}
$(document).ready(function() {
$('#newsslider').cycle({
fx: 'scrollUp'
});
});{/literal}
</__script>

News Summary template...


**********************
<div id='newsslider'>
{foreach from=$items item=entry}
<div class="NewsSummary">

********** normal news calls******************

</div>
{/foreach}
</div>


See it here...

http://dezertdesign.com/drippy.html

Post by **manuel** » Wed May 09, 2012 9:44 am

Hi Dr.CSS,

Thanks for sharing, seems great!
I'm looking forward to testing the various effects for fun but i guess the "cleanest" one to use will indeed be the scrollUp one

Greetings,
Manuel

elkman · Post by **elkman** » Wed May 16, 2012 10:53 pm

Hi Dr. CSS,

Great idea! I was able to convert it to make a more useful quotes scroller.

Thank you for sharing!!!

elkman · Post by **elkman** » Sun Jul 15, 2012 11:17 pm

I can't seem to find the correct line of code in the jQuery to slow the scrolling speed down. Can anyone assist?

Thanks!

Rolf · Post by **Rolf** » Mon Jul 16, 2012 6:38 am

elkman wrote:I can't seem to find the correct line of code in the jQuery to slow the scrolling speed down.

Have you looked here
http://malsup.com/jquery/cycle/options.html?

Grtz. Rolf

elkman · Post by **elkman** » Mon Jul 16, 2012 10:24 am

Hi Rolf,

Yes, I did look here and tried several modifications of the "Speed" and "Timeout" functions without viewing any change to the scrolling speed.

Code: Select all

    speed:         1000,  // speed of the transition (any valid fx speed value) 
    speedIn:       null,  // speed of the 'in' transition 
    speedOut:      null,  // speed of the 'out' transition 
    startingSlide: 0,     // zero-based index of the first slide to be displayed 
    sync:          1,     // true if in/out transitions should occur simultaneously 
    timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)

I've also tried changing it here:

Code: Select all

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></__script>
<__script__ type="text/javascript" src="uploads/jq/cycle.js"></__script>
<__script__ type="text/javascript">{literal}
$(document).ready(function() {
$('#newsslider').cycle({
fx: 'scrollUp'
});
});{/literal}
</__script>

as shown in the example located here: http://jquery.malsup.com/cycle/begin.html

I believe it's here but changing timeout: to 12000 caused no change in the scrolling speed. Any ideas?

Rolf · Post by **Rolf** » Mon Jul 16, 2012 2:55 pm

Just checked, I use "timeout" for timing the time to display.

elkman · Post by **elkman** » Mon Jul 16, 2012 5:23 pm

Thanks for the feedback Rolf. I have changed the "timeout" multiple times now with apparently no effect on the scrolling speed.

On the malsup forum it was suggested to try the "easing". I am now wondering if my problem is caused due to using the Showtime module and the Cycle JQuery on the same page. Perhaps they are interfering with each other.

Thanks again for your response. It is appreciated!

Elkman

elkman · Post by **elkman** » Mon Jul 16, 2012 5:40 pm

Ok, found the source of the problem. I blocked out the Showtime module and then the scrolling functioned correctly using the "timeout" parameter.

Now I have to learn how to get them both to work on the same page.

Elkman

CMS Made Simple Forums

Simple News Slider

Simple News Slider

Re: Simple News Slider

Re: Simple News Slider

Re: Simple News Slider

Re: Simple News Slider

Re: Simple News Slider

Re: Simple News Slider

Re: Simple News Slider

Re: Simple News Slider