FERMER LE MENU


Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Wifeo Creative Code


<<< back to homepage for others creatives tricks

AMAZING DESIGN SIMPLE LIGHTBOX

IMAGE MACHIN FAUX LOGIT MERUM
Le Lorem Ipsum est simplement du faux texte.

Previous Next
 
 
 
 
 
 
 
 
 
 
 
 
AMAZING LIGHTBOX
BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :
<p data-height="360" data-theme-id="9277" data-slug-hash="LEdXoe" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/LEdXoe'>Codepen</a> <script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/59-amazing-design-simple-lightbox.html">wifeo/code</a></div>
On Facebook
On Twitter
On Google+
On LinkedIn

CSS CODE :

.prestitre
{
  padding:5px;
  color:#999999;
  font-weight:300;
  font-size:30px;
  font-family:'Roboto';
  padding-top:20px;
}
#conteneur_grande_image
{
  width:800px;
  height:600px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}
.bigdiap
{
  display: none;
  z-index:90001;
  background-color:rgba(231,231,231,0.8);
  width:100%; 
  height:100%; 
  position:fixed;
  font-family:'Roboto';
  top:0; left:0;
}
.mindiap
{
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #666666;
  display: inline-block;
  vertical-align: top;
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
.mindiap .mask
{
  background-color: rgba(0,0,0,0.7);
  width: 100px;
  position: absolute;
  height: 0px;
  bottom: 0px;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -ms-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.mindiap:hover .mask
{
  background-image: url(http:YOUR-URL-IMAGE.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.7);
  width: 100px;
  height: 100px;
}
.info_image
{
  position:absolute;
  width: 310px;
  z-index:1000;
  top: 0px; bottom: 0px;
  right: 0px;
  padding: 20px;
  text-align: left;
  background-color: #ffffff;
}
.btn_close_popup
{
  width: 30px;
  height:30px;
  background-color: #666666;
  position: absolute;
  top: 0px;
  right: 350px;
}

JAVASCRIPT CODE :

$(document).ready(function(){
  $(".mindiap").click(function()
    {    
		var idimage = $(this).attr("idimage");
   	   $(".bigdiap").fadeIn(600);   
	   $("#conteneur_grande_image").css("background-image", "url(http:YOUR-URL-IMAGE.jpg)");
	   $("#diapo_en_cours").val(idimage);
  });
  
  $(".diapo_suivante").click(function()
    {  
		var diapo_en_cours = parseInt($("#diapo_en_cours").val());
		var diapo_max = parseInt($("#diapo_max").val());
		
		if((diapo_en_cours+1)>diapo_max)
		{
			$("#diapo_en_cours").val(1);
			 $("#conteneur_grande_image").css("background-image", "url(http:YOUR-URL-IMAGE.jpg)");
		}
		else
		{
			$("#diapo_en_cours").val(diapo_en_cours+1);
			$("#conteneur_grande_image").css("background-image","url(http:YOUR-URL-IMAGE.jpg)");
		}
   	   
  });
  
    $(".diapo_precedente").click(function()
    {  
		var diapo_en_cours = parseInt($("#diapo_en_cours").val());
		var diapo_max = parseInt($("#diapo_max").val());
		
		if((diapo_en_cours-1)<1)
		{
			$("#diapo_en_cours").val(diapo_max);
			 $("#conteneur_grande_image").css("background-image", "url(http:YOUR-URL-IMAGE.jpg)");
		}
		else
		{
			$("#diapo_en_cours").val(diapo_en_cours-1);
			$("#conteneur_grande_image").css("background-image", "url(http:YOUR-URL-IMAGE.jpg)");
		}
   	   
  });
  
  
  $(".btn_close_popup").click(function()
    {  
      $(".bigdiap").fadeOut(600);
    });
});

HTML CODE :

<input type="hidden" value="" id="diapo_en_cours" />
<input type="hidden" value="12" id="diapo_max" />


<div align="center" style="background-color:#ffffff; min-height:400px;">

<div class="bigdiap">
  <div style="padding-right:350px; position:relative; height:100%;">
    <div class="btn_close_popup"><img src="http:YOUR-URL-IMAGE.png"></div>
    <div style="width:800px;height:600px; padding-top:30px;">
      <div id="conteneur_grande_image"></div></div>
    <div class="info_image">
      <div style="color:#999999; font-size:20px; padding:50px 0px;">IMAGE MACHIN FAUX LOGIT MERUM</div>
      <div style="color:#666666; font-size:12px;">Le Lorem Ipsum est simplement du faux texte.
     <br/><br/><span class="diapo_precedente">Previous </span>  <span class="diapo_suivante"> Next</span>
     </div>
    </div>
  </div>
</div>

  <div style="width:450px; padding:5px;" align="left">



<div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="1">
  <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="2">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="3">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="4">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="5">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="6">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="http:YOUR-URL-IMAGE.jpg);" idimage="7">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="8">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="9">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="10">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="11">
    <div class="mask">&nbsp;</div></div>
    <div class="mindiap" style="background-image:url(http:YOUR-URL-IMAGE.jpg);" idimage="12">
    <div class="mask">&nbsp;</div></div>

<div align="center" class="prestitre">AMAZING 
  <font style="font-weight:400;">LIGHTBOX</font></div>
  </div>
</div>

NECESSARY EXTERNAL RESOURCES :



COMMENT THIS CREATIVE CODE

comments powered by Disqus

Difficulty level :
hard :
medium :
easy :
very easy :
Soigner ses interfaces utilisateur est primordial. Cela passe en partie par l'utilisation de "tricks" et animations CSS/jQuery.

Nous avons choisi de partager sous licence libre creative commons nos astuces et développements de tous les jours afin d'échanger, mais aussi de faciliter la vie des développeurs.
Wifeo Creative Code est un concentré de nos développements quotidiens: servez-vous, utilisez-les et adaptez-les sans aucune restriction. N'hésitez pas à les partager avec vos contacts !
Creative Commons License
Open code base by Wifeo is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at http://www.wifeo.com/code.
Permissions beyond the scope of this license may be available at http://www.wifeo.com/contact-wifeo.php.


Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES