(no commit message)

diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php
index 301f7f2490795bddd725516f7acd4ce7d36a1bdf..d8fe433e3d86d7cd8206e849835a82fbcd32cff5 100644 (file)
--- a/framework/application/views/helpers/RealisationsList.php
+++ b/framework/application/views/helpers/RealisationsList.php
@@ -2,84 +2,84 @@
 \r
 class Cubedesigners_View_Helper_RealisationsList extends Zend_View_Helper_Abstract {\r
 \r
-    public function RealisationsList($datas) {\r
+        public function RealisationsList($datas) {\r
 \r
-       $acl = Bootstrap::getInstance()->isAllowed("edition");\r
+                $acl = Bootstrap::getInstance()->isAllowed("edition");\r
 \r
-       $db = Zend_Db_Table::getDefaultAdapter();\r
-       $s = $db->select()->from('realisations')\r
-               ->order('id ASC');\r
-       if (!$acl) {\r
-           $s->where('online = ?', 1);\r
-       }\r
+                $db = Zend_Db_Table::getDefaultAdapter();\r
+                $s = $db->select()->from('realisations')\r
+                        ->order('id ASC');\r
+                if (!$acl) {\r
+                        $s->where('online = ?', 1);\r
+                }\r
 \r
-       $q = $s->query();\r
+                $q = $s->query();\r
 \r
-       $count = 1;\r
+                $count = 1;\r
 \r
-       $res = '';\r
+                $res = '';\r
 \r
-       $test = 0;\r
-       while ($r = $q->fetch()) {\r
+                $test = 0;\r
+                while ($r = $q->fetch()) {\r
 \r
-           $r = CubeIT_Util_Cms::unserialize($r);\r
+                        $r = CubeIT_Util_Cms::unserialize($r);\r
 \r
-           $addSpacer = false;\r
+                        $addSpacer = false;\r
 \r
-           /* if ($count == 4) {\r
-             $count = 1;\r
-             $addClass = '';\r
-             //$addSpacer = true;\r
-             } else {\r
-             $addClass = ' blocmargin';\r
-             $count++;\r
-             } */\r
+                        /* if ($count == 4) {\r
+                          $count = 1;\r
+                          $addClass = '';\r
+                          //$addSpacer = true;\r
+                          } else {\r
+                          $addClass = ' blocmargin';\r
+                          $count++;\r
+                          } */\r
 \r
-           $addClass = ' blocmargin';\r
+                        $addClass = ' blocmargin';\r
 \r
 \r
-           $addOffline = '';\r
-           if ($acl && $r->online == 0) {\r
-               $addOffline = 'data-offline="1"';\r
-           }\r
+                        $addOffline = '';\r
+                        if ($acl && $r->online == 0) {\r
+                                $addOffline = 'data-offline="1"';\r
+                        }\r
 \r
-           //$res .= '<a href="' . $url . '">';\r
+                        //$res .= '<a href="' . $url . '">';\r
 \r
-           $visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440);\r
+                        $visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440);\r
 \r
 \r
-           fb($r);\r
+                        fb($r);\r
 \r
-           $image = $this->view->imageProcess($r->visuel, $r->titre, 230, 230);\r
-           $url = CubeIT_Navigation_Page::generateAutoUri($r, $datas['seourl_rea']);\r
+                        $image = $this->view->imageProcess($r->visuel, $r->titre, 230, 230);\r
+                        $url = CubeIT_Navigation_Page::generateAutoUri($r, $datas['seourl_rea']);\r
 \r
-           $res .= '<a href="#" onclick="return false;" data-url="' . $url . '" data-id="' . $r->id . '">';\r
-           /* $res .= '<div class="detail">';\r
-             $res .= '<div class="detailLeft">';\r
-             $res .= '<div class="titre">' . $r->titre . '</div>';\r
-             $res .= '<div class="legende">' . $r->legende . '</div>';\r
-             $res .= '<div class="agence">' . $r->agence . '</div>';\r
-             $res .= '<div class="description">' . $this->view->markupDotclear($r->description) . '</div>';\r
-             $res .= '<a class="link" href="' . $r->url . '">' . __("Voir le site") . '</a>';\r
-             $res .= '</div>';\r
+                        $res .= '<a href="#" onclick="return false;" data-url="' . $url . '" data-id="' . $r->id . '">';\r
+                        /* $res .= '<div class="detail">';\r
+                          $res .= '<div class="detailLeft">';\r
+                          $res .= '<div class="titre">' . $r->titre . '</div>';\r
+                          $res .= '<div class="legende">' . $r->legende . '</div>';\r
+                          $res .= '<div class="agence">' . $r->agence . '</div>';\r
+                          $res .= '<div class="description">' . $this->view->markupDotclear($r->description) . '</div>';\r
+                          $res .= '<a class="link" href="' . $r->url . '">' . __("Voir le site") . '</a>';\r
+                          $res .= '</div>';\r
 \r
-             $res .= '<div class="detailRight"><div class="slides">' . $visuel . '</div><div class="close"></div></div>';\r
-             $res .= '</div>'; */\r
-           $res .= '<div class=" bloc' . $addClass . '" data-tags="' . $r->tags . '" data-pos="' . $count . '">';\r
-           $res .= '<div class="project-photo">' . $image . '</div>';\r
-           //$res .= '<div class="project-title" ' . $addOffline . '>' . $r->titre . '</div>';\r
-           $res .= '</div>';\r
-           $res .= '</a>';\r
-           // if ($addSpacer) {\r
-           //    $res .= '<div class="spacer"></div>';\r
-           // }\r
-           $test++;\r
+                          $res .= '<div class="detailRight"><div class="slides">' . $visuel . '</div><div class="close"></div></div>';\r
+                          $res .= '</div>'; */\r
+                        $res .= '<div class=" bloc' . $addClass . '" data-tags="' . $r->tags . '" data-pos="' . $count . '">';\r
+                        $res .= '<div class="project-photo">' . $image . '</div>';\r
+                        //$res .= '<div class="project-title" ' . $addOffline . '>' . $r->titre . '</div>';\r
+                        $res .= '</div>';\r
+                        $res .= '</a>';\r
+                        // if ($addSpacer) {\r
+                        //    $res .= '<div class="spacer"></div>';\r
+                        // }\r
+                        $test++;\r
 \r
-           $count++;\r
-       }\r
+                        $count++;\r
+                }\r
 \r
-       return $res;\r
-    }\r
+                return $res;\r
+        }\r
 \r
 }\r
 \r

