jQuery

[Aruffell]

My site www.eteknix.com

It has a jquery slideshow at the top. I've got it to automagically scroll but you can use the arrows if you wish. Only problem i have is when you get to the last one, and press right again, it goes alllllll the way back to the beginning scrolling through all the ones you just saw.

I want it to loop so the first one comes after the last one just as if it was going round and round instead of skipping back to the first one.

Make sense?

Here's the code:

$('#header3').serialScroll({
target:'#sections',
items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
prev:'div.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
next:'div.next',// Selector to the 'next' button (absolute too)
axis:'xy',// The default is 'y' scroll on both ways
navigation:'#navigation li a',
duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)

//queue:false,// We scroll on both axes, scroll both at the same time.
//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
//stop:false,// Each click will stop any previous animations of the target. (false by default)
//lock:true, // Ignore events if already animating (true by default)
//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )
//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
interval:6000, // It's the number of milliseconds to automatically go to the next
//constant:true, // constant speed

Thanks,

Andy

 

[Tripnologist]

SerialScroll (which is what you're using) doesn't allow the option to loop back to the beginning how you would like it to. Your easiest bet is to just use a different slider.
http://github.com/nathansearles/loopedSlider/tree/master


Also, it's a bad idea to use multiple js libraries. You're currently using prototype and jquery. Best thing to do is to pick one and stick with it.

 

[Aruffell]

SerialScroll (which is what you're using) doesn't allow the option to loop back to the beginning how you would like it to. Your easiest bet is to just use a different slider.
http://github.com/nathansearles/loopedSlider/tree/master


Also, it's a bad idea to use multiple js libraries. You're currently using prototype and jquery. Best thing to do is to pick one and stick with it.

Completely lost me there

Should have said that i don't have a clue about this, am ok with html and php, but js is completely new to me

Andy

 

[Tripnologist]

Okay, for your scroller, the scroller you are using is called SerialScroll. This particular scroller 'rewinds' to the beginning rather than loops through. You won't be able to change this without editing the script a fair bit. You have three options:
1. Live with it.
2. Pay someone to edit the script for you.
3. Use a different script.

The one I linked in my first post loops around like you want. I don't know if it auto scrolls but that should be easy enough to add.


----------

Jquery is a js library. Prototype is another js library. It's not a good idea to use multiple libraries if you can help it. No reason to load two large libraries when you only need one. I would replace anything currently using prototype with a jquery equiv. Then you can remove the big prototype file and enjoy a slightly quicker pageload (when not cached obviously).

 

[Aruffell]

How much you charge then trip ?

I don't know what prototype is either, really don't understand of of this.

Andy

 

[Tripnologist]

Wish I could but adding that functionality to the plugin would take me quite a bit of time as I've not done anything like that before. Unfortunately, as I'm currently working 12-17 hours a day, time is something I don't have a lot of


The scroller you're using now, is it built into your theme or do you just copy the format of one of your entries when you add a new one?
If it's not been 'integrated', it would be a piece of cake to swap for a new plugin.

 

[suarve]

How much you charge then trip ?

I don't know what prototype is either, really don't understand of of this.

Andy

At the top of your page in the head tag you have included both frameworks:

<script type='text/javascript' src='[URL="http://forums.overclockers.co.uk/view-source:http://www.eteknix.com/wp-includes/js/prototype.js?ver=1.6"]http://www.eteknix.com/wp-includes/js/prototype.js?ver=1.6[/URL]'></script>
<script type='text/javascript' src='[URL="http://forums.overclockers.co.uk/view-source:http://www.eteknix.com/wp-includes/js/jquery/jquery.js?ver=1.3.2"]http://www.eteknix.com/wp-includes/js/jquery/jquery.js?ver=1.3.2[/URL]'></script>

See jquery.com and prototypejs.org

They are both JavaScript framworks that make working with JavaScript easier. As said above, it's best to use one and stick to it.

 

[Spunj99]

Stick with jQuery and then try the "Cycle" plugin, in particular the "pager" type slideshows.

jQuery Cycle

You're after a something like the top of this page here, only a lot prettier and with a timeout so it scrolls automatically.

I've created something exactly like what you're trying to do for a client before with jQuery Cycle, better not post to it though since they're most like classed as competitors.