Blogfreakz - Web Design and Web Development resources » Gallery/Carousel/Slider

Creating an Accordion Image Gallery with Only CSS

Marvin@Blogfreakz — Mon, 07 May 2012 08:56:32 +0000

In creating animated transitions, Javascript has always been implemented but German web designer Heiko Stiegert has made it using only CSS. You can do this by using CSS3 pseudo-class :target and negation pseudo-class :not () properties together with CSS3 Transition Module. Get the DEMO here.

Check out his tutorial on building an accordion image gallery without Javascript by clicking on the image.

Incoming search terms for the article:

Photo Wall – Display Photos Like Google’s Image Search

Keith@Blogfreakz — Tue, 03 Apr 2012 05:04:20 +0000

Do you know that animated effect that you see on Google when you’re doing an image search? Well, thanks to a jQuery plugin created by Creotiv called Photo Wall, you can now mimic the same effect on your website! This plugin is great, especially if your website features lots of photos and albums.

Click on the image above to see the demo.

You need jQuery versions 1.7.1 and above to make this work. As courtesy, feel free to show your support to the author of the code by forking his GitHub page. You will also find the link to the source code, the installation instructions, and the download over there.

Incoming search terms for the article:

JQuery Bubble Slideshow

Marvin@Blogfreakz — Wed, 28 Mar 2012 01:35:35 +0000

Martin Angelov’s jQuery bubble animation effect is ideal for portfolio or gallery websites. It is very easy to use and highly customizable though it doesn’t work well with older versions of IE since it utilizes CSS3.

You can also use this effect to create backgrounds and headers. Since the plugin is made to resize automatically, you can tweak its CSS properties easily.

Click on the image for the DEMO.

HTML

Index.html

Bubble Slideshow Effect with jQuery | Tutorialzine Demo

Javascript and jQuery

jQuery.bubbleSlideshow.js

// This is the Bubble class. It takes left and top
// coordinates, size (diameter) and a image URL

function Bubble( left, top, size, imgURL ){

                    this.top     = top;
                    this.left     = left;
                    this.size    = size;

                    // This places the center of the
                    // circles on the specified position:

                    top -= size/2;
                    left-= size/2;

                    this.elem = $('',{
                                         'class':'bubble',
                                         'css'            : {
                                                             'width'                           : size,
                                                             'height'     : size,
                                                             'top'                                : top,
                                                             'left'                                : left,
                                                             'background-position': (-left)+'px '+(-top)+'px',
                                                             'background-image': 'url('+imgURL+')'
                                         }
                    });

}

// The fly from method takes a starting position, time,
// and a callback function, executed when the animation finishes.

Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){

                    time = time || 250;
                    callBack = callBack || function(){};

                    startX -= this.size/2;
                    startY -= this.size/2;

                    // Offsetting the element

                    this.elem.css({
                                         'display'                                                                 : 'block',
                                         'backgroundPositionX'                : -startX,
                                         'backgroundPositionY'                : -startY,
                                         'left'                                                                                             : startX,
                                         'top'                                                                                             : startY
                    });

                    // Animating it to where it should be

                    this.elem.animate({
                                         'backgroundPositionX'                : -this.left,
                                         'backgroundPositionY'                : -this.top,
                                         'left'                                                                                             : this.left,
                                         'top'                                                                                             : this.top
                    }, time, 'easeOutCirc', callBack );

};

// Helper function for generating random
// values in the [min,max] range

function rand( min, max ){
                    return Math.floor( Math.random()*((max+1)-min) + min);
}

The function creates different bubble objects. It has three parameters: stage, imgURL and func.

Every transition shows a random set of bubbles that vanish when the image moves on to the next.

jQuery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

                                         if(!$.isArray(photos)){
                                                             throw new Error("You need to pass an array of photo URLs as a parameter!");
                                         }

                                         photos = photos.reverse();

                                         var ul = this.addClass('bubbleSlideshow');

                                         $.each(photos,function(){
                                                             ul.append('
');
                                         });

                                         // These methods are available externally and
                                         // can be used to control the bubble slideshow

                                         ul.showNext = function(){
                                                             showNext(ul);
                                         };

                                         ul.showPrev = function(){
                                                             showPrev(ul);
                                         };

                                         ul.autoAdvance = function(timeout){
                                                             timeout = timeout || 6000;
                                                             autoAdvance(ul,timeout);
                                         };

                                         ul.stopAutoAdvance = function(){
                                                             stopAutoAdvance(ul);
                                         };

                                         return ul;
                    };

After creating the set of bubbles in LI element and animating them, the next code will show the rest of the plugin since the previous codes are just functions.

jQuery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

                                         if(!$.isArray(photos)){
                                                             throw new Error("You need to pass an array of photo URLs as a parameter!");
                                         }

                                         photos = photos.reverse();

                                         var ul = this.addClass('bubbleSlideshow');

                                         $.each(photos,function(){
                                                             ul.append('
');
                                         });

                                         // These methods are available externally and
                                         // can be used to control the bubble slideshow

                                         ul.showNext = function(){
                                                             showNext(ul);
                                         };

                                         ul.showPrev = function(){
                                                             showPrev(ul);
                                         };

                                         ul.autoAdvance = function(timeout){
                                                             timeout = timeout || 6000;
                                                             autoAdvance(ul,timeout);
                                         };

                                         ul.stopAutoAdvance = function(){
                                                             stopAutoAdvance(ul);
                                         };

                                         return ul;
                    };

jQuery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

                                         if(!$.isArray(photos)){
                                                             throw new Error("You need to pass an array of photo URLs as a parameter!");
                                         }

                                         photos = photos.reverse();

                                         var ul = this.addClass('bubbleSlideshow');

                                         $.each(photos,function(){
                                                             ul.append('
');
                                         });

                                         // These methods are available externally and
                                         // can be used to control the bubble slideshow

                                         ul.showNext = function(){
                                                             showNext(ul);
                                         };

                                         ul.showPrev = function(){
                                                             showPrev(ul);
                                         };

                                         ul.autoAdvance = function(timeout){
                                                             timeout = timeout || 6000;
                                                             autoAdvance(ul,timeout);
                                         };

                                         ul.stopAutoAdvance = function(){
                                                             stopAutoAdvance(ul);
                                         };

                                         return ul;
                    };

Below is the script for initializing the slideshow.

Script.js

$(function(){
                    var photos = [
                                         'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
                                         'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
                                         'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
                                         'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
                                         'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
                                         'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
                    ];

                    var slideshow = $('#slideShow').bubbleSlideshow(photos);

                    $(window).load(function(){
                                         slideshow.autoAdvance(5000);
                    });

                    // Other valid method calls:

                    // slideshow.showNext();
                    // slideshow.showPrev();
                    // slideshow.stopAutoAdvance();
});

CSS is then defined below

jQuery.bubbleSlideshow.css

ul.bubbleSlideshow{
                    position:relative;
                    list-style:none;
                    overflow:hidden;
}

.bubbleSlideshow li{
                    position:absolute;
                    top:0;
                    left:0;
}

.bubbleSlideshow li img{
                    display:block;
}

.bubbleSlideshow li div.bubble{                                        
                    -moz-border-radius:50%;
                    -webkit-border-raidus:50%;
                    border-radius:50%;

                    background-repeat:no-repeat;
                    display:none;
                    position:absolute;
}

Incoming search terms for the article:

Display Your Photos with Ultimate Photo Widget!

Keith@Blogfreakz — Thu, 22 Mar 2012 11:10:58 +0000

Ultimate Photo Widget allows you to display photos from your Flickr, Tumblr, and Pinterest accounts. And why the ‘ultimate’ monicker? Pretty much the same answer — because it allows you to display photos from your Flickr, Tumblr, and Pinterest accounts in three different styles: vertical, tiles, and slideshow, and that’s saying a lot!

