Shadowbox
Effet lightbox sur images, vidéos, swf
by mikegmz
HTML
<!---------------shadow.js-script------------->
<p>
<script src="http://ekladata.com/papyrocktest.eklablog.com/perso/shadowbox/shadowbox.js"></script>
<script>// <![CDATA[
Shadowbox.init({overlayOpacity:0.7});
// ]]></script>
<!----counterType: "skip";-----></p>
<!---------------------Ajout-script-ouverture-page------------------------------------>
<script>// <![CDATA[
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true
});
window.onload = function() {
// open a welcome message as soon as the window loads
Shadowbox.open({
content: '<div id="welcome-msg" style="border:2px solid red;color:yellow;height:325px;padding:10px;font-size: 20px; font-family: sans-serif;">Pour afficher cette fenêtre info sur votre blog, cliquer sur fermer (x) et ouvrir l\'article Shadowbox dans le menu de gauche, ci-contre.<br /><br /><p style="padding:50px 150px;"><img src="http://ekladata.com/[email protected]"> by Mike GMZ</p></div>',
player: "html",
title: "PapyrockTest",
height: 350,
width: 550
});
};
// ]]></script>
<!-------------------------CSS-ajout----------------------------------------------->
<style><!--
h2 {
padding:5px 30px;
border:2px solid rgba(31, 165, 149, 0.92);
max-width:400px;
border-radius:5px;
background-color:rgba(0, 0, 0, 0.6);
box-shadow:6px 6px 10px black;
z-index:999999;
}
#sb img {
border:4px solid white;
box-shadow:6px 6px 10px black;
margin:10px 30px;
transition: 0.5s;
}
#sb img:hover {
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
transition: 1s;
}
.swf-gallery {opacity:1;}
.swf-gallery hidden {opacity:0;}
--></style>
<!---------------html-article-------------->
<div class="code" style="min-height: 800px; padding: 20px 10px;">
<p>Enfin le script que je cherchais depuis ........ un...CSS
/*----------shadowbox----------*/
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border: 20px solid rgba(241, 197, 102, 0.63);border-radius: 20px;box-shadow: 6px 6px 10px black;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(http://ekladata.com/papyrocktest.eklablog.com/perso/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav...