Jquery Labs » Image Gallery

Micro Image Gallery

admin — Wed, 28 Jul 2010 11:00:13 +0000

In many blogs and news sites images are mostly included as an addition to the content. Space is often limited and therefore we thought of a slick solution to integrate a miniature image gallery that does not occupy a lot of space.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Gallery, image, Image Gallery, Image Viewer, Micro, Minimal, tympanus

Sliding Box Effect

admin — Tue, 27 Jul 2010 10:08:33 +0000

How to Create Sleek Sliding Box Effect With jQuery

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: 1stwebdesigner, Effect, images, Sleek, Slide, Sliding, Tutorials

jQuery TopUp Plugin

admin — Thu, 22 Jul 2010 12:03:29 +0000

TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. TopUp offers the following advantages:

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Gallery, image, Lightbox, Modal, Popup, Slideshow, Thumbnail, TopUp, UI

jQuery PhotoShoot Plugin

admin — Wed, 21 Jul 2010 11:00:34 +0000

Making a Photoshoot Effect With jQuery and CSS

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. You can check out the demonstration above, or a nice tutorial on how to use it here.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Css, image, Photo, PhotoShoot, pictures, Shoot, Tutorials

Featured Content Glider

admin — Mon, 14 Jun 2010 09:10:24 +0000

This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. For the ultimate in the ability to customize its look, the pagination links are also ordinary links that you define on the page, but with special CSS class names inserted when it should perform a certain task (ie: “toc” class if it’s a pagination link). This means the pagination links can be styled and arranged any way you like. The script enlists the help of the jQuery library for its engine.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download (CSS File)
Download (CSS File)

Tags: Banner, Content, Css, Dynamicdrive, Featured, File, Form, Glider, Html, image, Image Viewer, library, Like, Link, List, Pagination, Show, Slide, Slider, Slideshow, Viewer

Step Carousel Viewer

admin — Fri, 11 Jun 2010 09:00:39 +0000

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Animation, Banner, Carousel, Display, Dynamicdrive, Gallery, Html, image, Image Viewer, images, Panel, Scroll, Scrolling, Sliding, Smooth, Step, User, Viewer

Flip jquery plugin

admin — Mon, 07 Jun 2010 07:00:20 +0000

Flip is a jQuery plugin that will flip easily your elements in four directions. Try it

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Banner, Code, Effects, File, Flip, Flip Wall, Flips, image, smashup, source

Sponsor Flip Wall

admin — Fri, 04 Jun 2010 07:01:43 +0000

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Code, Coding, Css, Design, Flip, Flip Wall, Form, Gallery, image, jQuery, logo, Php, Sign, source, Sponsor, Tutorials, tutorialzine, Wall

Slick Caption Tutorial Revisited

admin — Sat, 08 May 2010 11:00:40 +0000

jQuery Photo Slide Show with Slick Caption Tutorial Revisited

It’s a very famous post because it has been showcased in several major web design blogs so many times and I received a lot of traffic from it. Thanks guys. I get a lot of comment and as I replied to those comments and do some quick fixes, I realized that this script has a caption bug and inefficient and not up to standard (oh well, that’s the time when I was start picking up jQuery ), so I have decided to do revisit to solve all those problems discovered by readers. I rewrote the html structure and modify the script.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Banner, Blog, Caption, Code, Comment, Design, Html, image, Photos, Post, queness, Show, Sign, Slick, Slide, Slideshow, source, Star, Time, Tutorials, UI

jQuery Popeye Plugin

admin — Tue, 04 May 2010 11:00:09 +0000

an inline lightbox alternative

Query.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Box, Code, Display, Gallery, Html, image, Image Gallery, images, inline, JavaScript, jQuery, library, Lightbox, Line, Modal, Popeye, schuessler, Show, Slider, source, UI, User

jcoverflip jQuery Plugin

admin — Thu, 29 Apr 2010 11:00:50 +0000

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Banner, Code, Flip, Follow, images, jcoverflip, jQuery, Load, Plugins, Scroll, Slider, source, UI

background image slideshow

admin — Wed, 28 Apr 2010 11:00:37 +0000

Advanced jQuery background image slideshow

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that’s on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: .net, Background, bg, Code, Design, Drop, Dropdown, Effect, Focus, Follow, Header, How To, Html, image, jQuery, Like, Load, Marcofolio, Menu, Round, Show, Sign, Slide, Slideshow, source, Text, Time, Tutorials

Scrolling Web Gallery

admin — Tue, 27 Apr 2010 11:00:37 +0000

How to Create an Infinite Scrolling Web Gallery

When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Let’s get started!

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Ajax, Auto, Code, Follow, Gallery, How To, image, Infinite, JavaScript, Load, nettuts, Php, Rating, Scroll, Scrolling, source, Star, Tutorials, tutsplus

YoxView jQuery Plugin

admin — Tue, 20 Apr 2010 11:00:31 +0000

jQuery image viewer plugin

YoxView is a free image viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: .net, Code, Follow, image, Image Viewer, Input, JavaScript, jQuery, Lightbox, Load, Modal, Plugins, source, Tutorials, Viewer, Yoxigen, YoxView

jQuery Blinds

admin — Thu, 15 Apr 2010 11:28:18 +0000

Slideshow using CSS Sprites

Demostration
Demo Page

Download
Download Source Code
Download Demo

Tags: Banner, Blinds, Code, Css, littlewebthings, Show, Slide, Slideshow, source, Sprite, Sprites

Jquery Labs » Image Gallery

Micro Image Gallery

Related posts

Sliding Box Effect

How to Create Sleek Sliding Box Effect With jQuery

Related posts

jQuery TopUp Plugin

Related posts

jQuery PhotoShoot Plugin

Making a Photoshoot Effect With jQuery and CSS

Related posts

Featured Content Glider

Related posts

Step Carousel Viewer

Related posts

Flip jquery plugin

Related posts

Sponsor Flip Wall

Sponsor Flip Wall With jQuery & CSS

Related posts

Slick Caption Tutorial Revisited

jQuery Photo Slide Show with Slick Caption Tutorial Revisited

Related posts

jQuery Popeye Plugin

an inline lightbox alternative

Related posts

jcoverflip jQuery Plugin

Related posts

background image slideshow

Advanced jQuery background image slideshow

Related posts

Scrolling Web Gallery

How to Create an Infinite Scrolling Web Gallery

Related posts

YoxView jQuery Plugin

jQuery image viewer plugin

Related posts

jQuery Blinds

Slideshow using CSS Sprites

Related posts