Index: /extensions/flop_style/mainpage_categories/captify/license.txt =================================================================== --- /extensions/flop_style/mainpage_categories/captify/license.txt (revision 9818) +++ /extensions/flop_style/mainpage_categories/captify/license.txt (revision 9818) @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2008 Brian Reavis + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. Index: /extensions/flop_style/mainpage_categories/captify/captify.js =================================================================== --- /extensions/flop_style/mainpage_categories/captify/captify.js (revision 9818) +++ /extensions/flop_style/mainpage_categories/captify/captify.js (revision 9818) @@ -0,0 +1,151 @@ +// jQuery Captify Plugin +// Copyright (C) 2009 Brian Reavis +// Licenced under the MIT license +// $Date: 2009-11-30 [Mon, 30 Nov 2009] $ +jQuery.fn.extend({ + captify: function(uo) { + var o = $.extend({ + speedOver: 'fast', // speed of the mouseover effect + speedOut: 'normal', // speed of the mouseout effect + hideDelay: 500, // how long to delay the hiding of the caption after mouseout (ms) + animation: 'slide', // 'fade', 'slide', 'always-on' + prefix: '', // text/html to be placed at the beginning of every caption + opacity: '0.45', // opacity of the caption on mouse over + className: 'caption-bottom', // the name of the CSS class to apply to the caption box + position: 'bottom', // position of the caption (top or bottom) + spanWidth: '100%' // caption span % of the image + }, uo); + $(this).each(function() { + var img = this; + $(this).load(function() { + if (img.hasInit){ return false; } + img.hasInit = true; + var over_caption = false; + var over_img = false; + + //pull the label from another element if there is a + //valid element id inside the rel="..." attribute, otherwise, + //just use the text in the alt="..." attribute. + var captionLabelSrc = $('#' + $(this).attr('rel')); + var captionLabelHTML = !captionLabelSrc.length ? $(this).attr('alt') : captionLabelSrc.html(); + captionLabelSrc.remove(); + var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this); + + var wrapper = + toWrap.wrap('
').parent() + .css({ + overflow: 'hidden', + padding: 0, + fontSize: 0.1 + }) + .addClass('caption-wrapper') + .width($(this).width()) + .height($(this).height()); + + //transfer the margin and border properties from the image to the wrapper + $.map(['top', 'right', 'bottom', 'left'], function(i) { + wrapper.css('margin-' + i, $(img).css('margin-' + i)); + $.map(['style', 'width', 'color'], function(j) { + var key = 'border-' + i + '-' + j; + wrapper.css(key, $(img).css(key)); + }); + }); + $(img).css({ border: '0 none' }); + + //create two consecutive divs, one for the semi-transparent background, + //and other other for the fully-opaque label + var caption = $('div:last', wrapper.append('
')) + .addClass(o.className); + + var captionContent = $('div:last', wrapper.append('
')) + .addClass(o.className) + .append(o.prefix) + .append(captionLabelHTML); + + //override hiding from CSS, and reset all margins (which could have been inherited) + $('*', wrapper).css({ margin: 0 }).show(); + + //ensure the background is on bottom + var captionPositioning = jQuery.browser.msie ? 'static' : 'relative'; + caption.css({ + zIndex: 1, + position: captionPositioning, + opacity: o.animation == 'fade' ? 0 : o.opacity, + width: o.spanWidth + }); + + if (o.position == 'bottom'){ + var vLabelOffset = + parseInt(caption.css('border-top-width').replace('px', '')) + + parseInt(captionContent.css('padding-top').replace('px', '')) - 1; + captionContent.css('paddingTop', vLabelOffset); + } + //clear the backgrounds/borders from the label, and make it fully-opaque + captionContent.css({ + position: captionPositioning, + zIndex: 2, + background: 'none', + border: '0 none', + opacity: o.animation == 'fade' ? 0 : 1, + width: o.spanWidth + }); + caption.width(captionContent.outerWidth()); + caption.height(captionContent.height()); + + // represents caption margin positioning for hide and show states + var topBorderAdj = o.position == 'bottom' && jQuery.browser.msie ? -4 : 0; + var captionPosition = o.position == 'top' + ? { hide: -$(img).height() - caption.outerHeight() - 1, show: -$(img).height() } + : { hide: 0, show: -caption.outerHeight() + topBorderAdj }; + + //pull the label up on top of the background + captionContent.css('marginTop', -caption.outerHeight()); + caption.css('marginTop', captionPosition[o.animation == 'fade' || o.animation == 'always-on' ? 'show' : 'hide']); + + //function to push the caption out of view + var cHide = function() { + if (!over_caption && !over_img){ + var props = o.animation == 'fade' + ? { opacity: 0 } + : { marginTop: captionPosition.hide }; + caption.animate(props, o.speedOut); + if (o.animation == 'fade'){ + captionContent.animate({opacity: 0}, o.speedOver); + } + } + }; + + if (o.animation != 'always-on'){ + //when the mouse is over the image + $(this).hover( + function() { + over_img = true; + if (!over_caption) { + var props = o.animation == 'fade' + ? { opacity: o.opacity } + : { marginTop: captionPosition.show }; + caption.animate(props, o.speedOver); + if (o.animation == 'fade'){ + captionContent.animate({opacity: 1}, o.speedOver/2); + } + } + }, + function() { + over_img = false; + window.setTimeout(cHide, o.hideDelay); + } + ); + //when the mouse is over the caption on top of the image (the caption is a sibling of the image) + $('div', wrapper).hover( + function() { over_caption = true; }, + function() { over_caption = false; window.setTimeout(cHide, o.hideDelay); } + ); + } + }); + //if the image has already loaded (due to being cached), force the load function to be called + if (this.complete || this.naturalWidth > 0) { + $(img).trigger('load'); + } + }); + } +}); Index: /extensions/flop_style/mainpage_categories/captify/captify.tiny.js =================================================================== --- /extensions/flop_style/mainpage_categories/captify/captify.tiny.js (revision 9818) +++ /extensions/flop_style/mainpage_categories/captify/captify.tiny.js (revision 9818) @@ -0,0 +1,5 @@ +jQuery.fn.extend({captify:function(n){var a=$.extend({speedOver:"fast",speedOut:"normal",hideDelay:500,animation:"slide",prefix:"",opacity:"0.45",className:"caption-bottom",position:"bottom",spanWidth:"100%"},n);$(this).each(function(){var c=this;$(this).load(function(){if(c.hasInit)return false;c.hasInit=true;var i=false,k=false,e=$("#"+$(this).attr("rel")),g=!e.length?$(this).attr("alt"):e.html();e.remove();e=this.parent&&this.parent.tagName=="a"?this.parent:$(this);var h=e.wrap("
").parent().css({overflow:"hidden", +padding:0,fontSize:0.1}).addClass("caption-wrapper").width($(this).width()).height($(this).height());$.map(["top","right","bottom","left"],function(f){h.css("margin-"+f,$(c).css("margin-"+f));$.map(["style","width","color"],function(j){j="border-"+f+"-"+j;h.css(j,$(c).css(j))})});$(c).css({border:"0 none"});var b=$("div:last",h.append("
")).addClass(a.className),d=$("div:last",h.append("
")).addClass(a.className).append(a.prefix).append(g);$("*",h).css({margin:0}).show();g=jQuery.browser.msie? +"static":"relative";b.css({zIndex:1,position:g,opacity:a.animation=="fade"?0:a.opacity,width:a.spanWidth});if(a.position=="bottom"){e=parseInt(b.css("border-top-width").replace("px",""))+parseInt(d.css("padding-top").replace("px",""))-1;d.css("paddingTop",e)}d.css({position:g,zIndex:2,background:"none",border:"0 none",opacity:a.animation=="fade"?0:1,width:a.spanWidth});b.width(d.outerWidth());b.height(d.height());g=a.position=="bottom"&&jQuery.browser.msie?-4:0;var l=a.position=="top"?{hide:-$(c).height()- +b.outerHeight()-1,show:-$(c).height()}:{hide:0,show:-b.outerHeight()+g};d.css("marginTop",-b.outerHeight());b.css("marginTop",l[a.animation=="fade"||a.animation=="always-on"?"show":"hide"]);var m=function(){if(!i&&!k){var f=a.animation=="fade"?{opacity:0}:{marginTop:l.hide};b.animate(f,a.speedOut);a.animation=="fade"&&d.animate({opacity:0},a.speedOver)}};if(a.animation!="always-on"){$(this).hover(function(){k=true;if(!i){var f=a.animation=="fade"?{opacity:a.opacity}:{marginTop:l.show};b.animate(f, +a.speedOver);a.animation=="fade"&&d.animate({opacity:1},a.speedOver/2)}},function(){k=false;window.setTimeout(m,a.hideDelay)});$("div",h).hover(function(){i=true},function(){i=false;window.setTimeout(m,a.hideDelay)})}});if(this.complete||this.naturalWidth>0)$(c).trigger("load")})}}); Index: /extensions/flop_style/mainpage_categories/polaroid.css =================================================================== --- /extensions/flop_style/mainpage_categories/polaroid.css (revision 9818) +++ /extensions/flop_style/mainpage_categories/polaroid.css (revision 9818) @@ -0,0 +1,75 @@ +/* from http://www.zurb.com/playground/css3-polaroids thx ! */ +.content { + display:block; + position: relative; + z-index: 1;} +ul.polaroids { + list-style: none; + overflow: visible; + width: 100%; + padding-top: 20px; + padding-right: 0; + padding-bottom: 0; + padding-left: 0; + margin: 0px; +} +ul.polaroids li { + display: inline; +} +ul.polaroids a { + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + -moz-transform: rotate(-2deg); + background: none repeat scroll 0 0 #FFFFFF; + color: #333333; + display: inline; + float: left; + font-family: "Marker Felt",sans-serif; + font-size: 18px; + margin: 0 0 27px 30px; + padding: 10px 10px 15px; + text-align: center; + text-decoration: none; + width: auto; +} +ul.polaroids img { + display: block; + margin-bottom: 12px; + width: 190px; +} +ul.polaroids a:after { + content: attr(title); +} +ul.polaroids li:nth-child(2n) a { + -moz-transform: rotate(2deg); +} +ul.polaroids li:nth-child(3n) a { + -moz-transform: none; + position: relative; + top: -5px; +} +ul.polaroids li:nth-child(5n) a { + -moz-transform: rotate(5deg); + position: relative; + right: 5px; +} +ul.polaroids li:nth-child(8n) a { + position: relative; + right: 5px; + top: 8px; +} +ul.polaroids li:nth-child(11n) a { + left: -5px; + position: relative; + top: 3px; +} +ul.polaroids li.messy a { + -moz-transform: rotate(-5deg); + margin-left: 160px; + margin-top: -375px; +} +ul.polaroids li a:hover { + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); + -moz-transform: scale(1.25); + position: relative; + z-index: 5; +} Index: /extensions/flop_style/mainpage_categories/captify_mini.css =================================================================== --- /extensions/flop_style/mainpage_categories/captify_mini.css (revision 9818) +++ /extensions/flop_style/mainpage_categories/captify_mini.css (revision 9818) @@ -0,0 +1,109 @@ +/* caption styling */ + +.caption-top, .caption-bottom { + color: #ffffff; + padding: 1.2em; + font-weight: bold; + font-size: 13px; + font-family: arial; + cursor: default; + background: #000; + text-shadow: 1px 1px 0 #202020; +} +.caption-top { +} +.caption-bottom { +} +.caption a, .caption a { + border: 0 none; + text-decoration: none; + background: #000000; + padding: 0.3em; +} +.caption a:hover, .caption a:hover { + background: #202020; +} +.caption-wrapper { + float: left; +} +br.c { clear: both; } + + +/*catégories*/ +.content .thumbnailCategories li, .content .thumbnailCategories li:hover { background: none; +} +.wrap1 { + display: inline-block; + margin: 0 7px 5px; + text-align: center; + vertical-align: top; +} +#content .thumbnailCategories { + padding-left:auto; + padding-right:auto; + padding: 5px; + list-style: none outside none; + text-align: center; +} +#content .thumbnailCategories li { + width: auto; + float: none; + display:inline; + text-align:center; + margin-left:10px; +} + +#content div.thumbnailCategory { + text-align:center; + width:100%; + height:100%; + margin: 0; + padding: 0; + vertical-align:middle; +} + +#content div.thumbnailCategory div.illustration { + width:auto; + height:auto; +/*height:135px;*/ + text-align:center; + overflow: inherit; + float:none; + margin: 0; + padding: 0; +} +#content div.thumbnailCategory div.description { + width:auto; + height:auto; + text-align:center; + overflow:inherit; + float:none; + overflow: auto; + +} +/* --------------Hack-------------*/ +#content div.thumbnailCategory { + display: table-cell; + text-align: center; + vertical-align: middle; + width:160px; + height:205px; +} +#content div.thumbnailCategory * { + vertical-align: middle; +} +/*\*//*/ +.wraptocenter { + display: block; +} +.wraptocenter span { + display: inline-block; + height: 100%; + width: 1px; +} +/**/ +/* --------------fin Hack-------------*/ + +#content div.thumbnailCategory div.description h3 { +text-align:center; +} Index: /extensions/flop_style/mainpage_categories/polaroid.tpl =================================================================== --- /extensions/flop_style/mainpage_categories/polaroid.tpl (revision 9818) +++ /extensions/flop_style/mainpage_categories/polaroid.tpl (revision 9818) @@ -0,0 +1,12 @@ +{combine_css path="template-extension/flop_style/mainpage_categories/polaroid.css"} + + +
Index: /extensions/flop_style/mainpage_categories/captify_mini.tpl =================================================================== --- /extensions/flop_style/mainpage_categories/captify_mini.tpl (revision 9818) +++ /extensions/flop_style/mainpage_categories/captify_mini.tpl (revision 9818) @@ -0,0 +1,42 @@ +{combine_css path="template-extension/flop_style/mainpage_categories/captify_mini.css"} +{combine_script id="jquery.captify" load="header" path="template-extension/flop_style/mainpage_categories/captify/captify.tiny.js"} +{html_head} + {literal} + + {/literal} +{/html_head} + + Index: /extensions/flop_style/mainpage_categories/picpile_cat.tpl =================================================================== --- /extensions/flop_style/mainpage_categories/picpile_cat.tpl (revision 9812) +++ /extensions/flop_style/mainpage_categories/picpile_cat.tpl (revision 9818) @@ -2,7 +2,11 @@ {if $themeconf.name == "Sylvia"} {html_head} - {literal}#theCategoryPage .content { + {literal} + + {/literal} {/html_head} {/if} Index: /extensions/flop_style/thumbnails/polaroid.css =================================================================== --- /extensions/flop_style/thumbnails/polaroid.css (revision 9818) +++ /extensions/flop_style/thumbnails/polaroid.css (revision 9818) @@ -0,0 +1,75 @@ +/* from http://www.zurb.com/playground/css3-polaroids thx ! */ +.content { + display:block; + position: relative; + z-index: 1;} +ul.polaroids { + list-style: none; + overflow: visible; + width: 100%; + padding-top: 20px; + padding-right: 0; + padding-bottom: 0; + padding-left: 0; + margin: 0px; +} +ul.polaroids li { + display: inline; +} +ul.polaroids a { + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + -moz-transform: rotate(-2deg); + background: none repeat scroll 0 0 #FFFFFF; + color: #333333; + display: inline; + float: left; + font-family: "Marker Felt",sans-serif; + font-size: 18px; + margin: 0 0 27px 30px; + padding: 10px 10px 15px; + text-align: center; + text-decoration: none; + width: auto; +} +ul.polaroids img { + display: block; + margin-bottom: 12px; + width: 190px; +} +ul.polaroids a:after { + content: attr(title); +} +ul.polaroids li:nth-child(2n) a { + -moz-transform: rotate(2deg); +} +ul.polaroids li:nth-child(3n) a { + -moz-transform: none; + position: relative; + top: -5px; +} +ul.polaroids li:nth-child(5n) a { + -moz-transform: rotate(5deg); + position: relative; + right: 5px; +} +ul.polaroids li:nth-child(8n) a { + position: relative; + right: 5px; + top: 8px; +} +ul.polaroids li:nth-child(11n) a { + left: -5px; + position: relative; + top: 3px; +} +ul.polaroids li.messy a { + -moz-transform: rotate(-5deg); + margin-left: 160px; + margin-top: -375px; +} +ul.polaroids li a:hover { + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); + -moz-transform: scale(1.25); + position: relative; + z-index: 5; +} Index: /extensions/flop_style/thumbnails/polaroid.tpl =================================================================== --- /extensions/flop_style/thumbnails/polaroid.tpl (revision 9818) +++ /extensions/flop_style/thumbnails/polaroid.tpl (revision 9818) @@ -0,0 +1,9 @@ +{if !empty($thumbnails)} +{strip}{foreach from=$thumbnails item=thumbnail} +
  • + + {$thumbnail.TN_ALT} + +
    • +{/foreach}{/strip} +{/if}