I need a simple image rotator that rotates images by fading, centers vertically and is accepted by most if not all browsers. I however need to be able to customize the arrow images and place them anywhere i like. Anyone know of one?
If I try to visually show you what I need it would look like this.
< -- My back button [ image ] My next button -- >
I use jquery :) I've given plenty of rotators a shot already but they don't accept images of varying sizes or are not customizable.
If all you need is image rotation, why not do it yourself?
It's only a few lines of jQuery and infinitely customizable. :)
Example:
http://jsfiddle.net/jtbowden/UNZR5/1/
I generally like to stick to using this one: http://jquery.malsup.com/cycle/
It can be as simple or as complex as you need, and is highly extensible. They also provide heaps of examples for what can be done with it.
Example with next/previous buttons here: http://jquery.malsup.com/cycle/int2.html
Have you tried http://aviathemes.com/aviaslider/? It is customizable and is amazing.
Use jQuerytools scrollable by flowplayer. Very lightweight, flexible and they offer a CDN link to there js files so you don't have to load it from your server.
Scrollable http://flowplayer.org/tools/demos/scrollable/gallery.html
Make sure to try out all there available scrollable examples.
CDN links can be found at http://flowplayer.org/tools/download/index.html
Related
My inspiration is http://www.diesel.com/bags-female. Can anyone explain how I can achieve this effect?
I have started with this code:
$(document).ready(function(){
$('#background-thing').mousemove(function(e){
var mousePos = (e.pageX/$(window).width())*100;
$('#background-thing').css('backgroundPosition', mousePos+'% 0');
//alert(mousePos);
});
});
But it only pans the background image. I wish to have multiple links over the background image which are anchors and clicking on those images will make a zoom effect on that particular coordinate.
Should I rather look at a jQuery plugin? If so, what are your recommendations?
I've used skrollr in the past for quick implementations and it's served me quite well.
Here are some links:
https://github.com/Prinzhorn/skrollr
http://prinzhorn.github.io/skrollr/
Hope that helps, good luck!
I don't think you want or need any Jquery plugin for what you're doing.
That page you provided for reference uses css 3d transforms and default Jquery.
Here's the reference for that on W3schools: http://www.w3schools.com/css/css3_3dtransforms.asp
Specifically something like:
//clearly broken code used just for example
$(document).ready(function(){
$('#yourpagecontainer').on("click","a",function(){
$(this).css("transform", "scale3d("+x+","+y+","+z+")");
}
}
The code you've provided doesn't make it clear what exactly you have to far, but maybe you'd benefit from taking a look at this example: http://sarasoueidan.com/blog/windows8-animations/
It's not identical, but it is in the span of what you'd like to do.
I don't think your example strictly fits the definition of "parallax" like this site. I'm pretty sure you could achieve something similar to your example with:
Changing the CSS3 background size and position on click (as explain in this question and here).
Applying a partially transparent .png with a fully transparent "window" in the center over the entire window on click to achieve that same blurred/focus look. You can apply different filters on the partially transparent areas to get something more artistic looking. Inkscape does this quite well and it is free ;)
This is not a cross browser solution, however. Everybody say "Internet Explorer" (8 and below). For 9 and above make sure you have <!DOCTYPE html /> otherwise your CSS3 becomes CSSFAIL.
Fun project, enjoy :)
i'm curious about an effect i've seen on a lot of different wordpress powered sites. i think it might be a plugin, but i'm not entirely sure.
it's basically a page of images of different sizes, and they fit together based on how wide your window is. they also rearrange very stylishly when you resize your window.
the images also load as you scroll down, in sort of an infitie scroll way.
here is a perfect example of what i'm talking about... http://www.someoddpilot.com/work/projects/
how are they doing that? i would like to achieve a similiar effect, but i'm not sure where to begin. any insight would be super helpful, i'm somewhat new at this. thanks!
There are several techniques... I didn't look to see what they are using specifically, but since you mention jQuery, there is a plugin you should check out: Isotope
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 want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)
Does anyone know how to achieve the cover-flow effect using JavaScript to scroll through a bunch of images. I'm not talking about the 3D rotating itunes cover-art, but the effect that happens when you hit the space bar in a folder of documents, allowing you to preview them in a lightbox fashion.
http://www.jacksasylum.eu/ContentFlow/
is the best I ever found.
a true 'CoverFlow', highly configurable, cross-browser, very smooth action, has relections and supports scroll wheel + keyboard control. - has to be what your looking for!
Not sure if you're talking about Coverflow (scroll through images) or Quicklook (preview files in lightbox), try editing your question.
Here's some JS Coverflow implementations:
MooFlow - Coverflow for MooTools
Coverflow in JS proof of concept
Coverflow using JS and CSS Transforms (Webkit only)
I think this is what you want http://addyosmani.com/blog/jqueryuicoverflow/
I tried using the the Jack's Asylum cover flow but it wouldn't let me easily remove and re-add an entire coverflow. I eventually found http://finnrudolph.de/ImageFlow and not only is it more reliable, it's easier to hook into, uses less markup, and doesn't jitter when flipping through images. It's by far the best I've found, and I've tried several on this page.
There is an Apple style Gallery Slider over at
http://www.jqueryfordesigners.com/slider-gallery/ which uses jQuery and the UI.
jCoverflip was just released and is very customizable.
colorbox has such amazing features..loving it.
Also like this one http://www.webappers.com/2008/03/05/galleria-simple-but-nice-jquery-image-gallery/
Is this what you are looking for?
"Create an Apple Itunes-like banner rotator/slideshow with jQuery" is an article explaining how you can make such effect using jQuery.
You can also view the
live demo.
Try Jquery Interface Elements here - http://interface.eyecon.ro/docs/carousel
Here's a sample. http://interface.eyecon.ro/demos/carousel.html
I looked around for a Jquery image carousel a few months ago and didn't find a good one so I gave up. This one was the best I could find.
Check out momoflow: http://flow.momolog.info
True coverflow effect, and performant on Webkit (Safari and Chrome) and Opera, ok on Firefox.
Just to let you all know, xFlow! has had some major work done on it and is vastly improved.
Go to http://xflow.pwhitrow.com for more info and the latest version.
i am currently working on this and planning on releasing it as a jQuery-ui plugin.
-> http://coulisse.luvdasun.com/
please let me know if you are interested and what you are hoping to see in such a plugin.
gr
the effect that happens when you hit the space bar in a folder of
documents, allowing you to preview them in a lightbox fashion
Looks like a classic lightbox plugin is needed. This is my favorite jQuery lightbox plugin: http://colorpowered.com/colorbox/. It's easy to customize, etc.
This one looks really promising, and closer to the actual Apple coverflow effect than the other examples:
blarnee.com/projects/cflow