I developed article rotator where 5 articles with images rotate automatically and user can focus one (and stop rotating) by mouseover. Click will open the article.
The article rotator is here: http://antizena.df.sk/ and it is just devel version.
How to name it? What is the best name for this feature?
I would call it Carousel
They are usually referred to as Carousels
Call it anything you want. But it fits into the category of carousels or images sliders. Here is a plugin similar to yours called an image rotator.
Article stack? Article pile? AutoSkip-Stack?
A carousel to me is something that spins and where you can see more than one element at a time. Similar to the coverflow on an iPod.
Related
My main layout is done trough fullpage.js and I've spent hours of making my page work the way i want it to. I've found photoswipe as a best solution for a gallery that will work with array of photos but the problem i get is that these 2 apparently don't work quite well together, atleast in my case. So the thing is, when you click on a img you see URL changing but the gallery doesn't show up. Only when i refresh the page gallery pops up but my fixed navigation and audio controls are on top of it. Is there any kind of solution to this problem or atleast a gallery that works with fullPage.js
Thanks
link to my current project
Read the fullpage.js FAQs
Particulary the question named "My other plugins don't work when using fullPage.js"
Short answer: initialize them in the afterRender callback of fullPage.js.
From what I can see the div below sort of eats into the image above as you scroll down creating what I think is a nice visual.
My only problem is I don't know what the terminology is to search for a tutorial on the process itself.
Does anybody know what search term I would use to find a good tutorial? I have literally tried everything I thought it might be called.
Example on a site where it is used: http://www.anakin.co/en
The term is called parallax scrolling.
The following link is a good tutorial, and explains how to achieve this in just CSS.
http://keithclark.co.uk/articles/pure-css-parallax-websites/.
Regarding the cutout effect I believe that is called clip masking.
The main content is on an overlay. If you look at the code though, in the css you'll see the "clip" property. It's since been deprecated, but it's been replaced by "clip-path". Showing parts of an image is called clipping/Masking and I believe you can find what you're looking for here:
https://css-tricks.com/clipping-masking-css/
EDIT: The background image is using parallax, which gives the background image "motion" when you scroll. But the actual effect of having that background show through is the clipping/masking in the article.
It's called Parallax scrolling http://en.wikipedia.org/wiki/Parallax_scrolling
Has anyone ever heard of a jQuery slider that is responsive and allows images with different widths?
Thanks
unoslider.heroku.com is the best responsive slider I've seen recently
http://docs.jquery.com/UI/Slider
use your own images
Sure you can use the original Slider that comes with JQuery as #cpjolicoeur mentioned above.
You may also try these following:
Responsive Image Gallery with Thumbnail Carousel
Blueberry
I have used FlexSlider on many responsive websites. But dont know why their site is down. But still you can keep that in your list.
Thanks
Shajed Evan
One good jQuery plugin that has been around for a while is CarouFredsel (yes, with Fred in the middle). Here is the link:
http://caroufredsel.frebsite.nl/
They have nice demos for responsive/fluid carousels:
http://caroufredsel.frebsite.nl/examples/responsive-carousels.php
Here is an example
http://jsfiddle.net/y2CeN/
Here also in carousel
http://jquery.malsup.com/cycle2/demo/carousel.php
Both cycle2 using jquery
Liquid Slider is one that I made. Email me if you have any questions about it. It's pretty powerful, yet simple and to the point. I have been making tutorials for it as well.
You want one of these:
http://bxslider.com/ BXSlider
http://unslider.com/ UnSlider
I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf
Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop
Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php
I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.
Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.
jQuery animate or jCarousel
The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)
Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php