Hit this image to see the demo!

This widget is created and authored by electrictreehouse and kylinuntitled . To get more info about the widget, go HERE.

Incoming search terms for the article:

Googleslides: A jQuery Image Slideshow Plugin

Keith@Blogfreakz — Thu, 01 Mar 2012 03:33:43 +0000

Googleslides is a jQuery plugin that creates a slideshow with your Picasa, Google+, and Google Photos pictures. Created by software developer Brady Holt, the plugin allows you to choose the pictures you wish to use, specify the size of the image slideshow, and also add captions and time.

Click on the landscape to view 3 Googleslide demos.

It comes with a short code that’s so easy to use. Simply specify the album ID and user ID to start retrieving images. So check out Brady’s Github tutorial now!

Incoming search terms for the article:

The Wall – Draggable & Endless Content Galleries For MooTools

Mufti Ali — Tue, 12 Jul 2011 16:13:59 +0000

The Wall is plugin for MooTools that enables you to create an endless grid. You choose the number of elements, The Wall will see to the rest. Every moment you may know the position of your wall or move it where you like better by clicking or dragging it.

With The Wall you decide the position of your contents punctually. Every plug is ready to hold your contents, pictures, videos, texts, everything. You are the one who chooses how to show your information.

With The Wall you may have an endless grid or an original draggable coda slider, if you like better. You’re right! The Wall can work in a traditional or draggable coda fuctionality. 2 functions and a new and original interaction system.

Requirements: MooTools 1.3.2+
Demo: http://wall.plasm.it
License: MIT License

Incoming search terms for the article:

200 best web galleries to submit your designs

Mufti Ali — Tue, 22 Feb 2011 17:42:25 +0000

On this article we have gathered a huge list featuring dozens of web galleries where you can submit your designs and gain more exposure in the process.

Incoming search terms for the article:

200 web galleries

Top 15 MooTools Plugins Free

Mufti Ali — Wed, 12 Jan 2011 13:50:24 +0000

MooTools (My Object-Oriented Tools) is a lightweight, object-oriented, web-application framework for JavaScript, written in JavaScript. It is released under the free, open-source MIT License. Mootools are one of very famous Javascript Framework like jQuery, designed for the intermediate to advanced JavaScript developer. Today i collected top 15 Moo tools plugin for you to download and enjoy.

Incoming search terms for the article:

jQuery Panel Gallery Plugin 2.0

Mufti Ali — Mon, 11 Oct 2010 08:37:09 +0000

jQuery Panel Gallery is plugin for jQuery that allow us to take a group of images and transition from one to the other in a smooth, visually appealing way. Not one image needs to be sliced or edited to work with this plugin, in fact the plugin handles everything itself.

Next, you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top. You can set the initial delay before the transitions begin, set the transitions to loop or stop after the last image, set the time it takes for each panel to appear, and set the delay between the images.

Features

No slicing or editing of the images is needed
Dozens of image transition effects
It’s just 11 KB compressed
Each image can have its own fade effect
You can setup an array of effects to apply to your images
The gallery can be set to pause on mouseover
Easily configurable
Reusable on multiple containers

Requirements: jQuery framework
Demo: http://www.catchmyfame.com/2010/09/13/jquery-panel-gallery-2-0-released/#demo
License: CC Attribution-No Derivative Works 3.0 License

Incoming search terms for the article:

Sideways – Fullscreen Image Gallery With jQuery

Mufti Ali — Wed, 22 Sep 2010 02:57:09 +0000

Sideways is A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS. Sideways image gallery made by implementation of some scripts and some (minor) CSS3. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron jquery mousewheel plugin.

You can use Sideways on both personal and commercial projects you choose, develop it further or just make it better.

Requirements: jQuery Framework
Demo: http://manos.malihu.gr/sideways-jquery-fullscreen…
License: License Free