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
Download Galleria
The current release is 1.3.5 and was published on 2014-01-29. What's Included? Here's what you get when you download Galleria. ✓ Galleria core (minified & development) ✓ One free theme (Classic) ✓ Flickr Plugin ✓ Picasa Plugin ✓ History Plugin ✓ Demo file to get you started Get started After downloading, you can read up on how to get going using our beginners guide. Included in the download is the classic theme and a demo of the theme. Browse Themes If you are looking for pluggable themes that works out of the box, browse through our Premium Themes and see if there is something that fits your project. Looking for something simpler? You should try out our related service called Galleria Display. Customize Galleria has a large number of options such as transition effects, cropping methods and interaction details that you can use to customize your gallery regardless of what theme you are using. Problems? Check out our Help / Support page for troubleshooting. Development
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
Smooth Gallery - Demo by Kevin Thornbloom
A 3KB script to generate a slick paginated gallery & lightbox viewer. Oh, and it's fully responsive. Details & Download
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 <!
Portfolio Image Navigation with jQuery
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate. View demo Download source The beautiful photography is by Angelo González. The Markup For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside: Now, let’s take a look at the style. The CSS First, let’s define the style for the main container. The background will also be fixed and we’ll add a background image that creates the spotlight effect: The gallery will be positioned absolutely, just like it’s inner div: The gallery will also occupy all the space of the portfolio: We’ll fix the z-index of the inside div in order for keeping the stacking right: Now, we’ll style the arrows. And then we’ll style all the single arrows: Each image will be centered.
Mosaic Grid gallery with dynamic sized images
Minimalistic Slideshow Gallery with jQuery
In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will […] View demoDownload source In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. So, let’s start! The Markup The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs): The alt attribute of the thumbnails will contain the path the full view image. The CSS First, we will define the style for the main wrapper: We will remove borders and outlines from the link elements:
