Javascript forward backward buttons - javascript

I'm using the s3Slider javascript slideshow on the homepage of a site I am developing:
http://alexisparkinn.com/
I really like this slideshow but it has no way to enable the user to go to the next or previous image.
How can I add these buttons? Does anybody know the necessary javascript code I need to use or what changes should be made.
Suggestions? Any help would be greatly appreciated.
Thanks!

I know you didn't ask for suggestions, but let me just throw this out there as a solution:
http://jquery.malsup.com/cycle/
After messing around with a ton of sliders, I've ended up going back to this one time after time. (and there is a 4KB version if all you want is the fade effect)
It has pretty decent documentation and is overall pretty easy and straightforward to use.
Anyway, just wanted to throw that out there. Best of luck to you!

Just to hack something in, I'd modify your s3slider copy to include something like this (insert at line 38)
$(element).bind("s3slidernext", function() {
current = items[currNo+1];
fadeElement(false);
});
Then you can probably just call
$('#s3slider').trigger("s3slidernext");
To move the slider forward. Bind that to a button and you're all set.

there are many jquery libraries that can help you out there like http://sorgalla.com/projects/jcarousel/

Related

To change group image(what's the _calcBounds() do?)

When we want to change the src,we can use setElement().
The Example such like
`https://jsbin.com/lowuqezofu/1/edit?html,js,output`
It changes when we click the button at the bottom.
But when I add the image to the group like
`https://jsbin.com/xerureviwe/edit?html,js,output`
I want to use _CalcBounds() to update the group,but it runs error.
So I find the other document to solve it.
Here is the people who have related questions on it.
Because I haven't see this function on official tutorial of website.
I think I may not make some mistake.
If we don't need addWithUpdate() or removeWithUpdate() just set image src,is this method can do update function we want?
If not,is there any alternative to do this way?
Thanks for others view the question.
However,I haven't find the suitable solution yet.
I use addWithUpdate() and removeWithUpdate() stupidly instead of using _calcbounds() which function I don't really understand.
It's not a good answer indeed.
But non-perfect solution can solve our problem,that's enough.
Thanks everyone again and please forgive my poor English.

Creating Auto-Scrolling Gallery with JQuery; Need advice on correct code

I'm trying to create an auto-scrolling image gallery from scratch. Right now, I've written the images to change when a hover occurs.
My theory was that I could use '.ready' and create a loop of these functions. I attempted to create it but I still don't know how to recall these functions correctly.
What event(s) would I use to create a looping occurrence of this effect? I'm also looking for critique on my thinking here so I appreciate any insight outside of the plain answer.
Here's the code! Thanks guys!
$(document).ready(function() {
$('#blinds_1').show();
$('#blinds_2').hide();
$("#blinds_1").mouseover(function(){
$('#blinds_1').fadeOut(600);
$('#blinds_2').slideDown(600);
});
$("#blinds_2").mouseout(function(){
$('#blinds_1').slideDown(600);
$('#blinds_2').fadeOut(600);
});
});

How to create 2 Image rotation carousels on the same page using one jquery script file

new to jquery need help please!!... - I'm trying to create two carousels on the home page using the example below but doesn't seem to work.
I realise that the example is using ids, tried to change them to classes but didnt it do much.
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Thanks
An important philosophy in jQuery is "Don't reinvent the wheel."
Just use a plugin for features like this, such as Easy Slider!
Here's a demo of more than one on a single page
Oh, and in the future, be sure to describe what doesn't work as well as your code if you want people to actually be able to help you with your specific problem.

Starting and stopping a sound with Javascript

I need to start a sound effect at will... I need it to be stopped as well before it is over. I'm doing this all in JavaScript. How would I go about this? I've never used sounds before in a page (normally not a good thing to use sounds, this project requires me to).
Any help would be appreciated :)
If it means anything, I'm also utilizing jQuery.
If you're using jquery, have you tried the sound plug-in?
You may want to look into SoundsManager2

Create a Custom Control using Javascript

I've been trying to do some research into this, but I haven't yet found anything related to this, so I've come here in hopes that someone might be able to point me in the right direction.
Is there any way at all that we can create our own HTML Elements?
I've seen a Custom ComboBox that was created using Javascript months back, but cannot find it anymore.
Basically, I'd like to create my own 'Control', that I can use for my pages. Maybe something that can be just 'plugged in' (although not a requirement). Any thoughts/ideas/advice/links?
Any help is really appreciated. Thank you!
If you want to write a JQuery plug-in but don't know where to start, have a look at this site: http://stefangabos.ro/jquery/jquery-plugin-boilerplate
He's written a boilerplate code for a jquery plug-in, with plenty of comments explaining what to do and how to expand it. It should make a good starting point for you.

Categories