Permalink
Browse files

carousel working completely

  • Loading branch information...
1 parent ab38cb7 commit 28f298dfb22afe8a79ca3dbff93ad4e55413b5ce @blackant blackant committed Jan 10, 2011
@@ -251,18 +251,29 @@ section#colophon h2 {
position: relative;
top: 45px;
- a#ss-previous {
- z-index: 100;
+ a.ss-nav {
position: absolute;
- top: 200px;
- left: -10px;
+ top: 170px;
+ z-index: 100;
+ width: 40px;
+ height: 40px;
+ opacity: 0.9;
+ -webkit-transition: opacity .25s ease-in, background .25s ease-in;
+ -moz-transition: opacity .25s ease-in, background .25s ease-in;
+ transition: opacity .25s ease-in, background .25s ease-in;
+ }
+ a.ss-nav:hover {
+ opacity: 1;
+ }
+
+ a#ss-previous {
+ left: -21px;
+ background: transparent url(/images/ss_nav_previous.png) 0 0 no-repeat;
}
a#ss-next {
- z-index: 100;
- position: absolute;
- top: 200px;
- left: 570px;
+ left: 548px;
+ background: transparent url(/images/ss_nav_next.png) 0 0 no-repeat;
}
ul {
View
@@ -177,16 +177,24 @@ section#colophon h2 {
#portfolio-wrapper figure {
position: relative;
top: 45px; }
- #portfolio-wrapper figure a#ss-previous {
- z-index: 100;
+ #portfolio-wrapper figure a.ss-nav {
position: absolute;
- top: 200px;
- left: -10px; }
- #portfolio-wrapper figure a#ss-next {
+ top: 170px;
z-index: 100;
- position: absolute;
- top: 200px;
- left: 570px; }
+ width: 40px;
+ height: 40px;
+ opacity: 0.9;
+ -webkit-transition: opacity .25s ease-in, background .25s ease-in;
+ -moz-transition: opacity .25s ease-in, background .25s ease-in;
+ transition: opacity .25s ease-in, background .25s ease-in; }
+ #portfolio-wrapper figure a.ss-nav:hover {
+ opacity: 1; }
+ #portfolio-wrapper figure a#ss-previous {
+ left: -21px;
+ background: transparent url(/images/ss_nav_previous.png) 0 0 no-repeat; }
+ #portfolio-wrapper figure a#ss-next {
+ left: 548px;
+ background: transparent url(/images/ss_nav_next.png) 0 0 no-repeat; }
#portfolio-wrapper figure ul {
list-style: none;
width: 570px;
View
@@ -129,8 +129,8 @@ var Portfolio = new Class({
initProjectDetailContainer: function() {
var figure = new Element('figure');
var slideshow = new Element('ul', {id: 'slideshow', styles: {position: 'absolute', left: -window.getSize().x}});
- var ss_previous = new Element('a', {href: '#', id: 'ss-previous', html: '<<'});
- var ss_next = new Element('a', {href: '#', id: 'ss-next', html: '>>'});
+ var ss_previous = new Element('a', {href: '#', id: 'ss-previous', 'class': 'ss-nav', styles: {opacity:0}});
+ var ss_next = new Element('a', {href: '#', id: 'ss-next', 'class': 'ss-nav', styles: {opacity:0}});
var figcaption = new Element('figcaption', {styles: {position: 'absolute', left: window.getSize().x}});
var h3 = new Element('h3', {styles: {display: 'block'}});
var br = new Element('br');
@@ -198,6 +198,10 @@ var Portfolio = new Class({
this.container.getChildren('figure h3').setStyle('display', 'inline-block');
this.container.getChildren('figure h4').setStyle('display', 'inline-block');
(function() { this.showProjectNav(project); }).delay(1000, this);
+ (function() {
+ $('ss-previous').fade(0.9);
+ $('ss-next').fade(0.9);
+ }).delay(1100, this);
slideshow = new Carousel({
container: 'slideshow',
@@ -220,6 +224,8 @@ var Portfolio = new Class({
},
hideProjectDetails: function() {
+ $('ss-previous').fade('hide');
+ $('ss-next').fade('hide');
this.container.getChildren('figure ul').move({
relativeTo: this.container,
position: 'upperLeft',
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 28f298d

Please sign in to comment.