javascript - Polaroid photobar gallery in DIV -
i made horizontal scrollto website divided in 7 seperate div's.
i'm desperately trying add polaroid photobar gallery inside div, can't figure out. can me explain what's going wrong? here url of website, can see gallery appears on first page.....
code html
<div id="medio2"></div> <div class="section" id="gall"> <div id="fotos" border="1"> <h1>the jargonauts galerie</h1> <div id="pp_gallery" class="pp_gallery"> <div id="pp_loading" class="pp_loading"></div> <div id="pp_next" class="pp_next"></div> <div id="pp_prev" class="pp_prev"></div> <div id="pp_thumbcontainer"> <!-- debut album1--> <div class="album"> <div class="content"> <img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" /> <span>max et bastian par denis charmot</span> </div> <div class="content"> <img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" /> <span>max par denis charmot</span> </div> <div class="content"> <img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" /> <span>des par denis charmot</span> </div> <div class="content"> <img src="images/album1/thumbs/4.jpg" alt="images/album1/4.jpg" /> <span>bastian par denis charmot</span> </div> <div class="content"> <img src="images/album1/thumbs/5.jpg" alt="images/album1/5.jpg" /> <span>des par denis charmot</span> </div> <div class="content"> <img src="images/album1/thumbs/6.jpg" alt="images/album1/6.jpg" /> <span>des par denis charmot</span> </div> <div class="descr"> jargonauts enregistrement ep </div> </div> <!-- fin album1--> <!-- debut album2--> <div class="album"> <div class="content"> <img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" /> <span>the jargonauts fleur derivaz</span> </div> <div class="content"> <img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" /> <span>the jargonauts fleur derivaz</span> </div> <div class="content"> <img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" /> <span>the jargonauts fleur derivaz</span> </div> <div class="content"> <img src="images/album2/thumbs/4.jpg" alt="images/album2/4.jpg" /> <span>the jargonauts fleur derivaz</span> </div> <div class="content"> <img src="images/album2/thumbs/5.jpg" alt="images/album2/5.jpg" /> <span>the jargonauts fleur derivaz</span> </div> <div class="content"> <img src="images/album2/thumbs/6.jpg" alt="images/album2/6.jpg" /> <span>the jargonauts fleur derivaz</span> </div> <div class="descr"> balade </div> </div> <!-- fin album2--> <!-- debut album3--> <div class="album"> <div class="content"> <img src="images/album3/thumbs/1.jpg" alt="images/album3/1.jpg" /> <span>max par esprit photo</span> </div> <div class="content"> <img src="images/album3/thumbs/2.jpg" alt="images/album3/2.jpg" /> <span>des & max par esprit photo</span> </div> <div class="content"> <img src="images/album3/thumbs/3.jpg" alt="images/album3/3.jpg" /> <span>the jargonauts par esprit photo</span> </div> <div class="content"> <img src="images/album3/thumbs/4.jpg" alt="images/album3/4.jpg" /> <span>chez & son saxo par esprit photo</span> </div> <div class="content"> <img src="images/album3/thumbs/5.jpg" alt="images/album3/5.jpg" /> <span>scène de l'après-ski aux gets par esprit photo</span> </div> <div class="content"> <img src="images/album3/thumbs/6.jpg" alt="images/album3/6.jpg" /> <span>bastian par esprit photo</span> </div> <div class="content"> <img src="images/album3/thumbs/7.jpg" alt="images/album3/7.jpg" /> <span>musique d'hiver par esprit photo</span> </div> <div class="descr"> concert à l'après-ski-les gets </div> </div> <!-- fin album3--> <!-- debut album4--> <div class="album"> <div class="content"> <img src="images/album4/thumbs/1.jpg" alt="images/album4/1.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/2.jpg" alt="images/album4/2.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/3.jpg" alt="images/album4/3.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/4.jpg" alt="images/album4/4.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/5.jpg" alt="images/album4/5.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/6.jpg" alt="images/album4/6.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/7.jpg" alt="images/album4/7.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/8.jpg" alt="images/album4/8.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/9.jpg" alt="images/album4/9.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="content"> <img src="images/album4/thumbs/10.jpg" alt="images/album4/10.jpg" /> <span>the jargonauts matthieu chandelier</span> </div> <div class="descr"> concert au brock 20.01.2013 </div> </div> </div> <div id="pp_back" class="pp_back">albums</div> </div> </div> <div> <span class="reference"> <a href="http://www.thejargonauts.com">retour vers le site</a> </span> </div> <!-- javascript --> <script src="js/jquery.transform-0.8.0.min.js"></script> <script type="text/javascript"> $(function() { var ie = false; if ($.browser.msie) { ie = true; } //current album/image displayed var enableshow = true; var current = -1; var album = -1; //windows width var w_width = $('#fotos').width(); //caching var $albums = $('#pp_thumbcontainer div.album'); var $loader = $('#pp_loading'); var $next = $('#pp_next'); var $prev = $('#pp_prev'); var $images = $('#pp_thumbcontainer div.content img'); var $back = $('#pp_back'); //we wnat spread albums through page equally //number of spaces divide with:number of albums plus 1 var nmb_albums = $albums.length; var spaces = w_width/(nmb_albums+1); var cnt = 0; //preload images (thumbs) var nmb_images = $images.length; var loaded = 0; $images.each(function(i){ var $image = $(this); $('<img />').load(function(){ ++loaded; if(loaded == nmb_images){ //let's spread albums equally on bottom of page $albums.each(function(){ var $this = $(this); ++cnt; var left = spaces*cnt - $this.width()/2; $this.css('left',left+'px'); $this.stop().animate({'bottom':'0px'},500); }).unbind('click').bind('click',spreadpictures); //also rotate each picture of album random number of degrees $images.each(function(){ var $this = $(this); var r = math.floor(math.random()*41)-20; $this.transform({'rotate' : r + 'deg'}); }); } }).attr('src', $image.attr('src')); }); function spreadpictures(){ var $album = $(this); //track album opened album = $album.index(); //hide other albums $albums.not($album).stop().animate({'bottom':'-90px'},300); $album.unbind('click'); //now move current album left //and @ same time spread images through //the window, rotating them randomly. hide description of album //store current left reverse operation $album.data('left',$album.css('left')) .stop() .animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200); var total_pic = $album.find('.content').length; var cnt = 0; //each picture $album.find('.content') .each(function(){ var $content = $(this); ++cnt; //window width var w_width = $('#fotos').width(); var spaces = w_width/(total_pic+1); var left = (spaces*cnt) - (140/2); var r = math.floor(math.random()*41)-20; //var r = math.floor(math.random()*81)-40; $content.stop().animate({'left':left+'px'},500,function(){ $(this).unbind('click') .bind('click',showimage) .unbind('mouseenter') .bind('mouseenter',upimage) .unbind('mouseleave') .bind('mouseleave',downimage); }).find('img') .stop() .animate({'rotate': r+'deg'},300); $back.stop().animate({'left':'0px'},300); }); } //back albums //the current album gets innitial left position //all other albums slide //the current image slides out $back.bind('click',function(){ $back.stop().animate({'left':'-100px'},300); hidenavigation(); //there's picture being displayed //lets slide current 1 if(current != -1){ hidecurrentpicture(); } var $current_album = $('#pp_thumbcontainer div.album:nth-child('+parseint(album+1)+')'); $current_album.stop() .animate({'left':$current_album.data('left')},500) .find('.descr') .stop() .animate({'bottom':'0px'},500); $current_album.unbind('click') .bind('click',spreadpictures); $current_album.find('.content') .each(function(){ var $content = $(this); $content.unbind('mouseenter mouseleave click'); $content.stop().animate({'left':'0px'},500); }); $albums.not($current_album).stop().animate({'bottom':'0px'},500); }); //displays image (clicked thumb) in center of page //if nav passed, displays next / previous 1 of //current album function showimage(nav){ if(!enableshow) return; enableshow = false; if(nav == 1){ //reached first 1 if(current==0){ enableshow = true; return; } var $content = $('#pp_thumbcontainer div.album:nth-child('+parseint(album+1)+')') .find('.content:nth-child('+parseint(current)+')'); //reached last 1 if($content.length==0){ enableshow = true; current-=2; return; } } else var $content = $(this); //show ajax loading image $loader.show(); //there's picture being displayed //lets slide current 1 if(current != -1){ hidecurrentpicture(); } current = $content.index(); var $thumb = $content.find('img'); var imgl_source = $thumb.attr('alt'); var imgl_description = $thumb.next().html(); //preload large image show $('<img style=""/>').load(function(){ var $imgl = $(this); //resize image based on windows size resize($imgl); //create element include large image //and description var $preview = $('<div />',{ 'id' : 'pp_preview', 'classname' : 'pp_preview', 'html' : '<div class="pp_descr"><span>'+imgl_description+'</span></div>', 'style' : 'visibility:hidden;' }); $preview.prepend($imgl); $('#pp_gallery').prepend($preview); var largew = $imgl.width()+20; var largeh = $imgl.height()+10+45; //change properties of wrapping div //to fit large image sizes $preview.css({ 'width' :largew+'px', 'height' :largeh+'px', 'margintop' :-largeh/2-20+'px', 'marginleft' :-largew/2+'px', 'visibility' :'visible' }); cufon.replace('.pp_descr'); //show navigation shownavigation(); //hide ajax image loading $loader.hide(); //slide (also rotating) large image var r = math.floor(math.random()*41)-20; if(ie) var param = { 'top':'50%' }; else var param = { 'top':'50%', 'rotate': r+'deg' }; $preview.stop().animate(param,500,function(){ enableshow = true; }); }).error(function(){ //error loading image. maybe show message : 'no preview available'? }).attr('src',imgl_source); } //click next image $next.bind('click',function(){ current+=2; showimage(1); }); //click previous image $prev.bind('click',function(){ showimage(1); }); //slides current picture function hidecurrentpicture(){ current = -1; var r = math.floor(math.random()*41)-20; if(ie) var param = { 'top':'-150%' }; else var param = { 'top':'-150%', 'rotate': r+'deg' }; $('#pp_preview').stop() .animate(param,500,function(){ $(this).remove(); }); } //shows navigation buttons function shownavigation(){ $next.stop().animate({'right':'0px'},100); $prev.stop().animate({'left':'0px'},100); } //hides navigation buttons function hidenavigation(){ $next.stop().animate({'right':'-40px'},300); $prev.stop().animate({'left':'-40px'},300); } //mouseenter event on each thumb function upimage(){ var $content = $(this); $content.stop().animate({ 'margintop' : '-70px' },400).find('img') .stop() .animate({'rotate': '0deg'},400); } //mouseleave event on each thumb function downimage(){ var $content = $(this); var r = math.floor(math.random()*41)-20; $content.stop().animate({ 'margintop' : '0px' },400).find('img').stop().animate({'rotate': r + 'deg'},400); } //resize function based on windows size function resize($image){ var widthmargin = 50 var heightmargin = 200; var windowh = $('#fotos').height()-heightmargin; var windoww = $('#fotos').width()-widthmargin; 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'}); } }); </script> </div></div> code css
#pp_gallery{ float:left; width: 600px; height: 500px; overflow: auto; padding-right: 30px; margin: 50px 0 0 100px; text-indent: 50px; bottom: 90px; left: 1018px; z-index: 93; display:table; border:1px solid grey; box-shadow: 1px 2px 9px #000000; } .pp_loading{ display:none; position:fixed; top:50%; left:50%; margin:-35px 0px 0px -35px; background:#fff url(../icons/loader.gif) no-repeat center center; width:70px; height:70px; z-index:999; opacity:0.7; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .pp_next, .pp_prev{ cursor:pointer; top:50%; margin-top:-16px; width:32px; height:32px; position:fixed; text-align:center; border:1px solid #111; color:#fff; -moz-box-shadow:0px 0px 3px #000; -webkit-box-shadow:0px 0px 3px #000; box-shadow:0px 0px 3px #000; } .pp_next{ right:2100 px; background:#222 url(../images/icons/next.png) no-repeat center center; } .pp_prev{ left:2700px; background:#222 url(../images/icons/prev.png) no-repeat center center; } #pp_thumbcontainer{ position:fixed; bottom:90px; left:0px; height:65px; width:100%; } #pp_thumbcontainer .album{ position:absolute; width:200px; height:65px; bottom:-26px; left: 5749px; } .album .descr, .pp_back{ position:absolute; bottom:9px; left:11px; background:#222; text-align:center; border:1px solid #111; padding:5px; cursor:pointer; width:169px; color:#fff; cursor:pointer; text-shadow:0px 0px 1px #fff; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000; z-index:100; } .pp_back{ text-transform:uppercase; bottom:-103px; left:5589px; width:80px; z-index:100; } #pp_thumbcontainer .content{ position:absolute; top:-112px; height:155px; cursor:pointer; left: 4px; z-index:100; } #pp_thumbcontainer img{ border:5px solid #fff; -moz-box-shadow:1px 1px 7px #000; -webkit-box-shadow:1px 1px 7px #000; box-shadow:1px 1px 7px #000; z-index:100; } #pp_thumbcontainer .content span{ display:none; z-index:100; } .pp_preview{ position:fixed; top:150%; left:50%; z-index:100; } .pp_preview img{ position:absolute; top:0px; left:0px; border:10px solid #fff; border-bottom:45px solid #fff; -moz-box-shadow:1px 1px 7px #000; -webkit-box-shadow:1px 1px 7px #000; box-shadow:1px 1px 7px #000; z-index:100; } .pp_descr{ height:45px; line-height:45px; font-size:20px; width:100%; bottom:0px; left:0px; position:absolute; text-align:center; color:#00021c; z-index:100; }
Comments
Post a Comment