background preloader

Automatic Image Montage with jQuery

Automatic Image Montage with jQuery
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps. View demo Download source Having a white space in the end of the container can, as well, be avoided optionally. Another option that can be useful in some cases is the possibility to only allow that the height of all images will be the height of the smallest image, avoiding that any picture gets pixelated/enlarged. The images used in the demos are by Andrey Yakovlev & Lili Aleeva. The HTML structure Simply put the images that you want to use in the montage into a container with the following class (the ID is used to call the plugin then): Options Related:  Image gallery

Overflow Image with vertical centering for Responsive Web Design If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. So how does this work? If you now change the width of the container, you will see that the image adapts the container's width but does not exceed the max-height. Now you have a cropped image that adapts the width of your container. To do this you can use JavaScript (jQuery). margin-top = (container height - image height) / 2 Then call a JavaScript function on the events load, resize and here comes the special: "transitionend". So just use a CSS transition to change the max-width and you can fire the callback function when the transition ends. You can use a CSS transition for the margin-top of the image to make it smooth. That's it. PS: It would be great to see a solution for this technique with CSS only.

CSS3 Gradients and Patterns « CSS3 Wizardry Works in Desktop Safari, Google Chrome, Firefox, iPhone, Android, iPad The ability to create CSS3 background gradients on any HTML element offers a lot of potential to create visually satisfying and engage experiences in the browser. But gradients are just about creating a 60s acid inspired rainbow of color. Because an HTML element can have multiple background images, you can do tricky things such as layering different gradients. If you use a background color and use rgba colors in your gradient stops, you can create some truly interesting effects. Oh, and there are also image masks. Using a gradient as an image mask allows you to add texture to an otherwise flat surface. Having one giant gradient across an element is that exciting. This will create a national flag filling the element. Nice start, but to get a pattern we need to define the background size. And by changing the orientation (-webkit-gradient(linear, left top, right top)), we get a vertical pattern: This will give us:

Hoverizr - A responsive jQuery Image manipulation and overlay plugin | Grayscale, Blur, Color Inversion Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one. hover mouse over the image to see the original version Hoverizr takes advantage of the <canvas> element to do all the image processing. Version 1.0 Minified Version - 2.5KB: jquery.hoverizr.min.js Developer Version - 6.3KB: jquery.hoverizr.js Or you can download it on GitHub 1. As said earlier, Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below. That's not all though. 2. And you are done. 3. Here they are: 4. 5.

Isotope Apprise - The attractive alert alternative for jQuery The initial release of Apprise has been a major success and is often what this site is most commonly associated with. As far as I've been able to track, Apprise has been downloaded over 23,000 times and has been mentioned in over 46,000 blogs. Which is fantastic, especially for something that I've never been very proud of. I've wanted to update, and change the UI, of this for over a year now. Demos Let's get right down to business. Pretty slick, right? Let's take a peak at the default settings before we change the options around a bit. You'll notice that the buttons are completely customizable and can easily be altered using your own CSS rules. Let's try another demo, but changing the settings around a bit. We're going to use a custom CSS class on our confirm button. You'll see the custom blue button with it's custom text, as well as a goofy little callback function that populates the field below: Response: Using

Create Spinning Rays with CSS3 Animations & JavaScript Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript. He's a legend in his own right, and for good reason: his work has helped to inspire developers everywhere to drop Flash and opt for JavaScript development for smooth UI's. One simple effect I enjoy is the script2 website's rotation of a ray image. The CSS There's very little CSS to add to your stylesheet: The rays image should be a background image and it's probably best to set the element's dimensions. The JavaScript The spinning rays effect works by using JavaScript to update browser-specific CSS3 animation properties. I've chosen to use MooTools' Browser object to detect the browser. jQuery and other libraries provide a method by which to get the current browser. With MooTools it would look like: I've found a 20 millisecond class assignment interval provides a smooth but subtle transition.

ResponsiveSlides.js · Responsive jQuery slideshow kombai/freewall Visual Event When working with events in Javascript, it is often easy to lose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be. It is due to this I've put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. Using Visual Event on any web-page is extremely simple: You can see a demo of this in action showing the events attached by my own DataTables jQuery plugin. DOM 0 events jQuery 1.2.x + YUI 2.6.x (2.x might work!)

Experiments with cascading style sheets | Doing it with Style Doubletake - Lab - Graham Bird Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary. I'm using a couple of tools to help me resize the images on this page - a local copy of SLIR and the src.sencha.io web service. Basic usage $('#container').doubletake(); Config You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on $(document).ready() or on $(window).resize() as well. 'breakpoints': [320,480,640,960,1024], 'pattern': '/slir/w([0-9]+)', 'watchresize': true breakpoints An array representing the sizes of images you want to use. pattern A regular expression used to replace the value of the src attribute. watchresize Boolean that instructs Doubletake to update if the window is resized. Here is the syntax with just two breakpoints and a custom image path. Example (not responsive) Browser support

Blueprint: Google Grid Gallery A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google. View demo Download source This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view. In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key. Please note that we are using CSS 3D Transforms which are only supported in modern browsers. The images used in the demo were created using the grafitti shapes by Luke Roberts. The HTML The CSS

Related: