}\r
\r
protected function _references() {\r
- $fluidbooks = Fluidbook_Model_Reference::factory()->where('homeimage != ?', '')->order('date DESC')->limit(6)->find();\r
+ $fluidbooks = Fluidbook_Model_Reference::factory()->where('homeimage != ?', '')->order('date DESC')->limit(30)->find();\r
+ $num = floor(count($fluidbooks) / 3) * 3;\r
+\r
$res = '';\r
$i = 0;\r
foreach ($fluidbooks as $fluidbook) {\r
$res .= $this->_reference($fluidbook, $i % 6 == 2 || $i % 6 == 3);\r
$i++;\r
+ if ($i == $num) {\r
+ break;\r
+ }\r
}\r
- return $this->htmlElement($res, 'div', array('class' => 'links'));\r
+ return $this->htmlElement($this->htmlElement($res, 'div', array('class' => 'scrollHolder')), 'div', array('class' => 'links'));\r
}\r
\r
/**\r
* @return mixed\r
*/\r
protected function _reference($fluidbook, $big = false) {\r
- $w = 1024;\r
- $h = $w / 2;\r
- if ($big) {\r
- $h = $w;\r
- }\r
+\r
$fluidbook = $fluidbook->unserialize();\r
- $res = $this->imageProcess($fluidbook->getHomeimage(), $fluidbook->getTitle(), $w, $h, array());\r
+ $res = $this->htmlElement('', 'div', array(\r
+ 'style' => 'background-image:url("' . $this->imageProcess()->imageProcessGetUrl($fluidbook->getHomeimage(), $fluidbook->getTitle(), 2048, 10000, array(), 'R') . '");',\r
+ 'class' => 'img',\r
+ )\r
+ );\r
+ $rollover = $this->htmlElement($fluidbook->getTitle(), 'h3');\r
+ $rollover .= $this->link('Voir le fluidbook', $fluidbook->getUrl());\r
+ $res .= $this->htmlElement($this->htmlElement($rollover, 'div', array('class' => 'content')), 'div', array('class' => 'hover'));\r
+\r
$attributes = array('class' => array('reference'));\r
if ($big) {\r
$attributes['class'][] = 'big';\r
var section;\r
$('#contentWrapper > section').each(function () {\r
var offset = $(this).offset().top;\r
- if (scrollTop >= offset && scrollTop <= offset + wh - 50) {\r
+ if (scrollTop > offset - 90 && scrollTop <= offset + wh - 90) {\r
section = $(this);\r
+ return true;\r
}\r
});\r
\r
registerLoader(load_home_references, true);\r
\r
+var currentColumn = 0;\r
+var columnWidth = 0;\r
+var transition = false;\r
+var numColumn = 0;\r
+\r
function load_home_references() {\r
+ var numElement = $("section.references .links .reference").length;\r
+ var lastColumn = $("section.references .links .reference:gt(" + (numElement - 4) + ")");\r
+ var firstColumns = $("section.references .links .reference:lt(9)");\r
+\r
+\r
+ $("section.references .links .scrollHolder").prepend($(lastColumn).clone());\r
+ $("section.references .links .scrollHolder").append($(firstColumns).clone());\r
+ $("section.references .links").append('<div class="arrows"><div class="arrow left"></div><div class="arrow right"></div></div>');\r
+\r
\r
+ $(document).on('click', "section.references .links .arrows .arrow", function () {\r
+ if ($(this).hasClass('right')) {\r
+ goNextReferenceColumn();\r
+ } else {\r
+ goPreviousReferenceColumn();\r
+ }\r
+ });\r
}\r
\r
function resizeHomeReferences(ww, wh) {\r
- wh -= 90;\r
- var links = $("section.references .links");\r
- $(links).css({width: wh, height: wh});\r
+ var marginTop = 90;\r
+ var marginRight = ww * 0.05;\r
+ wh -= marginTop;\r
+ wh = Math.floor(wh / 4) * 4;\r
\r
+ var uh = wh / 2;\r
+ var uw = (ww * 0.45) / 2;\r
+\r
+\r
+ if (ww < 900) {\r
+ uw = (ww - marginRight) / 2;\r
+ uh = uw;\r
+ paddingBottom = uh * 2 + 50;\r
+ } else {\r
+ paddingBottom = '';\r
+ }\r
+\r
+\r
+ var links = $("section.references .links");\r
var i = 0;\r
- var x = 0;\r
+ var x = -uw;\r
var y = 0;\r
- var u = wh / 2;\r
+\r
+ $(links).css({width: (uw * 2) + marginRight, height: uh * 2});\r
+ $(links).find('.arrow').css({width: marginRight, fontSize: ww * 0.05});\r
+\r
+\r
$(links).find('.reference').each(function () {\r
- $(this).css({width: u, left: x, top: y});\r
- if ($(this).hasClass('big')) {\r
- y += u;\r
- } else {\r
- y += u / 2;\r
+ var h = uh;\r
+ if (!$(this).hasClass('big')) {\r
+ h = uh / 2;\r
}\r
+ $(this).css({width: uw, height: h, left: x, top: y});\r
+ y += h;\r
+\r
i++;\r
if (i % 3 == 0) {\r
y = 0;\r
- x += u;\r
+ x += uw;\r
}\r
});\r
-}
\ No newline at end of file
+ $("section.references .content-wrapper .content-inner").css({paddingBottom: paddingBottom});\r
+ columnWidth = uw;\r
+ numColumn = i / 3;\r
+}\r
+\r
+\r
+function goNextReferenceColumn() {\r
+ goReferenceColumn(currentColumn + 1);\r
+}\r
+\r
+function goPreviousReferenceColumn() {\r
+ goReferenceColumn(currentColumn - 1);\r
+}\r
+\r
+function goReferenceColumn(col) {\r
+ if (transition) {\r
+ return;\r
+ }\r
+ transition = true;\r
+\r
+ TweenLite.to($(".scrollHolder"), 0.4, {\r
+ left: col * -1 * columnWidth, onComplete: endTransition, onCompleteParams: [col],\r
+ });\r
+}\r
+\r
+function endTransition(col) {\r
+ var holder = $(".scrollHolder");\r
+ if (col == -1) {\r
+ col = numColumn - 5;\r
+ } else if (col == numColumn - 4) {\r
+ col = 0;\r
+ }\r
+ $(holder).css({left: col * -1 * columnWidth});\r
+ currentColumn = col;\r
+ transition = false;\r
+}\r
+\r
}
}
-.divider(@bottom-padding: 100px) {
+.divider(@bottom-padding: 100px,@color: #343c44) {
position: relative;
- padding-bottom: 1.4em;
+ padding-bottom: @bottom-padding;
&:after {
content: '';
left: 0;
width: 2em;
height: 1px;
- background-color: #343c44;
+ background-color: @color;
@media @m900 {
left: 50%;
position: relative;\r
.links {\r
position: absolute;\r
+ bottom: 0;\r
right: 0;\r
- top: 0;\r
height: 100%;\r
overflow: hidden;\r
\r
- .reference{\r
+ .scrollHolder {\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ }\r
+\r
+ .arrow {\r
+ position: absolute;\r
+ top: 0;\r
+ height: 100%;\r
+ background-color: rgba(255, 255, 255, 0.8);\r
+ opacity: 0;\r
+ transition: opacity @transition-time-buttons;\r
+ cursor: pointer;\r
+\r
+ @media @m900 {\r
+ width: 30px;\r
+ }\r
+\r
+ &:after {\r
+ font-family: @icons;\r
+ top: 50%;\r
+ font-size: 1em;\r
+ color: #000000;\r
+ margin-top: -0.5em;\r
+ line-height: 1em;\r
+ position: absolute;\r
+ display: block;\r
+ }\r
+\r
+ &.right {\r
+ right: 0;\r
+ &:after {\r
+ content: "f";\r
+ }\r
+ }\r
+\r
+ &.left {\r
+ left: 0;\r
+ &:after {\r
+ content: "g";\r
+ }\r
+ }\r
+\r
+ &:hover {\r
+ opacity: 1;\r
+ }\r
+ }\r
+\r
+ .arrow.right {\r
+ content: '';\r
+\r
+ }\r
+\r
+ .reference {\r
display: block;\r
position: absolute;\r
+ &:hover {\r
+ .hover {\r
+ opacity: 1;\r
+ }\r
+ }\r
+\r
+ &.big {\r
+ .hover {\r
+ padding-top: 50%;\r
+ .content {\r
+ top: -25%;\r
+ }\r
+ }\r
+ }\r
}\r
\r
- img {\r
+ .img {\r
width: 100%;\r
- height: auto;\r
+ height: 100%;\r
display: block;\r
+ background-size: cover;\r
+ background-position: 50% 50%;\r
+ }\r
+\r
+ .hover {\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ width: 100%;\r
+ height: 100%;\r
+ background-color: #18232e;\r
+ opacity: 0;\r
+ transition: opacity @transition-time-buttons;\r
+ padding-top: 25%;\r
+ text-align: center;\r
+\r
+ .content {\r
+ position: relative;\r
+ top: -50%;\r
+ }\r
+\r
+ h3 {\r
+\r
+ font-family: @playfair;\r
+ font-size: 30px;\r
+ font-weight: 400;\r
+ line-height: percentage(34/30);\r
+ color: #ffffff;\r
+ text-align: center;\r
+ .divider(1.4em, #fff);\r
+ &:after {\r
+ left: 50%;\r
+ margin-left: -1em;\r
+ }\r
+\r
+ @media @m900 {\r
+ font-size: 20px;\r
+ }\r
+\r
+ @media @m640 {\r
+ font-size: 14px;\r
+ }\r
+ }\r
+\r
+ a {\r
+ color: #F9A32E;\r
+ text-transform: uppercase;\r
+ text-decoration: none;\r
+ position: relative;\r
+ top: -0.5em;\r
+ &:hover {\r
+ text-decoration: underline;\r
+ }\r
+\r
+ @media @m900 {\r
+ font-size: 12px;\r
+ }\r
+\r
+ @media @m640 {\r
+ font-size: 10px;\r
+ }\r
+ }\r
}\r
}\r
}
\ No newline at end of file
projects / fluidbook-v3.git / commitdiff