background preloader

Responsive Image Gallery with Thumbnail Carousel

Responsive Image Gallery with Thumbnail Carousel
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We'll also add the possibility to navigate with the keyboard. View demo Download source Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad. The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. So, let’s do it! The Markup Let’s take a look at the style. Related:  Galerie Img

Slicebox - 3D Image Slider Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 2: Slideshow with play & pause and horizontal slices

Elastislide - A Responsive jQuery Carousel Plugin Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. Elastislide uses the jQuery++ for the swipe events on touch devices. The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). The HTML Structure $('#carousel').elastislide(); Options Demos

:: Alessandro Ferrini :: FerroSlider jQuery Plugin A simple, powerful, responsive and customizable jQuery sliding plugin. Powered by HTML5 and CSS3. Latest version : 2.3.3 Downloaded 40768 times What is it? FerroSlider is a free jQuery plugin that allows you to organize the contents of websites in a unusual and cool way and navigate through them with a sliding effect. Slide everything Organize any type of content, such as images, text, pages, lists and so on. The Matrix The contents can be positioned and organized as you want: by row, by column or using a custom displacement, also called "The Matrix". Brand new FerroSlider 2 has been completely recoded from past versions. Responsive & universal FerroSlider uses standard HTML and CSS rules and is responsive and compatible with all the major browsers and with the two main mobile environments, Android and iOS. What you need FerroSlider only needs the main jQuery core (>= 1.9), and the Rico Sta. Compatibility

Camera | a free jQuery slideshow by Pixedelic A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption. HTML elements You can also put some HTML elements into your slides. <div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div> An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. Videos To include a video into your slideshow you must put an iframe into one of your slides: As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio). The "data-" attributes or a particular alignment for one slide only:

Scale, crop, and center an image with correct aspect ratio in HTML and Javascript | Decoded Summary In this post, I’ll show a technique using HTML and Javascript to properly scale an image of indeterminate size to take up the full space of a parent element that may have a different size, aspect ratio, and orientation. This technique is useful for such scenarios as dynamically generating thumbnails and for displaying a “table of images” where every image is the same size (but the source images aren’t). Background In development of my HTML image gallery control, I re-encountered a problem I’ve had with image and video applications. In such applications, the size of the source image (or video) may differ from the size of the target surface it is rendered on. What this post is not about. This is not another post about “how to center an image within a div”. In both of these cases, go use your favorite image editing tool, and standard CSS to correctly scale and center the image in the DOM using static markup. Simple scenario – static content And the result as follows: Solution Like this:

Galleria – The JavaScript Image Gallery scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"

Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens. I was working on a project and needed an image lightbox that solves these problems. Features Ascetic. As I mentioned earlier, the plugin produces a single-element markup by default: No default CSS. position value can be anything, but in most cases fixed will produce what’s expected. JavaScript Source: imagelightbox.js (uncompressed; 9kb) and imagelightbox.min.js (minified; 4kb). The plugin takes the advantage of jQuery. ImageLightbox() accepts some options. It also has a couple of method functions, as mentioned: Examples Plugin without demo is a rhyme without reason. Demo P.S. Changelog

Creating a Responsive Tiled Photo Gallery with Pure CSS by Nathan Rohler As we looked at in a recent article (Responsive Design: A Crash Course and Demo), responsive design is becoming the favored approach for making your site accessible on all devices. One of the main reasons that this approach is gathering significantly more steam than adaptive design (presenting an entirely separate mobile-optimized site) is the incredible diversity of devices popping up, each having a unique screen size and resolution. If you're new to responsive design and haven't seen the article I mentioned a moment ago, I recommend you review it now to get up to speed on media queries, the foundation on which responsive design is built. First, here's the demo of what we're going to create (source code here). Making Responsive Squares The foundation of our project is responsive squares – that is, squares that automatically resize, both horizontally and vertically, based on the layout. Now, suppose that we add height: 25%; to the CSS and preview again: Creating a Grid <!