A voir également:
- Créer coverflow avec jquery
- Créer un compte gmail - Guide
- Créer un compte google - Guide
- Créer un groupe whatsapp - Guide
- Créer un compte instagram - Guide
- Créer liste déroulante excel - Guide
2 réponses
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
17 sept. 2017 à 08:44
17 sept. 2017 à 08:44
Bonjour
Commence par nous poster ton code.
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
.
Commence par nous poster ton code.
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
.
Bonjour Jordane 45,
Ca risque de faire beaucoup de codes... je ne mettrai pas les css et js vue que je sais comment les installer. Je mettrai tous les autres:
fichier php:
fichier json (j'ai pas trouvé dans la liste pour inséré les codes... j'l'ai donc inséré en js):
de même un fichier json avec tous les noms de mes images.
un fichier jquery fs boxer min en js:
et un fichier jquery fs min en css:
et enfin il y a le dossier comprenant toutes les images.
J'espère vraiment que vous saurez m'aider
Merci d'avance
zoro
Ca risque de faire beaucoup de codes... je ne mettrai pas les css et js vue que je sais comment les installer. Je mettrai tous les autres:
fichier php:
<?php
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
file_put_contents('../../index.html', stripslashes($_POST['indexhtml']));
file_put_contents('../css/style.css', stripslashes($_POST['stylecss']));
}
if(! is_writable('../../index.html')) printf('index.html file is not writable<br>');
if(! is_writable('../css/style.css')) printf('style.css file is not writable<br>');
?>
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Content Generator</title>
<style>
body {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 18px;
max-width: 1200px;
margin: 0 auto;
}
textarea {
width: 80%;
height: 400px;
margin: 0 auto;
}
#savebutton {
width: 160px;
height: 60px;
background: #51c4d4;
color: #fff;
font-size: 20px;
border: none;
cursor: pointer;
}
h3 {
font-weight: normal;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<h3>The contents below are generated based on <strong>settings.json</strong> and <strong>images.json</strong> files.<br><br>Click the <strong>"Save files"</strong> button to automatically save the contents to the indicated files.<h3>
<input type="submit" value="Save files" id="savebutton">
<h2>INDEX.HTML</h2>
<textarea id="indexhtml" name="indexhtml"></textarea>
<h2>STYLE.CSS</h2>
<textarea id="stylecss" name="stylecss"></textarea>
</form>
<script>
;(function($){
$.getJSON('settings.json', function(settings) {
$.getJSON('images.json', function(images) {
var useLightbox = false;
var indexHTML ='<!DOCTYPE HTML>' +
'\n<html>'+
'\n<head>'+
'\n\t<meta charset=utf-8>'+
'\n\t<title>Coverflow<\/title>'+
'\n\t<link rel="stylesheet" href="'+settings.Global.path+'css/style.css">'+
'\n<\/head>'+
'\n<body>'+
'\n<div id="coverflow">'+
'\n\t<div class="covers">'+
'\n\t\t<ul>';
$.each(images.Images, function() {
indexHTML +=
'\n\t\t<li><div class="imgdiv">'+
'\n\t\t\t<a'+
((this.link !=="" && this.link !== undefined && this.target !== "none")?' href="'+
((this.link.substr(0,7) ==='http://' || this.link.substr(0,8) ==='https://')?'':settings.Global.path)+
this.link+'"':'')+
((this.target === "lightbox")?' data-gallery="gallery"':'')+
((this.target ==="_blank" || this.target === "_self")?' target="'+this.target+'"':'')+
((this.lightboxCaption !== "" && this.lightboxCaption)? ' data-cap="'+this.lightboxCaption+'"':'')+
'>'+
'\n\t\t\t\t<img src="'+
((this.imageURL.substr(0,7)==='http://' || this.imageURL.substr(0,8)==='https://')?'':settings.Global.path)+
this.imageURL +'" alt="">'+
'\n\t\t\t</a>'+
'\n\t\t\t</div>'+
'\n\t\t\t<div class="text">\n\t\t\t\t'+
this.text+
'\n\t\t\t</div>'+
'\n\t\t</li>';
if (!useLightbox && this.target === "lightbox") useLightbox = true;
});
indexHTML += '\n\t\t</ul>'+
'\n\t</div>'+
((settings.Controller.controller) ? '\n\t<div class="Controller"></div>': '')+
((settings.Scrollbar.scrollbar) ? '\n\t<div class="ScrollBar"></div>' : '')+
'\n</div>'+
'\n\n<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"><\/script>'+
'\n<script src="'+settings.Global.path+'js/coverflow.min.js"><\/script>'+
'\n<script> $coverflow = $("#coverflow").coverflow({"path":"'+settings.Global.path+'"}); <\/script>'+
'\n\n<\/body>'+
'\n<\/html>';
$('#indexhtml').text(indexHTML);
var startID = Math.round(images.Images.length/2),
ulX = (settings.Global.coverflowWidth/2-settings.Global.imageWidth/2-((startID-1)*settings.Global.imageSpacing));
/////////////////////////
/////// STYLE.CSS ///////
/////////////////////////
var styleCSS =
'#coverflow {\n\t'+
'max-width: '+ settings.Global.coverflowWidth +'px;\n\t'+
'height: '+ settings.Global.coverflowHeight +'px;\n\t'+
((settings.Global.backgroundColor !== '')?'background: '+settings.Global.backgroundColor +';\n\t':'')+
'position: relative;\n\t'+
'margin: 0 auto;\n\t'+
'-moz-user-select: none;\n\t'+
'-webkit-user-select: none;\n\t'+
'-ms-user-select: none;\n\t'+
'user-select: none;'+
( (settings.Global.bindMouseWheel == true) ? '\n\toverflow: hidden;' :'' ) +
( (settings.Global.bindArrowKeys == true) ? '\n\toutline: solid 0px;' :'' ) +
'\n}\n\n'+
'.covers {\n\twidth: 100%;\n\theight: 100%;\n\tmargin: 0 auto;\n\toverflow: hidden;\n\tposition: absolute;\n}\n\n'+
'#coverflow ul {\n\t'+
'top: '+ (settings.Global.imageHeight*(settings.Global.frontImageScaleRatio/100 - 1)/2) +'px;\n\t'+
'width: 5000px;\n\t'+
'margin: 0;\n\t'+
'padding: 0;\n\t'+
'position: absolute;\n\t'+
'-webkit-transition: -webkit-transform '+ settings.Global.transitionDuration/1000 +'s '+settings.Global.transitionFunction+';\n\t'+
'transition: transform '+ settings.Global.transitionDuration/1000 +'s '+settings.Global.transitionFunction+';\n\t'+
'-webkit-transform: translate3d('+ ulX +'px, 0, 0);\n\t'+
'transform: translate3d('+ ulX +'px, 0, 0);\n'+
'}\n\n'+
'#coverflow li {\n\t'+
'width: '+settings.Global.imageSpacing+'px;\n\t'+
'list-style: none;\n\t'+
'float: left;\n\t'+
'-webkit-transition: margin '+settings.Global.transitionDuration/1000+'s '+settings.Global.transitionFunction+', -webkit-transform '+settings.Global.transitionDuration/1000+'s '+settings.Global.transitionFunction+';\n\t'+
'transition: margin '+settings.Global.transitionDuration/1000+'s '+settings.Global.transitionFunction+', transform '+settings.Global.transitionDuration/1000+'s '+settings.Global.transitionFunction+';\n\t'+
'position: relative;\n\t'+
'pointer-events: none;\n\t'+
'}\n\n'+
'#coverflow .imgdiv {\n\t'+
'width: '+settings.Global.imageWidth+'px;\n\t'+
'-webkit-transition: -webkit-transform '+settings.Global.transitionDuration/1000+'s '+settings.Global.transitionFunction+';\n\t'+
'transition: transform '+settings.Global.transitionDuration/1000+'s '+settings.Global.transitionFunction+';\n\t'+
'pointer-events: auto;\n\t'+
'position: relative;\n\t'+
'display: block;\n\t'+
(
(settings.Shadow.imageShadows == true)
? 'box-shadow: '+ settings.Shadow.shadowSize +'px 5px 15px -10px rgba(0,0,0,'+ settings.Shadow.shadowOpacity/100 +'),'
+ ' -'+ settings.Shadow.shadowSize +'px 5px 15px -10px rgba(0,0,0,'+ settings.Shadow.shadowOpacity/100 +');\n'
: ""
)
+'}\n\n'+
'#coverflow .imgdiv img {\n\t'+
'width: '+ settings.Global.imageWidth +'px;\n\t'+
'display: block;\n'+
'}\n\n'+
(
(settings.Reflection.reflection == true)
? '#coverflow .refl {\n\t'+
'display: block;\n\t'+
'position: absolute;\n\t'+
'top: 100%;\n\t'+
'-webkit-transform: scaleY(-1);\n\t'+
'transform: scaleY(-1);\n\t'+
'opacity: '+settings.Reflection.reflectionOpacity/100+';\n'+
'}\n\n'+
'#coverflow .refl img {\n\t'+
'display: block;\n'+
'}\n\n'+
'#coverflow .refl::before {\n\t'+
'content: "";\n\t'+
'position: absolute;\n\t'+
'width: 102%;\n\t'+
'margin-left: -1%;\n\t'+
'height: 100%;\n\t'+
'box-shadow: inset '+ settings.Reflection.reflectionColor +' 0 '+ settings.Global.imageWidth*(100-settings.Reflection.reflectionSize)/100 +'px '+ settings.Reflection.reflectionSpread + 'px;\n'+
'}\n\n'
: '#coverflow .refl {\n\t'+
'display: none;\n'+
'}\n\n'
)
+'#coverflow .text {\n\t'+
'position: absolute;\n\t'+
(
((settings.Text.fontPosition === 'bottom')?
'bottom: '+(-settings.Global.imageHeight*(settings.Global.frontImageScaleRatio/100 -1)/2)+'px;\n\t'+
'top: auto;\n\t':'')+
((settings.Text.fontPosition === 'top')?
'top: '+(-settings.Global.imageHeight*(settings.Global.frontImageScaleRatio/100 -1)/2)+'px;\n\t'+
'bottom: auto;\n\t':'')+
((settings.Text.fontPosition !== 'bottom' && settings.Text.fontPosition !== 'top')?
'bottom: auto;\n\t'+
'top: '+settings.Text.fontMarginTop+'px;\n\t':'')
)+
'-moz-box-sizing: border-box;\n\t'+
'box-sizing: border-box;\n\t'+
'-webkit-transition: opacity '+settings.Global.transitionDuration/1000+'s;\n\t'+
'transition: opacity '+settings.Global.transitionDuration/1000+'s;\n\t'+
'opacity: 0;\n\t'+
'visibility: hidden;\n\t'+
'pointer-events: auto;\n\t'+
'background: '+settings.Text.fontBackColor+';\n\t'+
(
(settings.Text.fontWidth === 'auto')?
'width: '+(settings.Global.imageWidth*settings.Global.frontImageScaleRatio/100)+'px;\n\t'+
'margin-left: '+(-settings.Global.imageWidth*(settings.Global.frontImageScaleRatio/100 - 1)/2)+'px;\n\t'
:
'width: '+settings.Text.fontWidth+'px;\n\t'+
'margin-left: '+((settings.Global.imageWidth-settings.Text.fontWidth)/2)+'px;\n\t'
)+
'color: '+settings.Text.fontColor+';\n\t'+
'font-family: '+settings.Text.fontFamily+',Helvetica, sans-serif;\n\t'+
'font-size: '+settings.Text.fontSize+'px;\n'+
'}\n\n'+
'#coverflow .text p {\n\t'+
'margin: 5px;\n\t'+
'position: relative;\n\t'+
'text-align: center;\n'+
'}\n\n'+
'li:nth-child(-n+'+(startID-1)+') .imgdiv,\n'+
'#coverflow ul li .leftItems {\n\t'+
'-webkit-transform: perspective('+settings.Global.imagePerspective+'px) rotateY('+settings.Global.imageRotation+'deg);\n\t'+
'transform: perspective('+settings.Global.imagePerspective+'px) rotateY('+settings.Global.imageRotation+'deg);\n'+
'}\n\n'+
'li:nth-child(n+'+(startID+1)+') .imgdiv,\n'+
'#coverflow ul li .rightItems {\n\t'+
'-webkit-transform: perspective('+settings.Global.imagePerspective+'px) rotateY(-'+settings.Global.imageRotation+'deg);\n\t'+
'transform: perspective('+settings.Global.imagePerspective+'px) rotateY(-'+settings.Global.imageRotation+'deg);\n'+
'}\n\n'+
'li:nth-child('+startID+') .imgdiv,\n'+
'#coverflow ul li .straight {\n\t'+
'-webkit-transform: rotateY(0deg) scale('+settings.Global.frontImageScaleRatio/100+');\n\t'+
'transform: rotateY(0deg) scale('+settings.Global.frontImageScaleRatio/100+');\n'+
'}\n\n'+
'#coverflow li:nth-child(-n+'+(startID-1)+'),\n'+
'#coverflow ul li.leftLI {\n\t'+
'-webkit-transform: translate3d(-'+settings.Global.frontImageSpacing+'px, 0, 0);\n\t'+
'transform: translate3d(-'+settings.Global.frontImageSpacing+'px, 0, 0);\n'+
'}\n\n'+
'#coverflow li:nth-child(n+'+(startID+1)+'),\n'+
'#coverflow ul li.rightLI {\n\t'+
'-webkit-transform: translate3d('+settings.Global.frontImageSpacing+'px, 0, 0);\n\t'+
'transform: translate3d('+settings.Global.frontImageSpacing+'px, 0, 0);\n'+
'}\n\n'+
'#coverflow ul .straightLI {\n\t'+
'-webkit-transform: translate3d(0, 0, 0);\n\t'+
'transform: translate3d(0, 0, 0);\n'+
'}\n\n'+
'.notransition {\n\t'+
'-webkit-transition: none !important;\n\t'+
'transition: none !important;\n'+
'}\n\n'+
'#coverflow .imgdiv a,\n'+
'#coverflow .text {\n\t'+
'cursor: pointer;\n'+
(
(settings.Global.mouseCursor === "grab")
? '\t/*grab cursor available for all browsers except IE (we can use external .cur file but uses too much CPU)*/\n\t'+
'cursor: -webkit-grab;\n\t'+
'cursor: grab;\n'
: ''
)
+'}\n\n' +
'#coverflow .Preloader {\n\t'+
'/*none - autoplay:false ; block - autoplay:true*/\n\t'+
(
(settings.Controller.autoPlay == true)
? 'display: block;\n'
: 'display: none;\n'
)
+'}\n\n'+
'#coverflow .Lightbox {\n\t'+
(
(useLightbox)
? 'display: block;\n'
: 'display: none;\n'
)
+'}';
/////////////////////////
///// CONTROLLER.CSS ////
/////////////////////////
if (settings.Controller.controller) {
styleCSS +=
'\n\n.Controller { z-index: 10000; position: absolute; left: 50%; margin-top: '+settings.Controller.controllerMarginTop+'px; }\n'+
'#relativediv { position: relative; left: -50%; }\n'+
'.Controller img { margin-right: 3px; position: relative; opacity: .6; cursor: pointer; }\n'+
'.Controller img:hover { opacity: 1; }\n'+
'#prev {'+ (settings.Controller.arrows?'-webkit-transform: scaleX(-1); transform: scaleX(-1);':'display: none')+'}\n'+
(settings.Controller.arrows?'':'#next {display: none}\n')+
'#play { position: relative; }\n'+
'#pause-span { visibility: hidden; position: relative; }\n'+
'#pause { position: absolute; right: 100%; }\n'+
'.Preloader {\n\t'+
'position: absolute;\n\t'+
'width: 30px;\n\t'+
'height: 30px;\n\t'+
'margin-left: '+settings.Controller.preloaderMarginLeft+'%;\n\t'+
'margin-top: '+settings.Controller.preloaderMarginTop+'%;\n\t'+
'background-color: #aaa;\n\t'+
'border: 3px solid #333;\n\t'+
'-webkit-border-radius: 100%;\n\t'+
'border-radius: 100%;\n\t'+
'z-index: 9999;\n\t'+
'opacity: 0;\n\t'+
'visibility: hidden;\n\t'+
'-webkit-transition: -webkit-transform '+settings.Controller.pauseDelay/1000+'s ease-in-out,\n\t\t'+
'opacity '+settings.Controller.pauseDelay/1000+'s ease-in-out;\n\t'+
'transition: transform '+settings.Controller.pauseDelay/1000+'s ease-in-out,\n\t\t'+
'opacity '+settings.Controller.pauseDelay/1000+'s ease-in-out;\n'+
'}\n'+
'.modified { opacity: 1; -webkit-transform: scale(0); transform: scale(0); }';
};
/////////////////////////
//// SCROLLBAR.CSS //////
/////////////////////////
if(settings.Scrollbar.scrollbar) {
styleCSS +=
'\n\n.ScrollBar {\n\t'+
'width: '+settings.Scrollbar.scrollbarWidth+'px;\n\t'+
'height: '+settings.Scrollbar.scrollbarHeight+'px;\n\t'+
'cursor: pointer;\n\t'+
'position: absolute;\n\t'+
'z-index: 10000;\n\t'+
'margin-left: auto;\n\t'+
'margin-right: auto;\n\t'+
'left: 0;\n\t'+
'right: 0;\n\t'+
'margin-top:'+settings.Scrollbar.marginTop+'px;\n\t'+
'overflow: hidden;\n'+
'}\n\n'+
'.ScrollBar .firstArrow,\n'+
'.ScrollBar .lastArrow{\n\t'+
'display: '+((settings.Scrollbar.arrows)?'block':'none')+';\n\t'+
'width: '+settings.Scrollbar.scrollbarHeight+'px;\n\t'+
'height: '+settings.Scrollbar.scrollbarHeight+'px;\n\t'+
'background: '+settings.Scrollbar.thumbColor+';\n\t'+
'float: left;\n\t'+
'border-radius: '+settings.Scrollbar.borderRadius+'px;\n'+
'}\n\n'+
'.ScrollBar .firstTriangle,\n'+
'.ScrollBar .lastTriangle {\n\t'+
'margin-top: '+Math.round(settings.Scrollbar.scrollbarHeight/3)+'px;\n\t'+
'margin-left: '+(settings.Scrollbar.scrollbarHeight*.35)+'px;\n\t'+
'width: 0;\n\t'+
'height: 0;\n\t'+
'border-top: 4px solid transparent;\n\t'+ //here not?
'border-bottom: 4px solid transparent;\n'+ //and here
'}\n\n'+
'.ScrollBar .firstTriangle { border-right: 5px solid #777; }\n'+
'.ScrollBar .lastTriangle { border-left: 5px solid #777; }\n\n'+
'.ScrollBar .dragArea {\n\t'+
'width: '+
((settings.Scrollbar.arrows)?settings.Scrollbar.scrollbarWidth - 2*settings.Scrollbar.scrollbarHeight
: settings.Scrollbar.scrollbarWidth
)
+'px;\n\t'+
'height: '+settings.Scrollbar.scrollbarHeight+'px;\n\t'+
'background: '+settings.Scrollbar.scrollBackColor+';\n\t'+
'float: left;\n\t'+
'border-radius: '+settings.Scrollbar.borderRadius+'px;\n'+
'}\n\n'+
'.ScrollBar .tracker {\n\t'+
'width: '+ ((settings.Scrollbar.thumbWidth === "auto")?0:settings.Scrollbar.thumbWidth) +'px;\n\t'+
'height: '+(settings.Scrollbar.scrollbarHeight - 4)+'px;\n\t'+
'background: '+settings.Scrollbar.thumbColor+';\n\t'+
'margin: 2px;\n\t'+
'border-radius: '+settings.Scrollbar.borderRadius+'px;\n\t'+
'float: left;\n\t'+
'left: 0;\n\t'+
'z-index: 1000;\n\t'+
'transition: left '+settings.Global.transitionDuration/1000+'s;\n'+
'}';
};
$('#stylecss').html(styleCSS);
});
}).error(function() {$('body').html("<br><br>It seems that you're accessing this page from a local folder in your computer. Please run it from your web server.<br>The address you should have in your browser should be similar with<br><b><span style='text-decoration:underline'>http://</span>www.yourdomain.com/coverflow/config/index.html</b><br>instead of<br><b>"+document.URL+"</b>")} );
})(jQuery);
</script>
</body>
</html>
fichier json (j'ai pas trouvé dans la liste pour inséré les codes... j'l'ai donc inséré en js):
{
"Global": {
"path": "coverflow",
"coverflowWidth": "1100",
"coverflowHeight": "470",
"backgroundColor": "",
"imageWidth": "290",
"imageHeight": "310",
"imageSpacing": "104",
"frontImageSpacing": "145",
"imageRotation": "65",
"imagePerspective": "600",
"frontImageScaleRatio": "150",
"bindMouseWheel": true,
"bindArrowKeys": true,
"mouseCursor": "grab",
"transitionDuration": "600",
"transitionFunction": "linear"
},
"Reflection": {
"reflection": true,
"reflectionColor": "#ffffff",
"reflectionSize": "33",
"reflectionSpread": "40",
"reflectionOpacity": "50"
},
"Scrollbar": {
"scrollbar": true,
"scrollbarWidth": "790",
"scrollbarHeight": "13",
"thumbWidth": "auto",
"scrollBackColor": "rgba(100, 100, 100, 0.3)",
"thumbColor": "#f2f2f2",
"borderRadius": "12",
"arrows": false,
"marginTop": "360"
},
"Shadow": {
"imageShadows": true,
"shadowSize": "30",
"shadowOpacity": "15"
},
"Controller": {
"controller": true,
"arrows": true,
"autoPlay": false,
"pauseDelay": "3500",
"controllerSkin": "light",
"controllerMarginTop": "390",
"preloaderMarginTop": "1",
"preloaderMarginLeft": "64"
},
"Text": {
"fontFamily": "Verdana",
"fontSize": "18",
"fontColor": "#ffffff",
"fontBackColor": "rgba(0, 0, 0, 0.3)",
"fontPosition": "bottom",
"fontMarginTop": "100",
"fontWidth": "auto"
}
}
de même un fichier json avec tous les noms de mes images.
un fichier jquery fs boxer min en js:
!function(a,b){"use strict";function c(b){return L.formatter=j,I=a("body"),G=F(),H=G!==!1,H||(G="transitionend.boxer"),a(this).addClass("boxed"),a(this).on("click.boxer",a.extend({},L,b||{}),d)}function d(c){var d=a(this),f=c.data.$object,g=d[0].attributes?d.attr("href")||"":"",i=g.toLowerCase().split(".").pop().split(/\#|\?/),j=i[0],l="",m="image"===l||a.inArray(j,c.data.extensions)>-1||"data:image"===g.substr(0,10),o=g.indexOf("youtube.com/embed")>-1||g.indexOf("player.vimeo.com/video")>-1,p="url"===l||!m&&!o&&"http"===g.substr(0,4),w="element"===l||!m&&!o&&!p&&"#"===g.substr(0,1),x="undefined"!=typeof f;if("undefined"!=typeof b.history.pushState&&(history.pushState(null,"","#box"),b.onhashchange=function(){""==b.location.hash&&e(c,!0)}),!(a("#boxer").length>1)&&(m||o||p||w||x)){if(C(c),J=a.extend({},{$window:a(b),$body:a("body"),$target:d,$object:f,visible:!1,resizeTimer:null,touchTimer:null,gallery:{active:!1},isMobile:K||c.data.mobile,isAnimating:!0,oldContentHeight:0,oldContentWidth:0},c.data),J.margin*=2,J.containerHeight=J.height,J.containerWidth=J.width,J.type=m?"image":o?"video":"element",m||o){var y=J.$target.data("gallery")||J.$target.attr("rel");"undefined"!=typeof y&&y!==!1&&(J.gallery.active=!0,J.gallery.id=y,J.gallery.$items=a("a[data-gallery= "+J.gallery.id+"], a[rel= "+J.gallery.id+"]"),J.gallery.index=J.gallery.$items.index(J.$target),J.gallery.total=J.gallery.$items.length-1)}var z="";return J.isMobile||(z+='<div id="boxer-overlay" class="'+J.customClass+'"></div>'),z+='<div id="boxer" class="loading animating '+J.customClass,J.isMobile&&(z+=" mobile"),p&&(z+=" iframe"),(w||x)&&(z+=" inline"),z+='"',J.fixed===!0&&(z+=' style="position: fixed;"'),z+=">",z+='<span class="boxer-close">'+J.labels.close+"</span>",z+='<div class="boxer-container" style="',z+=J.isMobile?"height: 100%; width: 100%":"height: "+J.height+"px; width: "+J.width+"px",z+='">',z+='<div class="boxer-content">',(m||o)&&(z+='<div class="boxer-meta">',J.gallery.active?(z+='<div class="boxer-control previous">'+J.labels.previous+"</div>",z+='<div class="boxer-control next">'+J.labels.next+"</div>",z+='<p class="boxer-position"',J.gallery.total<1&&(z+=' style="display: none;"'),z+=">",z+='<span class="current">'+(J.gallery.index+1)+"</span> "+J.labels.count+' <span class="total">'+(J.gallery.total+1)+"</span>",z+="</p>",z+='<div class="boxer-caption gallery">'):z+='<div class="boxer-caption">',z+=J.formatter.apply(J.$body,[J.$target]),z+="</div></div>"),z+="</div></div></div>",J.$body.append(z),J.$overlay=a("#boxer-overlay"),J.$boxer=a("#boxer"),J.$container=J.$boxer.find(".boxer-container"),J.$content=J.$boxer.find(".boxer-content"),J.$meta=J.$boxer.find(".boxer-meta"),J.$position=J.$boxer.find(".boxer-position"),J.$caption=J.$boxer.find(".boxer-caption"),J.$controls=J.$boxer.find(".boxer-control"),J.paddingVertical=parseInt(J.$boxer.css("paddingTop"),10)+parseInt(J.$boxer.css("paddingBottom"),10),J.paddingHorizontal=parseInt(J.$boxer.css("paddingLeft"),10)+parseInt(J.$boxer.css("paddingRight"),10),h(),J.gallery.active&&r(),J.$window.on("resize.boxer",M.resize).on("keydown.boxer",s),J.$body.on("touchstart.boxer click.boxer","#boxer-overlay, #boxer .boxer-close",e).on("touchmove.boxer",C),J.gallery.active&&J.$boxer.on("touchstart.boxer click.boxer",".boxer-control",q),J.$boxer.on(G,function(b){C(b),a(b.target).is(J.$boxer)&&(J.$boxer.off(G),m?k(g):o?n(g):p?u(g):w?t(g):x?v(J.$object):a.error("BOXER: '"+g+"' is not valid."))}),I.addClass("boxer-open"),H||J.$boxer.trigger(G),x?J.$boxer:void 0}}function e(c,d){C(c),d||"undefined"==typeof b.history.pushState||b.history.back(),"undefined"!=typeof J.$boxer&&(J.$boxer.on(G,function(b){C(b),a(b.target).is(J.$boxer)&&(J.$boxer.off(G),J.$overlay.remove(),J.$boxer.remove(),J={})}).addClass("animating"),I.removeClass("boxer-open"),H||J.$boxer.trigger(G),E(J.resizeTimer),J.$window.off("resize.boxer").off("keydown.boxer"),J.$body.off(".boxer").removeClass("boxer-open"),J.gallery.active&&J.$boxer.off(".boxer"),J.isMobile&&"image"===J.type&&J.gallery.active&&J.$container.off(".boxer"),J.$window.trigger("close.boxer"))}function f(){{var b=i(),c=0;J.isMobile?0:J.duration}J.isMobile||(c=J.$controls.outerHeight(),J.$controls.css({marginTop:(J.contentHeight-c)/2})),!J.visible&&J.isMobile&&J.gallery.active&&J.$content.on("touchstart.boxer",".boxer-image",y),(J.isMobile||J.fixed)&&J.$body.addClass("boxer-open"),J.$boxer.css({left:b.left,top:b.top}),J.$container.on(G,function(b){C(b),a(b.target).is(J.$container)&&(J.$container.off(G),J.$content.on(G,function(b){C(b),a(b.target).is(J.$content)&&(J.$content.off(G),J.$boxer.removeClass("animating"),J.isAnimating=!1)}),J.$boxer.removeClass("loading"),H||J.$content.trigger(G),J.visible=!0,J.callback.apply(J.$boxer),J.$window.trigger("open.boxer"),J.gallery.active&&p())}).css({height:J.containerHeight,width:J.containerWidth});var d=J.oldContentHeight!==J.contentHeight||J.oldContentWidth!==J.contentWidth;!J.isMobile&&H&&d||J.$container.trigger(G),J.oldContentHeight=J.contentHeight,J.oldContentWidth=J.contentWidth}function g(a){if(a=a||!1,J.visible){var b=i(),c=0;J.isMobile||(c=J.$controls.outerHeight(),J.$controls.css({marginTop:(J.contentHeight-c)/2})),J.$boxer.css({left:b.left,top:b.top}),J.$container.css({height:J.containerHeight,width:J.containerWidth})}}function h(){var a=i();J.$boxer.css({left:a.left,top:a.top})}function i(){if(J.isMobile)return{left:0,top:0};var a={left:(J.$window.width()-J.containerWidth-J.paddingHorizontal)/2,top:J.top<=0?(J.$window.height()-J.containerHeight-J.paddingVertical)/2:J.top};return J.fixed!==!0&&(a.top+=J.$window.scrollTop()),a}function j(a){var b=a.attr("data-cap");return""!==b&&void 0!==b?'<p class="caption">'+b+"</p>":""}function k(b){J.$image=a("<img />"),J.$image.one("load.boxer",function(){var a=B(J.$image);J.naturalHeight=a.naturalHeight,J.naturalWidth=a.naturalWidth,J.retina&&(J.naturalHeight/=2,J.naturalWidth/=2),J.$content.prepend(J.$image),""===J.$caption.html()?J.$caption.hide():J.$caption.show(),l(),f()}).attr("src",b).addClass("boxer-image"),(J.$image[0].complete||4===J.$image[0].readyState)&&J.$image.trigger("load")}function l(){var a=0;for(J.windowHeight=J.viewportHeight=J.$window.height(),J.windowWidth=J.viewportWidth=J.$window.width(),J.containerHeight=1/0,J.contentHeight=0,J.containerWidth=1/0,J.contentWidth=0,J.imageMarginTop=0,J.imageMarginLeft=0;J.containerHeight>J.viewportHeight&&2>a;)J.imageHeight=0===a?J.naturalHeight:J.$image.outerHeight(),J.imageWidth=0===a?J.naturalWidth:J.$image.outerWidth(),J.metaHeight=0===a?0:J.metaHeight,0===a&&(J.ratioHorizontal=J.imageHeight/J.imageWidth,J.ratioVertical=J.imageWidth/J.imageHeight,J.isWide=J.imageWidth>J.imageHeight),J.imageHeight<J.minHeight&&(J.minHeight=J.imageHeight),J.imageWidth<J.minWidth&&(J.minWidth=J.imageWidth),J.isMobile?(J.$meta.css({width:J.windowWidth}),J.metaHeight=J.$meta.outerHeight(!0),J.contentHeight=J.viewportHeight,J.contentWidth=J.viewportWidth,J.containerHeight=J.viewportHeight-J.paddingVertical,J.containerWidth=J.viewportWidth-J.paddingHorizontal,m(),J.imageMarginTop=(J.containerHeight-J.targetImageHeight-J.metaHeight)/2,J.imageMarginLeft=(J.containerWidth-J.targetImageWidth)/2):(0===a&&(J.viewportHeight-=J.margin+J.paddingVertical,J.viewportWidth-=J.margin+J.paddingHorizontal),J.viewportHeight-=J.metaHeight,m(),J.containerHeight=J.contentHeight=J.targetImageHeight,J.containerWidth=J.contentWidth=J.targetImageWidth),J.$content.css({height:J.isMobile?J.contentHeight:"auto",width:J.contentWidth}),J.$meta.css({width:J.contentWidth}),J.$image.css({height:J.targetImageHeight,width:J.targetImageWidth,marginTop:J.imageMarginTop,marginLeft:J.imageMarginLeft}),J.isMobile||(J.metaHeight=J.$meta.outerHeight(!0),J.containerHeight+=J.metaHeight),a++}function m(){var a=J.isMobile?J.containerHeight-J.metaHeight:J.viewportHeight,b=J.isMobile?J.containerWidth:J.viewportWidth;J.isWide?(J.targetImageWidth=b,J.targetImageHeight=J.targetImageWidth*J.ratioHorizontal,J.targetImageHeight>a&&(J.targetImageHeight=a,J.targetImageWidth=J.targetImageHeight*J.ratioVertical)):(J.targetImageHeight=a,J.targetImageWidth=J.targetImageHeight*J.ratioVertical,J.targetImageWidth>b&&(J.targetImageWidth=b,J.targetImageHeight=J.targetImageWidth*J.ratioHorizontal)),(J.targetImageWidth>J.imageWidth||J.targetImageHeight>J.imageHeight)&&(J.targetImageHeight=J.imageHeight,J.targetImageWidth=J.imageWidth),(J.targetImageWidth<J.minWidth||J.targetImageHeight<J.minHeight)&&(J.targetImageWidth<J.minWidth?(J.targetImageWidth=J.minWidth,J.targetImageHeight=J.targetImageWidth*J.ratioHorizontal):(J.targetImageHeight=J.minHeight,J.targetImageWidth=J.targetImageHeight*J.ratioVertical))}function n(b){J.$videoWrapper=a('<div class="boxer-video-wrapper" />'),J.$video=a('<iframe class="boxer-video" seamless="seamless" />'),J.$video.attr("src",b).addClass("boxer-video").prependTo(J.$videoWrapper),J.$content.prepend(J.$videoWrapper),o(),f()}function o(){J.windowHeight=J.viewportHeight=J.contentHeight=J.$window.height()-J.paddingVertical,J.windowWidth=J.viewportWidth=J.contentWidth=J.$window.width()-J.paddingHorizontal,J.videoMarginTop=0,J.videoMarginLeft=0,J.isMobile?(J.$meta.css({width:J.windowWidth}),J.metaHeight=J.$meta.outerHeight(!0),J.viewportHeight-=J.metaHeight,J.targetVideoWidth=J.viewportWidth,J.targetVideoHeight=J.targetVideoWidth*J.videoRatio,J.targetVideoHeight>J.viewportHeight&&(J.targetVideoHeight=J.viewportHeight,J.targetVideoWidth=J.targetVideoHeight/J.videoRatio),J.videoMarginTop=(J.viewportHeight-J.targetVideoHeight)/2,J.videoMarginLeft=(J.viewportWidth-J.targetVideoWidth)/2):(J.viewportHeight=J.windowHeight-J.margin,J.viewportWidth=J.windowWidth-J.margin,J.targetVideoWidth=J.videoWidth>J.viewportWidth?J.viewportWidth:J.videoWidth,J.targetVideoWidth<J.minWidth&&(J.targetVideoWidth=J.minWidth),J.targetVideoHeight=J.targetVideoWidth*J.videoRatio,J.contentHeight=J.targetVideoHeight,J.contentWidth=J.targetVideoWidth),J.$content.css({height:J.isMobile?J.contentHeight:"auto",width:J.contentWidth}),J.$meta.css({width:J.contentWidth}),J.$videoWrapper.css({height:J.targetVideoHeight,width:J.targetVideoWidth,marginTop:J.videoMarginTop,marginLeft:J.videoMarginLeft}),J.containerHeight=J.contentHeight,J.containerWidth=J.contentWidth,J.isMobile||(J.metaHeight=J.$meta.outerHeight(!0),J.containerHeight=J.targetVideoHeight+J.metaHeight)}function p(){var b="";J.gallery.index>0&&(b=J.gallery.$items.eq(J.gallery.index-1).attr("href"),b.indexOf("youtube.com/embed")<0&&b.indexOf("player.vimeo.com/video")<0&&a('<img src="'+b+'">')),J.gallery.index<J.gallery.total&&(b=J.gallery.$items.eq(J.gallery.index+1).attr("href"),b.indexOf("youtube.com/embed")<0&&b.indexOf("player.vimeo.com/video")<0&&a('<img src="'+b+'">'))}function q(b){C(b);var c=a(this);J.isAnimating||c.hasClass("disabled")||(J.isAnimating=!0,J.gallery.index+=c.hasClass("next")?1:-1,J.gallery.index>J.gallery.total&&(J.gallery.index=J.gallery.total),J.gallery.index<0&&(J.gallery.index=0),J.$content.on(G,function(b){if(C(b),a(b.target).is(J.$content)){J.$content.off(G),"undefined"!=typeof J.$image&&J.$image.remove(),"undefined"!=typeof J.$videoWrapper&&J.$videoWrapper.remove(),J.$target=J.gallery.$items.eq(J.gallery.index),J.$caption.html(J.formatter.apply(J.$body,[J.$target])),J.$position.find(".current").html(J.gallery.index+1);var c=J.$target.attr("href"),d=c.indexOf("youtube.com/embed")>-1||c.indexOf("player.vimeo.com/video")>-1;d?n(c):k(c),r()}}),J.$boxer.addClass("loading animating"),H||J.$content.trigger(G))}function r(){J.$controls.removeClass("disabled"),0===J.gallery.index&&J.$controls.filter(".previous").addClass("disabled"),J.gallery.index===J.gallery.total&&J.$controls.filter(".next").addClass("disabled")}function s(a){!J.gallery.active||37!==a.keyCode&&39!==a.keyCode?27===a.keyCode&&J.$boxer.find(".boxer-close").trigger("click"):(C(a),J.$controls.filter(37===a.keyCode?".previous":".next").trigger("click"))}function t(b){var c=a(b).find(">:first-child").clone();v(c)}function u(b){b+=b.indexOf("?")>-1?"&"+L.requestKey+"=true":"?"+L.requestKey+"=true";var c=a('<iframe class="boxer-iframe" src="'+b+'" />');v(c)}function v(a){J.$content.append(a),w(a),f()}function w(a){J.windowHeight=J.$window.height()-J.paddingVertical,J.windowWidth=J.$window.width()-J.paddingHorizontal,J.objectHeight=a.outerHeight(!0),J.objectWidth=a.outerWidth(!0),J.targetHeight=J.targetHeight||J.$target.data("boxer-height"),J.targetWidth=J.targetWidth||J.$target.data("boxer-width"),J.maxHeight=J.windowHeight<0?L.minHeight:J.windowHeight,J.isIframe=a.is("iframe"),J.objectMarginTop=0,J.objectMarginLeft=0,J.isMobile||(J.windowHeight-=J.margin,J.windowWidth-=J.margin),J.contentHeight=void 0!==J.targetHeight?J.targetHeight:J.isIframe||J.isMobile?J.windowHeight:J.objectHeight,J.contentWidth=void 0!==J.targetWidth?J.targetWidth:J.isIframe||J.isMobile?J.windowWidth:J.objectWidth,J.isIframe&&J.isMobile&&(J.contentHeight=J.windowHeight,J.contentWidth=J.windowWidth),x(J)}function x(a){a.containerHeight=a.contentHeight,a.containerWidth=a.contentWidth,a.$content.css({height:a.contentHeight,width:a.contentWidth})}function y(a){if(C(a),E(J.touchTimer),!J.isAnimating){var b="undefined"!=typeof a.originalEvent.targetTouches?a.originalEvent.targetTouches[0]:null;J.xStart=b?b.pageX:a.clientX,J.leftPosition=0,J.touchMax=1/0,J.touchMin=-1/0,J.edge=.25*J.contentWidth,0===J.gallery.index&&(J.touchMax=0),J.gallery.index===J.gallery.total&&(J.touchMin=0),J.$boxer.on("touchmove.boxer",z).one("touchend.boxer",A)}}function z(a){var b="undefined"!=typeof a.originalEvent.targetTouches?a.originalEvent.targetTouches[0]:null;J.delta=J.xStart-(b?b.pageX:a.clientX),J.delta>20&&C(a),J.canSwipe=!0;var c=-J.delta;c<J.touchMin&&(c=J.touchMin,J.canSwipe=!1),c>J.touchMax&&(c=J.touchMax,J.canSwipe=!1),J.$image.css({transform:"translate3D("+c+"px,0,0)"}),J.touchTimer=D(J.touchTimer,300,function(){A(a)})}function A(a){C(a),E(J.touchTimer),J.$boxer.off("touchmove.boxer touchend.boxer"),J.delta&&(J.$boxer.addClass("animated"),J.swipe=!1,J.canSwipe&&(J.delta>J.edge||J.delta<-J.edge)?(J.swipe=!0,J.$image.css(J.delta<=J.leftPosition?{transform:"translate3D("+J.contentWidth+"px,0,0)"}:{transform:"translate3D("+-J.contentWidth+"px,0,0)"})):J.$image.css({transform:"translate3D(0,0,0)"}),J.swipe&&J.$controls.filter(J.delta<=J.leftPosition?".previous":".next").trigger("click"),D(J.resetTimer,J.duration,function(){J.$boxer.removeClass("animated")}))}function B(a){var b=a[0],c=new Image;return"undefined"!=typeof b.naturalHeight?{naturalHeight:b.naturalHeight,naturalWidth:b.naturalWidth}:"img"===b.tagName.toLowerCase()?(c.src=b.src,{naturalHeight:c.height,naturalWidth:c.width}):!1}function C(a){a.preventDefault&&(a.stopPropagation(),a.preventDefault())}function D(a,b,c){return E(a),setTimeout(c,b)}function E(a){a&&(clearTimeout(a),a=null)}function F(){var a={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",transition:"transitionend"},b=document.createElement("div");for(var c in a)if(a.hasOwnProperty(c)&&c in b.style)return a[c];return!1}var G,H,I=null,J={},K=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(b.navigator.userAgent||b.navigator.vendor||b.opera),L={callback:a.noop,customClass:"",extensions:["jpg","sjpg","jpeg","png","gif"],fixed:!1,formatter:a.noop,height:100,labels:{close:"Close",count:"of",next:"Next",previous:"Previous"},margin:50,minHeight:100,minWidth:100,mobile:!1,opacity:.75,retina:!1,requestKey:"boxer",top:0,videoRatio:.5625,videoWidth:600,width:100},M={close:function(){"undefined"!=typeof J.$boxer&&(J.$boxer.off(".boxer"),J.$overlay.trigger("click"))},defaults:function(b){return L=a.extend(L,b||{}),a(this)},destroy:function(){return a(this).removeClass("boxed"),a(this).off(".boxer")},resize:function(b){return"undefined"!=typeof J.$boxer&&("object"!=typeof b&&(J.targetHeight=arguments[0],J.targetWidth=arguments[1]),"element"===J.type?w(J.$content.find(">:first-child")):"image"===J.type?l():"video"===J.type&&o(),g()),a(this)}};a.fn.boxer=function(a){return M[a]?M[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?this:c.apply(this,arguments)},a.boxer=function(c,e){return M[c]?M[c].apply(b,Array.prototype.slice.call(arguments,1)):c instanceof a?d.apply(b,[{data:a.extend({$object:c},L,e||{})}]):void 0}}(jQuery,window);
et un fichier jquery fs min en css:
.boxer-lock{overflow:hidden!important}#boxer-overlay{-webkit-transition:opacity .25s linear;transition:opacity .25s linear}#boxer *{-webkit-transition:none;transition:none}#boxer.animating{-webkit-transition:left .25s ease,opacity .25s linear,top .25s ease;transition:left .25s ease,opacity .25s linear,top .25s ease}#boxer.animating .boxer-container{-webkit-transition:height .25s ease,width .25s ease;transition:height .25s ease,width .25s ease}#boxer.animating .boxer-content{-webkit-transition:opacity .25s linear;transition:opacity .25s linear}#boxer-overlay{background:#000;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:100005}#boxer{background:#fff;border-radius:3px;box-shadow:0 0 25px #000;opacity:0;padding:10px;position:absolute;z-index:100005;font-family:'Open Sans',Helvetica,Arial,sans-serif}#boxer.inline{padding:30px}.boxer-open #boxer-overlay{opacity:.75}.boxer-open #boxer,.boxer-open #boxer .boxer-content{opacity:1}.boxer-open #boxer.loading .boxer-content{opacity:0}#boxer .boxer-close,#boxer .boxer-control{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABQCAYAAACZM2JkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAABR0RVh0Q3JlYXRpb24gVGltZQA5LzMvMTIU8Q8YAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAA5ZJREFUeJztm81t20AQRp+C3O0SjJ1rAKkBIyzBqSA++Z4OUkKu8smuIO4gNNwABeQ6C7sDuQLmwBVAG2ZkicvRypgHEKAESpz9sJjZv2/Wti27MpvNdv7NR+bq6uoGWADV9fX1On13CtRAs1wuL2cu9DiSyN/TxxVQpfsamKf728+mUX1MFr37OfCQ7r/0n/lkF8+HpaLryRu+8FLkFVB56shAyscPvBQY4C9wvlwu196jjfAePZLe6GI+8MgKqLxHj6fmpch/07VhDtQu9Hia3v0KOE9Xv0A2njoy4BOWQmjbFk8dRkwidAjhLITQbH/ShhBCE0I4O2QM2YUOIVzQFYih4c4hmANNiu0gZBU6hPAL+A2c5PzfTJwAv1OM5mQphiGENwftMcYiqmYI4XUjV0AVY1xbvD9LMQwhVMAjZaWKbcyBxxS7CaOEDiH8BP5QZqrYxgnwJ7VhcvZKHSJyCtwBX//3XMGp4zX3wMVUqaRtW/Zd+H/kOHvxEF/p2nQ61Qv2TR0XwHPOQA7MM12bJmMvoWOMNd3OwlPOYA7EE90IpJ7yJXsXwxhjQ7eQstr2bMGsgEVqy6SMGnXEGNcxxgVwmykeS25jjAursXSWmWGM8RL4keO/jPiRYjYj2xQ8xvgL+EbZRfIZ+JZiNSXrWkeM8Y5yi+Sm6N0d4uXZV+8KLZJmRW8I32ExwHdYDPGzdxkIIdyQNmc3w8Xe0nED+ObsWJLIfprUAD9NakSFnya1IeXjwdOkquqnSa3wHj2SoY3pHn6aNBM1fprUBD9NasW2CYuq7jdhcXbHU4cRLrQRLrQRLrQRLrQRLrQRLrQRLrQRLrQRLrQRLrQVbdvufG1DVc9UtRifoao2qnp2yBiy92hVLdZnmGI7CFmFVtXifYYpRnOyrEer6pvbOSJSxMK1qr7pMxQRk7PRkKFHq2rFkfoMU+wmjBJaVX9y5D7D1IbJ2St1xBjf5TMsOHW85h64mDKVuM+ww32GRpTpMxSRmnItFLvyRDcCqad8yd7FUERKtFDsygpYpLZMyqhRh4isReRofYYisrAaS2eZGYrIJUfmM0wxm5FtCi4iR+MzTLGaknWtQ0SK9xmmGM3JvnpXaJE0K3pD+CFHI3yHxQh3ZWVAVW9Ix3Y3w8Xe0nEjIu4zHEsS2X2GBrjP0IgK9xnakPLxoM9QRNxnaIX36JEMbUz3cJ9hJmrcZ2iC+wyteM+E5R9csMW4DOpJbAAAAABJRU5ErkJggg==)}#boxer .boxer-close{background-color:#fff;background-repeat:no-repeat;background-position:-70px 10px;border-radius:100%;cursor:pointer;display:block;height:30px;position:absolute;padding:0;right:-8px;top:-8px;width:30px;text-indent:-99999px;z-index:100006}#boxer .boxer-container{background:#fff;height:100%;overflow:hidden;position:relative;width:100%;z-index:100005;zoom:1}#boxer .boxer-content{background:#fff;opacity:0;overflow:hidden;padding:0;width:10000px}#boxer .boxer-image{float:left}#boxer .boxer-video{height:100%;width:100%}#boxer .boxer-iframe{border:none;float:left;height:100%;overflow:auto;width:100%}#boxer .boxer-meta{clear:both}#boxer .boxer-control{background-color:#fff;background-repeat:no-repeat;background-position:0 0;border-radius:100%;box-shadow:0 0 6px rgba(0,0,0,.4);cursor:pointer;display:block;height:40px;margin-right:auto;margin-left:auto;position:absolute;text-indent:-99999px;top:0;width:40px;-webkit-transition:opacity .25s linear;transition:opacity .25s linear}#boxer .boxer-control.previous{left:20px}#boxer .boxer-control.next{background-position:-40px 0;right:20px}#boxer .boxer-control.disabled{opacity:.3}#boxer .boxer-position{color:#999;font-size:11px;margin:0;padding:15px 10px 5px}#boxer .boxer-caption p{margin:0;padding:15px 10px 10px}#boxer .boxer-caption.gallery p{padding-top:0}#boxer.loading .boxer-container{background:#fff url(data:image/gif;base64,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) no-repeat center}#boxer.mobile{background:#000;border-radius:0;height:100%;left:0;padding:30px 0 0;position:fixed;top:0;width:100%}#boxer.mobile .boxer-close{background-color:#000;background-position:-70px -60px;border-radius:0;right:0;top:0}#boxer.mobile .boxer-container{background:#000;position:relative}#boxer.mobile .boxer-content{background-color:#000}#boxer.mobile .boxer-control{background-color:transparent;border-radius:0;box-shadow:none;margin:-20px 0 0;top:50%}#boxer.mobile .boxer-control.previous{background-position:0 -40px;float:left;left:0}#boxer.mobile .boxer-control.next{background-position:-40px -40px;float:right;right:0}#boxer.mobile .boxer-control.disabled{opacity:.3}#boxer.mobile .boxer-meta{bottom:0;background-color:rgba(0,0,0,.75);left:0;padding:15px 50px 10px;position:absolute;width:100%}#boxer.mobile .boxer-position{padding:0}#boxer.mobile .boxer-caption p{color:#eee;padding:10px 0 0}#boxer.mobile .boxer-image{-webkit-transition:none!important;transition:none!important;-webkit-transform:translate(0px,0);-ms-transform:translate(0px,0);transform:translate(0px,0)}#boxer.mobile.animated .boxer-image{-webkit-transition:-webkit-transform .25s ease-out!important;transition:transform .25s ease-out!important}#boxer.mobile.loading .boxer-container{background:#000 url(data:image/gif;base64,R0lGODlhEAAQAPQAAAAAAJmZmQgICEVFRRISEm5ubk9PT5mZmWNjY4ODgzExMSYmJoyMjDs7O5aWlnh4eFpaWgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==) no-repeat center}#boxer.mobile.iframe .boxer-content,#boxer.mobile.inline .boxer-content{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width:980px){#boxer .boxer-close:hover{background-position:-70px -20px}#boxer .boxer-control,#boxer .boxer-control.disabled{opacity:0}#boxer .boxer-content:hover .boxer-control{opacity:.75}#boxer .boxer-content:hover .boxer-control:hover{opacity:1}#boxer .boxer-content:hover .boxer-control.disabled{opacity:.3;cursor:default!important}#boxer.mobile .boxer-control{opacity:1!important}#boxer.mobile .boxer-control.disabled{opacity:.3!important}}@media screen and (max-width:980px){#boxer.mobile{position:fixed}}
et enfin il y a le dossier comprenant toutes les images.
J'espère vraiment que vous saurez m'aider
Merci d'avance
zoro