diff --git a/framework/application/views/scripts/templates/realisations.phtml b/framework/application/views/scripts/templates/realisations.phtml
index b94fe856a31ab9cbde1c0a49e566a1eaad25abc9..50778aa13c70185d44aa3d0a203bf0a6efb604b6 100644 (file)
--- a/framework/application/views/scripts/templates/realisations.phtml
+++ b/framework/application/views/scripts/templates/realisations.phtml
@@ -10,8 +10,6 @@ $this->headScript()->addScriptAndStyle('realisations');
     <?php echo $this->CasestudiesTagsList($this->studies); ?>\r
 </div>\r
 \r
-\r
-\r
 <div id="realisations-list">\r
     <?php\r
     $datas = Bootstrap::getInstance()->getCMSDatasOfPage($this->id);\r

diff --git a/images/rea_close.jpg b/images/rea_close.jpg
new file mode 100644 (file)
index 0000000..d14d4a4
Binary files /dev/null and b/images/rea_close.jpg differ

diff --git a/js/common.js b/js/common.js
index 3c068e0867e18e7197b0472093abfb56a054ce2b..3e1f4c28273cea77850932ce6dad79e6ae0de30e 100644 (file)
--- a/js/common.js
+++ b/js/common.js
@@ -4,10 +4,10 @@ var colors = ["#6F216C", "#F34B0D", "#C50102", "#5DA537", "#F1D81B"];
 //turn an icon a random color\r
 $(function() {\r
     $("#header").hover(function() {\r
-        var color = colors[Math.floor(Math.random()*5)];\r
-        $(this).css('fill',color);       \r
-        },\r
-        function() {\r
-            $(this).css('fill','black');\r
-            })\r
+    var color = colors[Math.floor(Math.random()*5)];\r
+    $(this).css('fill',color);       \r
+    },\r
+    function() {\r
+       $(this).css('fill','black');\r
+       })\r
 });\r

diff --git a/js/realisations.js b/js/realisations.js
index 56a7d86fae5d8c2efbd313c2520d95ae10711845..b0fcb78eaac8ce41e72f20c44a690d17b23a1a3e 100644 (file)
--- a/js/realisations.js
+++ b/js/realisations.js
@@ -5,13 +5,14 @@ var isAnim = false;
 var currentOpen = 0;\r
 var currentOpenValues;\r
 var detail = "";\r
-var switchTimer;\r
 var currentSlide = 1;\r
-var autoSlide = true;\r
+var autoSlide = false;\r
+var totalWidth;\r
+var lastWidth;\r
 \r
 function load_realisations() {\r
     //initTagsLink();\r
-\r
+    \r
      $(".bloc").click( function () {\r
         \r
         var currentRea = $(this).attr("data-pos");\r
@@ -42,9 +43,7 @@ function load_realisations() {
            }\r
 \r
            detail = "";\r
-           \r
-\r
-           //$.ajax();\r
+          \r
             $.ajax({\r
                url             : '/ajax/displayrealisation',\r
                type    : 'GET',\r
@@ -56,52 +55,80 @@ function load_realisations() {
                    \r
                    currentOpenValues = rea;\r
                    \r
-                   detail += '<div id="detail">';\r
+                   detail += '<div id="detailContent"><div id="detail">';\r
                    detail += '<div class="detailLeft">';\r
                    detail += '<div class="titre">'+rea.titre+'</div>';\r
-                   detail += '<div class="legende">'+rea.legende+'</div>';\r
-                   detail += '<div class="agence">Agence : '+rea.agence+'</div>';\r
+                    \r
+                    if( rea.legende != '') {\r
+                         detail += '<div class="legende">'+rea.legende+'</div>';\r
+                    }\r
+                    \r
+                    if( rea.agence != '') {\r
+                         detail += '<div class="agence">Agence : '+rea.agence+'</div>';\r
+                    }\r
+                    \r
                    detail += '<div class="description">'+rea.description+'</div>';\r
                    detail += '<a class="link" href="'+rea.url+'">Voir le site</a>';\r
                    detail += '</div>';\r
+                   detail += '<div class="detailRight"><div class="slides"><ul>';\r
                    \r
-                   var image=new Image();\r
-                   image.src=rea.visuel_detail[0];\r
-                   \r
-                   detail += '<div class="detailRight"><div class="slides"><img id="visuel_detail" src="'+rea.visuel_detail[0]+'" /></div><div class="close"></div></div>';\r
-                   detail += '</div>';\r
+                   totalWidth = 0;\r
+                   for( var i=0; i<rea.visuel_detail.length; i++) {\r
+                       \r
+                       var image=new Image();\r
+                       image.src=rea.visuel_detail[i];\r
+                       totalWidth += image.width;\r
+                       \r
+                       if( i == ( rea.visuel_detail.length-1 ) ) {\r
+                           lastWidth = image.width;\r
+                       }\r
+                       \r
+                       detail += '<li><img id="visuel_detail" src="'+rea.visuel_detail[i]+'" /></li>';\r
+                   }\r
                    \r
-                   preloadSlides();\r
+                   detail += '</ul></div></div>';\r
+                   detail += '</div><div class="close"></div></div>';\r
                    \r
-                   $(".bloc").find('.project-photo').removeClass("gray");\r
-\r
                    if( $( "#detail" ).length > 0) {\r
-                       $( "#detail" ).slideUp( "slow", function() {\r
-                           $('#detail').remove();\r
+                       $( "#detail" ).slideUp( 500, function() {\r
+                                \r
+                           $('#detailContent').remove();\r
+                            \r
                            $(cible.parent()).before(detail);\r
+                           \r
+                           $("html, body").animate({ scrollTop: $('#detailContent').offset().top-100 }, 1000);\r
+                           $('.close').css("top", $('#detailContent').offset().top);\r
+                            \r
+                            \r
                            $( "#detail" ).slideDown( "slow", function() {\r
                                isAnim = false;\r
                                addCloseAction();\r
                                currentSlide = 1;\r
                                autoSlide = true;\r
-                               switchTimer = window.setTimeout( nextSlide, 5000);\r
+                                initSlideShow();\r
+                           \r
                            }).animate(\r
-                               { opacity: 1 },\r
+                               { opacity: 1  },\r
                                { queue: false, duration: 'slow' }\r
                              );\r
-\r
+                      \r
                        }).animate(\r
-                           { opacity: 0 },\r
+                           { opacity: 1 },\r
                            { queue: false, duration: 'slow' }\r
                          );\r
                    }else{\r
                        $(cible.parent()).before(detail);\r
+                       \r
+                       $("html, body").animate({ scrollTop: $('#detailContent').offset().top-100 }, 1000);\r
+                       $('.close').css("top", $('#detailContent').offset().top);\r
+                        \r
                        $( "#detail" ).slideDown( "slow", function() {\r
+                           \r
                            isAnim = false;\r
                            addCloseAction();\r
                            currentSlide = 1;\r
                            autoSlide = true;\r
-                           switchTimer = window.setTimeout( nextSlide, 5000);\r
+                           initSlideShow();\r
                        }).animate(\r
                            { opacity: 1 },\r
                            { queue: false, duration: 'slow' }\r
@@ -112,7 +139,9 @@ function load_realisations() {
                        var id = $(this).parent().attr("data-pos");\r
                        if( id != currentRea ) {\r
                            $(this).addClass("gray");\r
-                       }\r
+                       }else{\r
+                            $(this).removeClass("gray");\r
+                        }\r
                    });\r
                        }\r
                        \r
@@ -120,20 +149,22 @@ function load_realisations() {
 \r
            \r
         }\r
+        \r
         currentOpen = currentRea;\r
     }); \r
 }\r
 \r
 function addCloseAction() {\r
     $(".close").click(function() {\r
+        $("html, body").animate({ scrollTop: 0 }, 1000);\r
        $( "#detail" ).slideUp( "slow", function() {\r
-              $('#detail').remove();\r
+              $('#detailContent').remove();\r
               currentOpen = 0;\r
               $(".project-photo").each( function() {\r
                   $(this).removeClass("gray");\r
               });\r
           }).animate(\r
-           { opacity: 0 },\r
+           { opacity: 1 },\r
            { queue: false, duration: 'slow' }\r
          );\r
     });\r
@@ -158,66 +189,54 @@ function initTagsLink() {
             $(".tag:first").addClass('active');\r
         }\r
         \r
-        //displayStudies();\r
-        //alert(showIds);\r
     });\r
     \r
 }\r
 \r
-\r
-function preloadSlides() {\r
-    /*\r
-    var i=0;\r
+function initSlideShow() {\r
     \r
-    $('.slide[data-image]').each(function(){\r
-            var slide=this;\r
-            var image=new Image();\r
-            image.src=$(this).attr('data-image');\r
-           \r
-            if(image.complete){\r
-                    $(this).html("<a href='" + $(this).attr('data-link') + "'><img src='" + $(this).attr('data-image') + "' /></a>");\r
-            }\r
-            \r
-            $(image).load(function(){\r
-                    $(slide).html("<a href='" + $(slide).attr('data-link') + "'><img src='" + $(slide).attr('data-image') + "' /></a>");\r
-            });\r
-            \r
-            i++;\r
-    });*/\r
-}\r
+    var mouse_move=false;\r
+    function move(e) {\r
+       if(mouse_move) {\r
+           if(document.documentElement.clientWidth>0) {\r
+\r
+                     position = e.pageX-document.documentElement.scrollLeft;\r
+            } else {\r
+                     position = e.pageX-document.body.scrollLeft;\r
+            }\r
+       }\r
+    }\r
+    document.onmousemove=move;\r
 \r
-function nextSlide() {\r
-    \r
-    var maxSlides = currentOpenValues.visuel_detail.length;\r
-    if(maxSlides == 1) autoSlide = false;\r
-       \r
-    if( autoSlide ) {\r
+    $(".slides").mouseover(function(e){\r
 \r
-       if( currentSlide < maxSlides ) {\r
-           currentSlide++;\r
-       }else{\r
-           currentSlide=1;\r
-       }\r
+       mouse_move = true;\r
+       le_div = '.' + 'slides';\r
 \r
-       $( "#visuel_detail" ).fadeOut( "slow", function() {\r
-           $("#visuel_detail").attr("src", currentOpenValues.visuel_detail[currentSlide-1]);\r
-           $( "#visuel_detail" ).fadeIn();\r
-       });\r
+       if($(le_div + " ul li").length > 1){\r
 \r
-       switchTimer = window.setTimeout( nextSlide, 5000);\r
-    }\r
-}\r
+           var total_lenght = totalWidth;\r
 \r
-function displayRealisation( rea ) {\r
-    \r
-    //$(rea);\r
-    \r
-    var url = $(rea).attr("data-url");\r
-    \r
-    \r
-}\r
+           var t= setInterval(function(){\r
 \r
-function resize() {\r
-    \r
-}\r
+               var offset = $(le_div).offset();\r
+\r
+               if((position - offset.left) < ($("#detailContent").width()/2) ){\r
+                       if($(le_div + " ul").css('marginLeft').replace("px", "") > - (total_lenght - lastWidth)){\r
+                               $(le_div + " ul").animate({marginLeft:"-=2px"},0);\r
+                       }\r
+               }else{\r
+                       if($(le_div + " ul").css('marginLeft').replace("px", "") <= 0){\r
+                               $(le_div + " ul").animate({marginLeft:"+=2px"},0);\r
+                       }\r
+               }\r
+           },5);\r
 \r
+           $(le_div).mouseout(function(){\r
+                   clearInterval(t);\r
+                   mouse_move=false;\r
+           });\r
+       }\r
+    });\r
+       \r
+}
\ No newline at end of file

diff --git a/less/realisations.less b/less/realisations.less
index 6c702475400f69033513bbd86db72b61af83e23d..c1a8648ccf04ea065c27b905ed608850f5b028b2 100644 (file)
--- a/less/realisations.less
+++ b/less/realisations.less
@@ -4,11 +4,10 @@
     margin: 0 auto;
     padding: 0 0 20px 0;
     
-    
     ul {
     list-style: none;
     }
-
+    
     li {
         font-size: 14px;
         color: #6f6f6f;
@@ -40,11 +39,12 @@
     max-width: 980px;
     margin: 0 auto;
     padding: 0 0 50px 0;
-    overflow: hidden;
+   // overflow: hidden;
     
     .bloc {    
         width:230px;
-        float:left;
+        //float:left;
+       display:inline-block;
     }
     
     a,a:hover {    
@@ -64,10 +64,21 @@
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
-        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
+       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
+
     }
     
+    .bloc  {
+       filter: grayscale(0%);
+       -webkit-filter: grayscale(0%);
+       -moz-filter: grayscale(0%);
+       -o-filter: grayscale(0%);
+       -ms-filter: grayscale(0%);
+       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
+        //filter: none; /* IE6-9 */
+        transition: all 500ms;
+    }
     
     
     .bloc .project-title {
@@ -91,15 +102,39 @@
        clear: both;
        display:none;
        margin-bottom: 15px;
-       opacity: 0;
-       filter:alpha(opacity=0);
-       -moz-opacity:0;
+       width:10000px;
+       white-space: nowrap;
     }
     
+    #detailContent {
+       overflow: visible;
+       width: 100%;
+       height: auto;
+        
+        .close {
+               position:absolute;
+               right: 0;
+               //top: 0;
+               background-image: url('../images/rea_close.jpg');
+               width: 62px;
+               height: 62px;
+               cursor: pointer;
+           }
+    }
+    
+    
     #detail .detailLeft {
-       float:left;
-       width:250px;
+       vertical-align: top;
+        display:inline-block;
+       width:230px;
+       min-width: 230px;
+       max-width: 230px;
        padding-right:15px;
+        white-space: normal;
+       
+       div {
+           max-width: 220px;
+       }
        
        .titre {
            font-size: 32px;
@@ -137,24 +172,37 @@
        }
     
     #detail .detailRight {
-       //float:left;
-       position: absolute;
-       right: 0;
+       display:inline-block;
+       vertical-align:top;
+       //position: absolute;
+       //right: 0;
+       
+       
+       
        
        .slides {
            overflow: hidden;
-           width: 1000px;
+           width: 10000px;
        }
        
-       .close {
-           position:absolute;
-           right: 0;
-           top: 0;
-           background-image: url('../images/rea_close.jpg');
-           width: 62px;
-           height: 62px;
-           cursor: pointer;
+       
+       .slides ul{
+               position:relative;
+               list-style-type:none;
+               margin: 0px;
+               padding: 0px;
+               width:9999px;
        }
+
+       .slides li{
+               padding:0px;
+               margin:0px;
+               list-style:none;
+               display: inline-block;
+       }
+       
+       
+       
        
     }