WebAppers

/ best free open source web resources /

Shopify

Stunning Full Page Image Gallery with jQuery

Posted · Category: Gallery, License Free

Full Page Image Gallery with jQuery shows us how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.

When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

full-page-gallery

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/FullPageImageGallery/
License: License Free

Pulling Photos From Flickr Feeds & Display Them Easily

Posted · Category: Gallery, MIT License

We often work with clients that maintain accounts with Twitter, Flickr, Youtube and other services in addition to their website. Often they will want to pull in data from one of their accounts to their website.

With Flickr, this is pretty easy because they make a simple API available. Having worked with it a few times, HiFi decided to make it even easier to pull photos from a public feed. jFlickrFeed works by pulling a JSON feed from Flickr and applying the data it gets back to a template. You can also look at Flickrshow, which is a simple Javascript slideshow for Flickr.

flickr-feed-jquery

Requirements: jQuery Framework
Demo: http://files.gethifi.com/posts/jflickrfeed/example.html
License: MIT License

How to Create a Gallery with Scrollable Thumbnails

Posted · Category: Gallery, License Free

Thumbnails Navigation Gallery with jQuery tell us how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style.

The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right. When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

thumbnail-gallery

Requirements: -
Demo: http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
License: License Free

Interactive Photo Desk with jQuery and CSS3

Posted · Category: Gallery, License Free

Codrops has created an Interactive Photo Desk with jQuery and CSS3 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.

If we drag a picture, it get’s “picked up” first, making it appear a little bit bigger. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball. When using the shuffle function, the photos get rotated and spread over the desk randomly.

interactive-photo-desk

Requirements: jQuery Framework & CSS3
Demo: http://tympanus.net/Development/PhotoDesk/
License: License Free

How to Create a Photo Stack Gallery with jQuery & CSS3

Posted · Category: Gallery, License Free

Beautiful Photo Stack Gallery with jQuery and CSS3 tells us how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

photo-gallery

Requirements: PHP Framework, jQuery Framework
Demo: http://tympanus.net/Tutorials/PhotoStack/
License: License Free

How to Create a Stunning Full Page Photo Wall Gallery

Posted · Category: Gallery, License Free

Codrops has shared a tutorial of how to create Sliding Panel Photo Wall Gallery with jQuery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode.

In the full picture view we add some nice transition effect when we browse through the photos. In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically.

photo-wall-gallery

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/
License: License Free

Micro Image Gallery jQuery Plugin

Posted · Category: Gallery, License Free

In many blogs and news sites images are mostly included as an addition to the content. Space is often limited and therefore it would be a good idea to integrate a miniature image gallery that does not occupy a lot of space.

Micro Image Gallery jQuery plugin transforms a set of images into a tiny gallery with several options. It allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible. A total of nine thumbnails are shown in the grid preview. The plugin will automatically resize the image according to the chosen gallery size.

micro-image-gallery

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/MicroGallery/
License: License Free

Display a Collection of Images Without Modal Window

Posted · Category: Gallery, GPL License

We have mentioned jQuery.popeye last year. Now jQuery.popeye 2.0 is released! It 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.

It was designed as an alternative to the often-seen JavaScript image lightbox. What they all have in common: they employ a modal window to display the large images, thus disrupting the workflow of the user interacting with a webpage.

jQuery.popeye 2.0 takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

jquery-popeye

Requirements: jQuery Framework
Demo: http://dev.herr-schuessler.de/jquery/popeye/demo.html
License: GPL 2.0 License

Piecemaker – 3D Image Slider Uses Tweener Engine

Posted · Category: Gallery, License Free

We were all amazed by CU3ER which is a 3D Transitions Image Slider in Flash. We were particularly fascinated by the effect of slicing an image up to pieces, turning the elements and recreating a new image from it.

From that day on, Björn Crüger was thinking about creating a gallery concentrating on such an effect and playing with it. With just a few variables this effect becomes extremely versatile. The Piecemaker uses the mighty Tweener engine from Caurina, which makes it support plenty of tween types for the transitions, such as Cubic, Bounce or Elastic.

Beside the transition type you can also customize tweening time, tweening delay as well as the movement of the cubes while tweening in terms of position on the z axis and positions to each other. With Piecemaker you can make the cubes move towards the screen or away from it and let the whole gallery expand while tweening. This provides you with a lot of possibilities customize the gallery.

piecemaker

Requirements: Flash
Demo: http://www.modularweb.net/piecemaker/
License: License Free

How to Create a Sponsor Flip Wall using jQuery

Posted · Category: Gallery, License Free

Designing and coding a sponsors page is part of the developer’s life. 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.

TutorialZine has written a tutorial about how to create a Sponsor Flip Wall using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

jquery-sponsor

Requirements: PHP, jQuery Framework
Demo: http://demo.tutorialzine.com/2010/03/sponsor-wall-flip…
License: License Free

Page 7 of 14«34567891011»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons