From: vincent@cubedesigners.com Date: Thu, 8 Jan 2015 17:17:11 +0000 (+0000) Subject: made the home slideshow responsive X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f4d8c1b30cd2d64fcbd239177fb4c262e332886b;p=cubedesigners-v7.git made the home slideshow responsive made the menu working on home --- diff --git a/framework/application/views/helpers/HomeSlideshow.php b/framework/application/views/helpers/HomeSlideshow.php index 7cd2fc2..2072bf8 100644 --- a/framework/application/views/helpers/HomeSlideshow.php +++ b/framework/application/views/helpers/HomeSlideshow.php @@ -10,17 +10,17 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac $slides = $slides['slides']; $res = '
'; - $res.='
'; - $res.='
'; + $res .= '
'; + $res .= '
'; $s = ''; foreach ($slides as $id => $slide) { if (null !== $slide['mask']) { - $image = $this->view->imageMasked($slide['image'], $slide['mask'], $slide['legende']); + $image = $this->view->imageMasked($slide['image'], $slide['mask']); $d = CubeIT_View_Helper_Image::$lastDimensions; } else { - $image = $this->view->imageCms($slide['image'], $slide['legend']); + $image = $this->view->imageCms($slide['image']); } $offset = $d[1] - 572; @@ -34,24 +34,19 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac $attributes['class'] = 'slide'; $attributes['style'] = 'background-image:url(' . CubeIT_View_Helper_ImageCms::getPath($slide['background']) . ');'; $imgHolder = $this->view->htmlElement($image, 'div', array('class' => 'imgholder')); - $mask = $this->htmlElement($imgHolder, 'div', array('class' => 'masque', 'style' => 'top:-' . $offset . 'px;height:' . (572 + $offset) . 'px;')); + $mask = $this->htmlElement($imgHolder, 'div', array('data-overlap' => $offset, 'class' => 'masque', 'style' => 'top:-' . $offset . 'px;height:' . (572 + $offset) . 'px;')); $link = $slide['lien']; - $sl = $this->view->htmlElement($mask, 'div', $attributes); - $link['label'] = $sl; - - $s .= $this->view->linkCMS($link); + $link['label'] = $this->markupDotclear($slide['legende']); + $s .= $this->view->htmlElement($mask . $this->view->linkCMS($link), 'div', $attributes); } - $options = array('arrows' => true, - 'arrowspermanent' => true, - 'autoMode' => true, - 'transitionType' => 'slide'); - $res.=$this->htmlElement($s, 'div', array('class' => 'slides slideshow', 'data-options' => $options)); + $options = array('arrows' => true, 'arrowspermanent' => true, 'autoMode' => true, 'transitionType' => 'slide', 'baseHeight' => 572); + $res .= $this->htmlElement($s, 'div', array('class' => 'slides slideshow', 'data-options' => $options)); - $res.='
'; - $res.='
'; - $res.='
'; + $res .= ''; + $res .= ''; + $res .= ''; return $res; } diff --git a/js/slideshow.js b/js/slideshow.js index a22d4c7..946a688 100644 --- a/js/slideshow.js +++ b/js/slideshow.js @@ -6,18 +6,44 @@ function loadCarrousel() { var ww = $(window).width(); var cw = Math.min(960, ww - 70); var m = (ww - 1600) / 2; - $(s).find(".imgholder").css({marginLeft: m}); $(s).find(".arrows").css({left: cw + ((ww - cw) / 2) - 77 - 10 - 30}); - if (ww < 1024) { - var ratio = 1024 / 650; - var h = ww / ratio; + var slideshowBaseWidth = 1024; + var sw = Math.min(ww, slideshowBaseWidth); + + $(".slideshowcontinuous,.slideshow").each(function () { + var baseHeight = parseInt($(this).data('options').baseHeight); + var ratio = slideshowBaseWidth / baseHeight; + var h = sw / ratio; + var scale = h / baseHeight; + + try { - $(".slideshowcontinuous").data('slideshowContinuous').setHeight(h); + $(this).data('slideshow').setHeight(h); + + if ($(this).parents('#home-slideshow').length == 1) { + $(this).find('.slide').each(function () { + var masque = $(this).find('.masque'); + var overlap = parseInt($(masque).data('overlap')); + + var ih = (baseHeight + overlap) * scale; + $(this).find(".masque").css({ + height: ih, + top: -1 * overlap * scale + }); + + var ml = (ww - 1600 * scale) / 2; + fb(ml); + + $(this).find('.masque .imgholder').css('marginLeft', ml); + $(this).find(".masque .imgholder img").css({height: ih, width: 'auto'}); + }); + } } catch (err) { } - } + }); + }); } diff --git a/less/home.less b/less/home.less index 2e93768..7c01ddf 100644 --- a/less/home.less +++ b/less/home.less @@ -1,6 +1,6 @@ /* Home Title */ .home-title { - padding: 50px 0px 50px 0; + padding: 50px 0px 50px 0; h1 { font-weight: 300; text-align: center; @@ -13,6 +13,10 @@ } } -#header{ - height:168px !important; +#header { + min-height: 168px !important; +} + +nav.active[role="navigation"] { + padding-bottom: 50px !important; } \ No newline at end of file diff --git a/less/slideshow.less b/less/slideshow.less index bda60bc..78311b9 100644 --- a/less/slideshow.less +++ b/less/slideshow.less @@ -1,61 +1,70 @@ /* Home Slideshow */ #home-slideshow { - height:572px; - overflow:visible; - .slides-holder { - height:572px; - overflow:visible; + overflow: visible; + .slides-holder { + overflow: visible; .slides { .slideshowmixin(); + + .slide { + a { + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + opacity: 0; + } + } } } } -.slideshowscroll{ +.slideshowscroll { .slideshowmixin(); - .slidescont{ - overflow:hidden; + .slidescont { + overflow: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; } - .slidesfree{ - width:100000px; + .slidesfree { + width: 100000px; } - .slides{ + .slides { display: inline-block; overflow: visible; max-width: none; - white-space:nowrap; - position:relative; - - - .slide{ - position:static; - display:inline-block !important; - margin:0 0 0 20px; - height:439px !important; - width:auto !important; + white-space: nowrap; + position: relative; + + .slide { + position: static; + display: inline-block !important; + margin: 0 0 0 20px; + height: 439px !important; + width: auto !important; } } - height:439px; + height: 439px; } -.slideshowcontinuous{ +.slideshowcontinuous { .slideshowmixin(); - .arrows{ - a{ - background-color:rgba(56,133,224,0.25); - background-color:rgba(0,0,0,0.25); + .arrows { + a { + background-color: rgba(56, 133, 224, 0.25); + background-color: rgba(0, 0, 0, 0.25); } } - .slide{ + .slide { background-repeat: no-repeat; - background-size:cover; - background-position:50% 50% !important; + background-size: cover; + background-position: 50% 50% !important; } } @@ -64,64 +73,63 @@ padding: 25px 0 0 0; margin-right: 30px; font-size: 18px; - float:right; + float: right; } -.slideshowmixin(){ +.slideshowmixin() { - height:572px; - position:relative; - width:100%; - overflow:visible; + height: 572px; + position: relative; + width: 100%; + overflow: visible; .slide { - position:absolute; - display:none; + position: absolute; + display: none; background-repeat: repeat-x; background-position: 0 100%; - width:100%; - height:572px; - overflow:visible; - .masque{ - width:100%; + width: 100%; + height: 572px; + overflow: visible; + .masque { + width: 100%; position: relative; - overflow:hidden; - .imgholder{ - width:1600px; - height:572px; + overflow: hidden; + .imgholder { + width: 1600px; + height: 572px; position: relative; - margin:0 auto; - overflow:visible; + margin: 0 auto; + overflow: visible; - img,canvas{ + img, canvas { } } } } a { - margin:0; + margin: 0; padding: 0; } - - .arrows{ - position:absolute; - bottom:18px; - display:block; - width:77px; - height:38px; - white-space:nowrap; - z-index:3; - border:30px solid transparent; + .arrows { + position: absolute; + bottom: 18px; + display: block; + width: 77px; + height: 38px; + white-space: nowrap; + z-index: 3; + border: 30px solid transparent; a { background-color: transparent; width: 37px; height: 38px; - top:auto !important; - display:inline-block; - position:static; - border-radius:3px; + top: auto !important; + display: inline-block; + position: static; + border-radius: 3px; //padding: 0 0 25px; &:hover {