Created
March 20, 2012 07:12
-
-
Save jethrolarson/2132351 to your computer and use it in GitHub Desktop.
script.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var $w = $(window); | |
| function imageHolder() { | |
| //Organize our thumbs | |
| var iThumb = 1, firstImage; | |
| $('#album-thumbs > ul > li').each(function() { | |
| if(iThumb === 1) { | |
| $(this).addClass('current'); | |
| } | |
| $(this).attr('id', 'albumThumb-'+iThumb); | |
| iThumb++; | |
| }); | |
| imageWidth = $('#image-holder > img').width(); | |
| //if the user resizes, we resize too | |
| $w.resize(function() { | |
| resizeHolder(); | |
| imageWidth = $('#image-holder > img').width(); | |
| centerImage(imageWidth); | |
| thumbsArrows(); | |
| }); | |
| //deals with our album thumbs | |
| albumThumbs(); | |
| var myHash = window.location.hash,bigImg; | |
| if(myHash) { | |
| var myHashTemp = myHash.split('#'); | |
| var myHashArr = myHashTemp[1].split('/'); | |
| if(myHashArr[1]) { | |
| if(!myHashArr[1] && isInt(myHashArr[1]) && newAlbum === 0) { | |
| var myFirstPhoto = $('#album-thumbs > ul > li:eq('+(myHashArr[1] - 1)+')'); | |
| if(myFirstPhoto.length > 0) { | |
| $('#album-thumbs > ul > li.current').removeClass('current').children('span').remove(); | |
| myFirstPhoto.addClass('current').append('<span class="currentArrow"></span>'); | |
| firstImage = myFirstPhoto.children('img').attr('longdesc'); | |
| } else { | |
| firstImage = $('#album-thumbs > ul > li.current > img').attr('longdesc'); | |
| } | |
| } else { | |
| firstImage = $('#album-thumbs > ul > li.current > img').attr('longdesc'); | |
| } | |
| } else { | |
| firstImage = $('#album-thumbs > ul > li.current > img').attr('longdesc'); | |
| } | |
| $body.removeClass('homepage'); | |
| } else { | |
| $body.addClass('homepage'); | |
| bigImg = new Image(); | |
| bigImg.style.opacity = 0; | |
| bigImg.src='/wp-content/themes/photonWP/images/rb-studio-home.jpg'; | |
| bigImg.onload = function(){ | |
| $(bigImg).animate({opacity:1},300); | |
| }; | |
| $('#image-holder').append(bigImg); | |
| } | |
| if(firstImage)loadImage(firstImage); | |
| newAlbum = 0; | |
| $('#album-thumbs > ul > li').click(function() { | |
| callSpecPhoto($(this).attr('id')); | |
| }); | |
| thumbsArrows(); | |
| //$('#photo-album-wrapper').hover(function() { | |
| //$(this).stop().animate({ top: 0 }, { duration: 300, easing: 'easeOutQuart' }); | |
| //$('.thumb-icon').stop().animate({ width: 0, height: 0 }, 100); | |
| //}, function() { | |
| //$(this).stop().animate({ top: '-111px' }, { duration: 300, easing: 'easeOutQuart' }); | |
| //$('.thumb-icon').stop().animate({ width: '16px', height: '20px' }, 100); | |
| //}); | |
| $('#open-externally').css({ opacity: 0.5 }).hover(function() { | |
| $(this).stop().animate({ opacity: 1 }, { duration: 200, easing: 'easeOutQuart' }); | |
| $(this).children('span').stop(true, true).fadeIn(200); | |
| }, function() { | |
| $(this).stop().animate({ opacity: 0.5 }, { duration: 300, easing: 'easeOutQuart' }); | |
| $(this).children('span').stop(true, true).fadeOut(200); | |
| }); | |
| } | |
| function resizeHolder() { | |
| var windowHeight = $w.height(); | |
| $('#image-holder').css({height: (windowHeight-80)+'px' }); | |
| var windowWidth = $w.width(); | |
| $('#image-holder').css({ width: windowWidth+'px'}); | |
| } | |
| function albumThumbs () { | |
| $('#album-thumbs > ul > li span:not(#album-thumbs > ul > li.current > span)').remove(); | |
| //adds the arrow to the current album thumb | |
| albumThumbCurrentArrow(); | |
| var numberPhotos = $('#album-thumbs > ul > li').length; | |
| } | |
| function callSpecPhoto(id) { | |
| var currentPhoto = $('#album-thumbs > ul > li.current'); | |
| var nextPhoto = $('#'+id); | |
| if(nextPhoto.attr('class') != 'current') { | |
| currentPhoto.removeClass('current'); | |
| nextPhoto.addClass('current'); | |
| var nextImg = nextPhoto.children('img').attr('longdesc'); | |
| loadImage(nextImg); | |
| albumThumbs(); | |
| } | |
| } | |
| function centerImage(width) { | |
| var windowWidth = $w.width(); | |
| var windowHeight = ($w.height() - 80); | |
| var imageHeight = $('#image-holder > img').height(); | |
| var imageWidth = $('#image-holder > img').width(); | |
| var imageNewHeight,imageNewWidth,imagePos,imagePosTop; | |
| if(imageHeight) { | |
| if(imageHeight > windowHeight) { | |
| if(imageWidth > windowWidth) { | |
| if((imageWidth - windowWidth) > (imageHeight - windowHeight)) { | |
| imageNewWidth = windowWidth; | |
| imageNewHeight = (imageNewWidth / imageWidth) * imageHeight; | |
| $('#image-holder > img').css({ height: imageNewHeight+'px', width: imageNewWidth+'px' }); | |
| imagePosTop = (windowHeight - $('#image-holder > img').height()) / 2; | |
| $('#image-holder > img').css({ 'margin-top': imagePosTop+'px' }); | |
| } else if((imageWidth - windowWidth) < (imageHeight - windowHeight)) { | |
| imageNewHeight = windowHeight; | |
| imageNewWidth = (imageNewHeight / imageHeight) * imageWidth; | |
| $('#image-holder > img').css({ height: imageNewHeight+'px', width: imageNewWidth+'px' }); | |
| imagePos = (windowWidth - $('#image-holder > img').width()) / 2; | |
| $('#image-holder > img').css({ 'margin-left': imagePos+'px' }); | |
| } | |
| } else { | |
| imageNewHeight = windowHeight; | |
| imageNewWidth = (imageNewHeight / imageHeight) * imageWidth; | |
| $('#image-holder > img').css({ height: imageNewHeight+'px', width: imageNewWidth+'px' }); | |
| imagePos = (windowWidth - $('#image-holder > img').width()) / 2; | |
| $('#image-holder > img').css({ 'margin-left': imagePos+'px' }); | |
| } | |
| } else if(imageWidth > windowWidth) { | |
| imageNewWidth = windowWidth; | |
| imageNewHeight = (imageNewWidth / imageWidth) * imageHeight; | |
| $('#image-holder > img').css({ height: imageNewHeight+'px', width: imageNewWidth+'px' }); | |
| imagePosTop = (windowHeight - $('#image-holder > img').height()) / 2; | |
| $('#image-holder > img').css({ 'margin-top': imagePosTop+'px' }); | |
| } else { | |
| //thre is not extra width or height | |
| imagePosTop = (windowHeight - imageHeight) / 2; | |
| $('#image-holder > img').css({ 'margin-top': imagePosTop+'px' }); | |
| imagePos = (windowWidth - $('#image-holder > img').width()) / 2; | |
| $('#image-holder > img').css({ 'margin-left': imagePos+'px' }); | |
| } | |
| } | |
| } | |
| function loadImage(imageUrl) { | |
| $body.removeClass('homepage'); | |
| var currentAlbum = $('.currentAlbum').children('a').text().toLowerCase(); | |
| tempIndex = 1; | |
| currentPhoto = 1; | |
| $('#album-thumbs > ul > li').each(function() { | |
| if($(this).attr('class') == 'current') { | |
| currentPhoto = tempIndex; | |
| } | |
| tempIndex++; | |
| }); | |
| var newHash = currentAlbum+'/'+currentPhoto; | |
| window.location.hash = newHash; | |
| resizeHolder(); | |
| var img = new Image(); | |
| $(img).attr('src', imageUrl); | |
| if (!img.complete) { | |
| if($('#image-holder').children('img').length > 0) { | |
| $('#image-holder').children('img').stop(true, true).fadeOut(200, function() { | |
| $('#image-holder').removeClass('errorLoading').addClass('loading'); | |
| $(this).remove(); | |
| var img = new Image(); | |
| $(img).load(function() { | |
| //Hide our image | |
| $(this).hide(); | |
| //removes the loading class | |
| $('#image-holder').removeClass('loading').append(this); | |
| //shows our image | |
| $(this).stop(true, true).fadeIn(500); | |
| imageWidth = $(this).width(); | |
| centerImage(imageWidth); | |
| }).error(function() { | |
| //if there's an error | |
| $('#image-holder').removeClass('loading').addClass('errorLoading'); | |
| }).attr('src', imageUrl); | |
| $('#open-externally').attr('href', imageUrl); | |
| }); | |
| } else { | |
| img = new Image(); | |
| $('#image-holder').removeClass('errorLoading').addClass('loading'); | |
| $(img).load(function() { | |
| //Hide our image | |
| $(this).hide(); | |
| //removes the loading class | |
| $('#image-holder').removeClass('loading').append(this); | |
| //shows our image | |
| $(this).stop(true, true).fadeIn(500); | |
| imageWidth = $(this).width(); | |
| centerImage(imageWidth); | |
| }).error(function() { | |
| //if there's an error | |
| $('#image-holder').removeClass('loading').addClass('errorLoading'); | |
| }).attr('src', imageUrl); | |
| $('#open-externally').attr('href', imageUrl); | |
| } | |
| } else { | |
| if($('#image-holder > img').length > 0) { | |
| $('#image-holder > img').fadeOut(150, function() { | |
| $(this).remove(); | |
| $('#image-holder').append($(img)); | |
| $('#image-holder > img').css({ opacity: 0 }).animate({ opacity: 1 }, 200); | |
| imageWidth = $('#image-holder > img').width(); | |
| centerImage(imageWidth); | |
| }); | |
| $('#open-externally').attr('href', imageUrl); | |
| } else { | |
| $('#image-holder').removeClass('errorLoading').append($(img)); | |
| imageWidth = $('#image-holder > img').width(); | |
| centerImage(imageWidth); | |
| $('#open-externally').attr('href', imageUrl); | |
| } | |
| } | |
| } | |
| function albumThumbCurrentArrow() { | |
| $('#album-thumbs> ul > li.current').append('<span class="currentArrow"></span>'); | |
| } | |
| function callPreviousPhoto() { | |
| var currentPhoto = $('#album-thumbs ul li.current'); | |
| var prevPhoto = currentPhoto.prev(); | |
| if(prevPhoto.length === 0) { | |
| prevPhoto = $('#album-thumbs ul li:last'); | |
| } | |
| callSpecPhoto(prevPhoto.attr('id')); | |
| } | |
| function tooltipHandler() { | |
| tooltipAdded = 0; | |
| tooltipClicked = 0; | |
| $('#image-holder').mouseenter(function() { | |
| var currentThumb = $('#album-thumbs ul li.current'); | |
| var currentDesc = currentThumb.children('div.description').html(); | |
| if(tooltipAdded === 0) { | |
| $('#image-tooltip').append(currentDesc); | |
| tooltipAdded = 1; | |
| } | |
| if(tooltipClicked === 0 && currentDesc !== null) { | |
| $('#image-tooltip').fadeIn(200); | |
| } | |
| }).mousemove(function(e) { | |
| $('#image-tooltip').css({ left: e.pageX+'px' }); | |
| $('#image-tooltip').css({ top: (e.pageY + 40)+'px' }); | |
| }).mouseleave(function() { | |
| $('#image-tooltip').css({ display: 'none' }).html('').append('<span></span>'); | |
| tooltipAdded = 0; | |
| }); | |
| $('#image-holder').click(function() { | |
| var currentThumb = $('#album-thumbs ul li.current'); | |
| var currentDesc = currentThumb.children('div.description').html(); | |
| if(tooltipClicked === 0) { | |
| $('#image-tooltip').fadeOut(200); | |
| tooltipClicked = 1; | |
| } else { | |
| if(currentDesc !== null) { | |
| $('#image-tooltip').fadeIn(200); | |
| tooltipClicked = 0; | |
| } | |
| } | |
| }); | |
| } | |
| function thumbsArrows() { | |
| var thumbsWidth = (($('#album-thumbs li').length) * (86)) + 60; | |
| var windowWidth = $w.width(); | |
| var noOfScrolls = (Math.ceil((thumbsWidth / windowWidth)) * 2) - 1; | |
| currentScroll = 1; | |
| $('#more-thumbs, #less-thumbs').css({ opacity: 0 }); | |
| $('#more-thumbs').hover(function() { | |
| if(currentScroll !== noOfScrolls) { | |
| $(this).stop().animate({ opacity: 1 }, 200); | |
| } | |
| }, function() { | |
| $(this).stop().animate({ opacity: 0 }, 200); | |
| }); | |
| $('#less-thumbs').hover(function() { | |
| if(currentScroll !== 1) { | |
| $(this).stop().animate({ opacity: 1 }, 200); | |
| } else if(currentScroll === 1) { | |
| $(this).css({ 'z-index': 9 }); | |
| } | |
| }, function() { | |
| $(this).stop().animate({ opacity: 0 }, 200); | |
| }); | |
| $('#more-thumbs').click(function() { | |
| if(currentScroll < noOfScrolls) { | |
| thumbsPos = (currentScroll * (windowWidth / 2)); | |
| $('#album-thumbs').stop().animate({ left: '-'+thumbsPos+'px' }, 400); | |
| $('#less-thumbs').css({ 'z-index': 15 }); | |
| currentScroll++; | |
| } | |
| }); | |
| $('#less-thumbs').click(function() { | |
| if(currentScroll > 1) { | |
| thumbsPos = ((currentScroll-2) * (windowWidth / 2)); | |
| $('#album-thumbs').stop().animate({ left: '-'+thumbsPos+'px' }, 400); | |
| currentScroll--; | |
| } | |
| }); | |
| } | |
| function dropDown() { | |
| $("#menu ul li").hover(function() { | |
| var $this = $(this); | |
| $this.find('ul:first').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 200); | |
| $this.find('ul:first li').css({ opacity: 0.8 });//Slides down when hover the UL | |
| }, function() { | |
| $(this).find('ul:first').fadeOut(200); | |
| }); | |
| $("#menu ul li ul li").hover(function() { | |
| $(this).stop().animate({ opacity: 1 }, 150); | |
| }, function() { | |
| $(this).stop().animate({ opacity: 0.8 }, 150); | |
| }); | |
| } | |
| function loadPages() { | |
| window.$body = $('body'); | |
| var cont = $('#album-thumbs'), | |
| firstAlbum = $('li.menu-item-type-taxonomy:first a').attr('href'), | |
| myHash = window.location.hash, | |
| albumLoaded; | |
| newAlbum = 0; | |
| if(myHash) { | |
| var myHashTemp = myHash.split('#'); | |
| var myHashArr = myHashTemp[1].split('/'); | |
| albumLoaded = 0; | |
| $('#menu .menu-item-type-taxonomy').each(function() { | |
| if($(this).children('a').text().toLowerCase() == myHashArr[0]) { | |
| albumLoaded = 1; | |
| $(this).addClass('currentAlbum'); | |
| var curAlbum = $(this).children('a').attr('href'); | |
| cont.load(curAlbum, function() { | |
| imageHolder(); | |
| }); | |
| } | |
| }); | |
| } else { | |
| $('li.menu-item-type-taxonomy:first').addClass('currentAlbum'); | |
| cont.load(firstAlbum, function() { | |
| imageHolder(); | |
| }); | |
| } | |
| if(albumLoaded === 0) { | |
| $('li.menu-item-type-taxonomy:first').addClass('currentAlbum'); | |
| cont.load(firstAlbum, function() { | |
| imageHolder(); | |
| }); | |
| } | |
| $(document).keypress(function(e) { | |
| var currentPhoto,nextPhoto; | |
| if(e.keyCode === 39) { | |
| currentPhoto = $('#album-thumbs ul li.current'); | |
| nextPhoto = currentPhoto.next(); | |
| if(!nextPhoto.length) { | |
| nextPhoto = $('#album-thumbs ul li:first'); | |
| } | |
| callSpecPhoto(nextPhoto.attr('id')); | |
| } else if(e.keyCode === 37) { | |
| currentPhoto = $('#album-thumbs ul li.current'); | |
| prevPhoto = currentPhoto.prev(); | |
| if(!prevPhoto.length) { | |
| prevPhoto = $('#album-thumbs ul li:last'); | |
| } | |
| callSpecPhoto(prevPhoto.attr('id')); | |
| } | |
| }); | |
| $('li.menu-item-type-taxonomy a').click(function() { | |
| if($('#content-holder').css('display') == 'block') { | |
| $('#content-holder, #content-wrapper').fadeOut(200); | |
| } | |
| var currentClass = $(this).parent().attr('class').split(' '); | |
| if(currentClass[1] != 'currentAlbum') { | |
| $('body').removeClass('homepage'); | |
| location.hash = this.search; | |
| var newAlbumUrl = $(this).attr('href'); | |
| $('#menu ul li.currentAlbum').removeClass('currentAlbum'); | |
| $(this).parent().addClass('currentAlbum'); | |
| cont.children('ul').remove(); | |
| cont.load(newAlbumUrl, function() { | |
| currentScroll = 1; | |
| $('#album-thumbs').css({ left: 0 }); | |
| thumbsArrows(); | |
| newAlbum = 1; | |
| imageHolder(); | |
| }); | |
| } | |
| return false; | |
| }); | |
| tooltipHandler(); | |
| $('#previous-photo').hover(function() { | |
| $(this).children('div').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 200); | |
| }, function() { | |
| $(this).children('div').stop().animate({ opacity: 0 }, 200); | |
| }); | |
| $('#next-photo').hover(function() { | |
| $(this).children('div').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 200); | |
| }, function() { | |
| $(this).children('div').stop().animate({ opacity: 0 }, 200); | |
| }); | |
| $('#next-photo').click(function() { | |
| var currentPhoto = $('#album-thumbs ul li.current'); | |
| var nextPhoto = currentPhoto.next(); | |
| if(!nextPhoto.length) { | |
| nextPhoto = $('#album-thumbs ul li:first'); | |
| } | |
| callSpecPhoto(nextPhoto.attr('id')); | |
| }); | |
| $('#previous-photo').click(function() { | |
| var currentPhoto = $('#album-thumbs ul li.current'); | |
| var prevPhoto = currentPhoto.prev(); | |
| if(!prevPhoto.length) { | |
| prevPhoto = $('#album-thumbs ul li:last'); | |
| } | |
| callSpecPhoto(prevPhoto.attr('id')); | |
| }); | |
| } | |
| function contentHandler() { | |
| centerContent(); | |
| $w.resize(function() { | |
| centerContent(); | |
| }); | |
| $('#menu ul li').click(function() { | |
| return false; | |
| }); | |
| $('#menu ul li.menu-item-type-post_type').click(function() { | |
| var pageUrl = $(this).children('a').attr('href'); | |
| if($('#content-wrapper').css('display') == 'none') { | |
| $('body').removeClass('homepage'); | |
| $('#content-area').html(''); | |
| $('#content-area').css({ opacity: 0 }); | |
| $('#content-holder').addClass('loading'); | |
| $('#content-wrapper').fadeIn(200); | |
| $('#content-holder').fadeIn(200); | |
| $(this).addClass('hovered'); | |
| $('#content-area').load(pageUrl, function() { | |
| $('#content-holder').removeClass('loading'); | |
| Cufon.replace('#content-holder h1, #content-holder h2, #content-holder h3, #content-holder h4, #content-holder h5, #content-holder h6', { | |
| hover: true | |
| }); | |
| submitForm(); | |
| $('#content-area').stop().animate({ opacity: 1 }, 200); | |
| }); | |
| } else { | |
| if($(this).attr('class') != 'page hovered') { | |
| $('#menu ul li.hovered').removeClass('hovered'); | |
| $('#content-area').html(''); | |
| $('#content-area').css({ opacity: 0 }); | |
| $('#content-holder').addClass('loading'); | |
| $(this).addClass('hovered'); | |
| $('#content-area').load(pageUrl, function() { | |
| $('#content-holder').removeClass('loading'); | |
| $('#content-area').stop().animate({ opacity: 1 }, 200); | |
| Cufon.replace('#content-holder h1, #content-holder h2, #content-holder h3, #content-holder h4, #content-holder h5, #content-holder h6', { | |
| hover: true | |
| }); | |
| }); | |
| submitForm(); | |
| } else { | |
| $('#content-wrapper').fadeOut(200); | |
| $('#content-holder').fadeOut(200); | |
| $(this).removeClass('hovered'); | |
| } | |
| Cufon.replace('#menu ul li a:not(#menu ul li ul li a)', { | |
| hover: true | |
| }); | |
| } | |
| return false; | |
| }); | |
| $('#content-wrapper').click(function() { | |
| $('#content-wrapper').fadeOut(200); | |
| $('#content-holder').fadeOut(200); | |
| $('#menu ul li.menu-item-type-post_type').removeClass('hovered'); | |
| Cufon.replace('#menu ul li a:not(#menu ul li ul li a)', { | |
| hover: true | |
| }); | |
| }); | |
| } | |
| function centerContent() { | |
| var windowWidth = $w.width(); | |
| var windowHeight = $w.height() - 80; | |
| var newLeftPos = (windowWidth - 960) / 2; | |
| var newHeight = (windowHeight - 80); | |
| var newAreaHeight = (windowHeight - 80); | |
| $('#content-wrapper').css({ height: (newHeight+80)+'px' }); | |
| $('#content-holder').css({ left: newLeftPos+'px', height: newHeight+'px' }); | |
| $('#content-area').css({ height: newAreaHeight+'px' }); | |
| } | |
| //Code Smell | |
| function isInt(x) { | |
| var y = parseInt(x,10); | |
| if (isNaN(y)) return false; | |
| return x==y && x.toString()==y.toString(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment