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
I'm kinda stuck. I have to create a portfolio and I have to mostly use html5 and css3, with a bit of js, jquery and stuff if I really want to. I'm not very good at web development but I still wanted to experiment and do a professional and nice site. The thing is, implementing a simple scroll effect on your whole website seems to force you to write the html code on one single index. Does anyone know if this is really the case? Are there other solutions?
Thanks in advance. I know that it is not the smartest question but I'm really not good at it, so sorry in advance. Bye!
(I didn't really try anything yet except from the classic class "scroll-container", which is my main problem : I still want to have several html pages to separate things so that it is clear in my mind. Putting everything on a single webpage will definitely lose me)
use an external library or plugin, such as fullPage.js or Scrollify, which can enable a scroll effect across multiple pages.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
so this is more a curiosity question than an actual question so please bear with me. I just checked out :
http://www.apple.com/iphone/
And the cover slideshow just looks really impressive to me. I do not want to reproduce it, but I am just genuinely interested in how this works.
From my inspection, they just use a bunch of timed webkit transitions/transformations, but I don't know exactly whats going on.
Also, is there an easy way to create this behavior without hardcoding it, because that's what I would do right now.
Here's an explanation: http://johnbhall.com/iphone-4s/
I'm just answering my own question, since no one could really offer me an answer besides hard coding. I assume Apple just puts a lot of effort in it. i'm still impressed by the sophisticated use of css transitions, especially where objects would transition into the next frame
Here's a working demo with source code.
Basically the idea is,
preload all the images
there's a timer, which fires every N seconds
when the timer fires, start a transformation animation, which slides the new image in.
Elaborations on the idea allow you to stop/reverse/pause/resume, to automatically stop after one cycle, and so on.
The tradename for this effect is "slider". so you can google for slider and find lots of discussion. There are sliders for jquery (nivoslider), there's one for mootools (slideitmoo), there's framework-free options (like the scriptiny demo I linked), and so on.
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
I wrote a module for Joomla! 1.5 which shows the pictures (banners) with the most clicks. Now I want to show this list scrolling on the home-site. With "marquee" there is a break after the last picture.
I've found an advice which said I'll have to create a div-container with overflow: hidden and a second div with javascripte which changes the positions of the pictures.
Can anyone help me to write this code, because I don't get javascripte?
There are plenty of free ones you can get that are already written for you.
Try one of these jquery scripts to do what you are looking for...
http://plugins.jquery.com/project/Plugins/category/48
The best way to implement such feature is looking to this great JQuery Video tutorial and you will have a great product :)
URL: JQuery Spy effect
MOV: Jquery Spy effect
Hope that is exactly what you are looking for.