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
Galleria – The JavaScript Image Gallery
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.
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:
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. 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) The goal of this project was to recreate MLB.com’s switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable. Create Scrollable Interface (demo | download) Micro Image Gallery: A jQuery Plugin (demo | download)
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. The idea is to animate the […] 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 And that was the style.
