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
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. 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 For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. The CSS
Galleria – The JavaScript Image Gallery
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. 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: By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. The style for each icon:
Cool and Useful jQuery Image and Content Sliders and Slideshows
May 23 2011 Looking for some cool new (and free) jQuery slider plug-ins and scripts? Then here is the perfect round-up created just for you. Here, we have collected the best of the freshest jQuery plug-ins for creating amazing image and content sliders. Because all of these plug-ins come with different functionality, this guide should help you figure out which one suits you best. Let’s go! jQuery Image And Content Sliders Cloud Carousel (demo | download) Here is a 3-D carousel, with optional auto-reflection that doesn’t require images to be modified or server code to be added. ShineTime (demo | download) “A new kick-ass jQuery and CSS3 gallery with animated shine effects.” Nivo Slider (demo | download) Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. MLB.com Content Switcher with jQuery and CSS3 (demo | download) Create Scrollable Interface (demo | download) Beautiful Photo Stack Gallery with jQuery and CSS3 (demo | download) This one’s easy.
Fresh Sliding Thumbnails Gallery with jQuery and PHP
In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according […] View demoDownload source In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The scrolling functionality of the thumbnails bar is based on the great tutorial by Andrew Valums: Horizontal Scrolling Menu made with CSS and jQuery. Just like in the Sliding Panel Photo Wall Gallery with jQuery we will be using a resize function for the image displayed. We will also add an XML file that (optionally) contains the descriptions of the images. The beautiful images in the demo are from the Models 1 – Photoshoots album from Vincent Boiteau’s photostream on Flickr. So, let’s start! The Folder Structure The CSS
Interactive Photo Desk with jQuery and CSS3
In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act. For example, if we drag a picture, […] View demoDownload source In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. You can download the source code of this and experiment with it, there are many more possibilities to discover and integrate. We are using two important jQuery plugins: 2D Transform for animating rotations and Shadow Animation for animating the box shadow. The images are taken from the amazing photostream of tibchris on Flickr. We hope you enjoy this little experiment!!
Animated Portfolio Gallery with jQuery
Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay. View demoDownload source Today we will create an animated portfolio gallery with jQuery. The idea is to animate the content elements whenever a thumbnail is clicked. The great template collection for the demo can be found on DzineBlog. Let’s start with the HTML structure. The Markup First we will create the structure for the content area. All the first elements inside of those containers will have a specific inline style, making them visible when we load the page. The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): And finally, we will add a div for the semi-transparent overlay: Let’s take a look at the style. The CSS All the elements in the content area will be placed absolutely:
