So I want to get an understanding of how a carousel works, and what I need to know (specifically) when I am building one. E.g. what Math functions to use, and why.
Somethings I would like to be able to do with the carousel is change the number of images that you can see at once (starting with 1, and going up to MANY). As you increase the number of images, it should resize the others. Perhaps you can put an upper limit on the number of images that you can see at the same time.
Feel free to include HTML5 technologies, like local storage or anything that can make the carousel very lightweight, and fast.
Also, given that I have never done this before, I would love if you could break it down for me in various levels of complexity. Basic, Advanced, Complex, More Complex.
Thanks in advance.
This site has a tutorial on building a carousel with jQuery, which goes fairly in-depth and is quite clear.
Related
So, I'm trying to get started conceptualizing a project for a friend of mine and I've run into a sort of problem right away.
They're wanting to do a photography website, which isn't a big deal, but I'm not sure how to go about replicating the functionality they're seeking for their front page.
This link is an example they gave me. They're looking to have a sort of "tile" setup of images from a gallery/folder that cleanly line up along the edges of the page (if possible) and are also responsive, so when you reach certain breakpoints, the images obviously shift to have less in each row, but still keep the same clean look.
http://www.amishakpatel.com
I figure it's probably possible to do this with various client-side JS libraries, but I'm out of practice and didn't know where to turn.
Any suggestions would be fantastic, I get the feeling that this specific part of this project is going to be more complex that I originally thought, and I'm not SUPER experienced in the art of writing responsive layouts, but I wanted to give this a shot and get better at it.
My original plan was to develop this thing as a WP website/theme, but now I'm almost wondering if due to the nature of the project that I should maybe just use WP for the backend and content management, then do the front-end separately using front-end that I'm a bit more comfortable with (React) as it's looking like the whole project will be heavy in JS anyway to do the stuff they're wanting to eventually do.
Thanks in advance for any suggestions!
After reading the advice given by the few folks who commented, I did some digging with Mosaic/Masonry layouts, and found this:
https://www.imagely.com/wordpress-gallery-plugin/
I'm gonna give this a shot, which lets me stick with WP for a platform for ease of use, keeping the whole project simple.
Thanks a lot, folks! I figured there was PROBABLY a word for what I was looking for in terms of layout, but didn't know what to Google. :P
I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.
Basically I would like to archive results like that: http://www.pixelapse.com/#
Does someone know any nice plugins for that or good articles explaining how to do such effect. I'm able to google http://flowplayer.org/tools/scrollable/ but maybe you know some alternatives?
This effect is called a carousel. Typically you shift through elements in a list with some sort of animations and controllers.
This article from Tripwire Magazine should give you a pretty good overview of what's out there. As you can see, a lot of the carousels out there are intended for displaying picture galleries, so it might require a bit of hacking on your part to get the result you want.
I was wondering if anyone could offer any advice. I'm an expert HTML / CSS coder...but I have little experience with HTML 5. I have read about the great things it can do and I want to learn it, but im not 100% sure of what I can do with it. I have read a lot of articles regarding HTML 5 but none of them go into enough detail about it to answer my questions.
Aside from making layout easier, can it do things like create a rotating banner? I need to take the banner on the main page of this site
www.newmarklearning.com
and make it ipad / iphone compatible. I know I could use Javascript and a host of other coding options, but i fugued this is a great place I could start messing with HTML 5.
Problem is in not really sure if thats the right technology to use. Can HTML 5 / CSS 3 handle such things or am i limited to Javascript / Ajax etc???
Any help pointing me in the right direction would be great.
Thanks
Craig
Regarding animations, CSS3 offers you a lot of options. See e.g. here for more information on 2D Transforms. There exist 3D Transformations, too. However, only Webkit-based browsers support it right now. This site also offers a list of CSS3's new features.
In your case, to have the banner animated, you would have to combine a transform with a transition property (the transition let's it animate, the transform only describes the targeted rotation/scale/skew). If you want a constant animation (not just once), there might be some Javascript necessary.
Well, apart from that, HTML5 offers you a lot more new features, like offline storage or other things. The only problem is that the user has to have a relatively new browser in order to support everything, which sadly isn't the case right now (I know several companies that still run Windows XP with some IE6 or 7 or something like that - any updates disabled :-/)
Edit: Oh, OK, I just took a look at your site. For such a "slideshow", at least a little bit of Javascript will be necessary, to store the current slide etc.. But every smartphone browser should support it without a problem
do you mean the banner on the right? That changes on a timer, or when a number or arrow is clicked?
It would be easiest to recreate that with JavaScript.
Check out:
http://www.dhteumeuleu.com/
If you want some cool ideas
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.