Sliding Panel Photo Wall Gallery


Description: 全画面を使用したグリッドイメージギャラリーです。Flashライクな動きでダイナミックな表現がクールですね。position:fixed;がIE6では対応出来ないので必然的にIE6は非対応になりますが、jQueryそのものは動作します。
Sample: demo
Tutorial: Sliding Panel Photo Wall Gallery with jQuery
License: -

Note

$(function() {
                var current = -1;
                var totalpictures = $('#content img').size();
                var speed 	= 500;
                $('#content').show();
                $(window).bind('resize', function() {
                    var $picture = $('#wrapper').find('img');
                    resize($picture);
                });
                $('#content > img').hover(function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'1.0'},200);
                },function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'0.4'},200);
                }).bind('click',function(){
                    var $this   = $(this);
                    $('#loading').show();
                    $('<img/>').load(function(){
			   $('#loading').hide();

                        if($('#wrapper').find('img').length) return;
                        current 	= $this.index();
                        var $theImage   = $(this);
                        resize($theImage);
                        $('#wrapper').append($theImage);
                        $theImage.fadeIn(800);
                        $('#panel').animate({'height':'100%'},speed,function(){
                            var title = $this.attr('title');
                            if(title != '')
                                $('#description').html(title).show();
                            else
                                $('#description').empty().hide();
                            if(current==0)
                                $('#prev').hide();
                            else
                                $('#prev').fadeIn();
                            if(current==parseInt(totalpictures-1))
                                $('#next').hide();
                            else
                                $('#next').fadeIn();
                            $('#thumbsWrapper').css({'z-index':'0','height':'0px'});
                        });
                    }).attr('src', $this.attr('alt'));
                });

                $('#wrapper > img').live('click',function(){
                    $this = $(this);
                    $('#description').empty().hide();

                    $('#thumbsWrapper').css('z-index','10')
                    .stop()
                    .animate({'height':'100%'},speed,function(){
                        var $theWrapper = $(this);
                        $('#panel').css('height','0px');
                        $theWrapper.css('z-index','0');
                        $this.remove();
                        $('#prev').hide();
                        $('#next').hide();
                    });
                });

                $('#next').bind('click',function(){
                    var $this           = $(this);
                    var $nextimage 		= $('#content img:nth-child('+parseInt(current+2)+')');
                    navigate($nextimage,'right');
                });
                $('#prev').bind('click',function(){
                    var $this           = $(this);
                    var $previmage 		= $('#content img:nth-child('+parseInt(current)+')');
                    navigate($previmage,'left');
                });

                function navigate($nextimage,dir){
                    if(dir=='left' && current==0)
                        return;
                    if(dir=='right' && current==parseInt(totalpictures-1))
                        return;
                    $('#loading').show();
                    $('<img/>').load(function(){
                        var $theImage = $(this);
                        $('#loading').hide();
                        $('#description').empty().fadeOut();
                        $('#wrapper img').stop().fadeOut(500,function(){
                            var $this = $(this);
                            $this.remove();
                            resize($theImage);
                            $('#wrapper').append($theImage.show());
                            $theImage.stop().fadeIn(800);

                            var title = $nextimage.attr('title');
                            if(title != ''){
                                $('#description').html(title).show();
                            }
                            else
                                $('#description').empty().hide();

                            if(current==0)
                                $('#prev').hide();
                            else
                                $('#prev').show();
                            if(current==parseInt(totalpictures-1))
                                $('#next').hide();
                            else
                                $('#next').show();
                        });
                        if(dir=='right')
                            ++current;
                        else if(dir=='left')
                            --current;
                    }).attr('src', $nextimage.attr('alt'));
                }
                function resize($image){
                    var windowH      = $(window).height()-100;
                    var windowW      = $(window).width()-80;
                    var theImage     = new Image();
                    theImage.src     = $image.attr("src");
                    var imgwidth     = theImage.width;
                    var imgheight    = theImage.height;

                    if((imgwidth > windowW)||(imgheight > windowH)){
                        if(imgwidth > imgheight){
                            var newwidth = windowW;
                            var ratio = imgwidth / windowW;
                            var newheight = imgheight / ratio;
                            theImage.height = newheight;
                            theImage.width= newwidth;
                            if(newheight>windowH){
                                var newnewheight = windowH;
                                var newratio = newheight/windowH;
                                var newnewwidth =newwidth/newratio;
                                theImage.width = newnewwidth;
                                theImage.height= newnewheight;
                            }
                        }
                        else{
                            var newheight = windowH;
                            var ratio = imgheight / windowH;
                            var newwidth = imgwidth / ratio;
                            theImage.height = newheight;
                            theImage.width= newwidth;
                            if(newwidth>windowW){
                                var newnewwidth = windowW;
                                var newratio = newwidth/windowW;
                                var newnewheight =newheight/newratio;
                                theImage.height = newnewheight;
                                theImage.width= newnewwidth;
                            }
                        }
                    }
                    $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
                }
            });

cssの工夫が素敵です。

Related snippet :

  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: 省スペースでコンテンツが切り替わるボックスメニューです。ページ推移する事無く、そのメニュー項目の詳細を表示させます。IE6のみ表示が崩れますが、cs ...
  • Description: 省スペースで多くのコンテンツを見ることが出来るコンパクトニュースビューアを実装出来るプラグインです。css3を利用しているのでデモと同じように実装す ...
  • Description: 簡単なコードで出来るギャラリー。ナビゲーションとサムネイルも付いています。IE6,7はcssを調整しないとうまく表示できませんが、スクリプト自体は動 ...
  • Description: モニターサイズによって、Youtubeの幅を可変するコード。例えばIphoneでアクセスした際に自動でレイアウトを調整します。MedeiaQuery ...
  • Description: FacebookのフッターパネルをjQueryで実装したもの。クリックで隠されていたコンテンツが表示されたり、ツールチップなどもオマージュされていま ...
  • Description: iTuneライクなスライダーを手軽なコードで実装します。IEだとちょっと微妙ですね・・・サムネイル付きで画像の切り替わりと連動してサムネイルも動きま ...