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>