Please advise me a jQuery carousel plugin that can make a carousel like the one on the image. I mean that, when the image item becomes active, it moves into the center and becomes large.
Thanks.
I think you want this: http://imageflow.finnrudolph.de/
Apparently, this is the original 'cover flow', even Apple has licensed this for iTunes.
I've used this on projects before and even integrated it into Drupal (there is a module for this in Drupal, but it didn't work for my needs). I was also able to modify the code to fit my clients extended needs.
Good luck!
Related
I have been search for hours for a jquery type plugin that is responsive and also has proper swipe animation during gesture.
http://www.photoswipe.com/ is 99% there except that it dosent support single image lightbox mode, its geared towards grouping images into swipable galleries, which it does brilliantly.
However now and then I may want a few images on a page to have no relation to each other. Id rather have a default class, that when used all images opened up in a single image lightbox. Photoswipe automatically groups any images given the same class.
If I was able to set an option with this plugin to hide the prev/next images on a call, then it would have been perfect.
Important though, is that the plugin must use full screen like photoswipe does. So many responsive plugins seem to waiste the screen with unrequired image chrome. The intended slide show or light box should be like viewing a gallery on a smartphone - again photoswipe does this. its only fall back in being able to have non related instances.
There are a couple out there that appear to be inline with what you want. I never understood why some developers create "responsive" galleries, but waste so much space with padding or decretive chrome elements.
I was thinking of using PhotoSwipe, but the developers stopped supporting it and recently threw it out there for the open source community to maintain. Kind of turned me off during the transition.
Here are a few others I came across that I'm considering myself.
Need higher rep to post more links....so some are just cut and paste. Sorry.
JuiceBox
(http://juicebox.net/)
SwipeBox
(http://brutaldesign.github.io/swipebox/)
(full disclosure...I have an affiliate code for the next links. If you want to remove them, just don't add the "ref". If this helps, I appreciate the clicks)
Touch N Swipe
(http://codecanyon.net/item/touch-n-swipe-image-gallery/5886023?ref=bmoe)
Flare (wow)
(http://codecanyon.net/item/flare-responsive-mobileoptimized-lightbox-plugin/2392703?ref=bmoe)
I'm looking for an responsive image slider for a particular case.
This is what I would look to happen on desktop/tablet/mobile.
You can also swipe through the images on tablet/mobile.
It's important that the images don't need to have the same width. (height is always the same)
Does someone knows a js library for this?
I searched but most of the time you only have view of 1 image.
How's this?
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
It supports IE6+ and is very lightweight. You can easily make it responsive by wrapping it in a div with overflow: hidden; that varies in width as you require. Alternatively, you could have a go at rewriting it as you require (it's quite a lightweight script!)
The lemmon slider works great with Touch Swipe. The instructions to add this are here:
https://github.com/lemmon/Lemmon-Slider/issues/5#issuecomment-25177163
I'm using the jQuery "Lightbox" plugin, although I don't know if that's necessary information about the problem at hand.
The images I'm putting through my slideshow are quite large; each of them is far larger than the screen (I don't host the images on my server so I cannot resize them). I need to scale them to fit within the bounds of the screen (probably with some margin as well). Are there some JQuery or other Javascript snippets out there to take care of this?
Edit
Now I use "zoombox", which certainly fixes the scaling issue. However, now all the nice slideshow features are lost! I.e., I cannot use the arrow keys or cycle through the gallery of images!
Here are three plugins which are pretty feature rich and widely used, they should do the job with ease :
http://www.jacklmoore.com/colorbox
http://fancybox.net/
http://www.grafikart.fr/zoombox
Edit: Pretty much every lightbox solution is listed and compared at : http://planetozh.com/projects/lightbox-clones/
I've settled on Floatbox after testing out a dozen of these libraries. The default settings size the image to fit the screen and allow navigation with the arrow keys. Clicking on an image zooms it to 100%. It's easily configurable in terms of colors, window decorations, and the like.
I forked Lightbox2 to include automatic scaling.
Now, if an image is larger than the window, it will automatically resize to 80%.
You can find it here, on my new repo.
Can someone suggest a JS menu script that would be able to support menus such as those that are made here http://www.brightstarr.com/US/Pages/Default.aspx ?
I've been searching the web but can't quite phrase it correctly so I always end up either on Superfish or some other plain dropdown menu?
What I need is support for big menus, broken apart in sections with optional images support (image per menu link).
The particular page doesn't seem to use JS for their menu at all - just CSS leveraging the :hover pseudoclass. Found a tutorial here. The bottom line is that you write all the markup your dropdows require, season them with CSS styles to taste (and position!), and finally put the :hover in place in your stylesheet to just make the submenus appear when you want them to.
Soh Tanaka's Mega Menu is the classic example of setting up this style of menu. I'd go so far as to say it's the gold standard for mega menu scripts. After building the tutorial, it should be easy to do anything you want inside the divs for each relevant area.
The best part about using a pre-done solution with a tutorial like this is that not only do you get to learn, but it's also been well tested and revised.
If the above example is a little too strict with <li> elements, you might try this tutorial from SitePoint
I would just search for plugins for your favorite javascript framework. There are probably about 1000 if you search "jquery drop down menu plugin". The big sizes and adding of images is pretty standard in the ones I've used as well since they are just divs. I don't know if you are used to working with jquery but I am sure there are plugins for all the other big frameworks out there as well.
I wrote the menu for the BrightStarr Site. It doesn't use JS at all, I tried lots of techniques before deciding on this and I choose this for the simple reason that it performs much better on mobile devices than any other JS solution I've come across.
I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net