Amazing Design Simple LightBox

[DEMO]

Langkah Pemakaian LightBoxnya :

• Copy code Css dibawah ini dan letakan tepat di Atas ]]></b:skin>

.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(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;
}

• Setelah itu letakan JavaScript di bawah ini di atas </head>

$(document).ready(function(){
  $(".mindiap").click(function()
    {    
  var idimage = $(this).attr("idimage");
       $(".bigdiap").fadeIn(600);   
    $("#conteneur_grande_image").css("background-image", "url(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(YOUR-URL-IMAGE.jpg)");
  }
  else
  {
   $("#diapo_en_cours").val(diapo_en_cours+1);
   $("#conteneur_grande_image").css("background-image","url(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 data-blogger-escaped-background-image="" data-blogger-escaped-bigdiap="" data-blogger-escaped-btn_close_popup="" data-blogger-escaped-click="" data-blogger-escaped-conteneur_grande_image="" data-blogger-escaped-css="" data-blogger-escaped-diapo_en_cours-1="" data-blogger-escaped-diapo_en_cours="" data-blogger-escaped-diapo_max="" data-blogger-escaped-else="" data-blogger-escaped-fadeout="" data-blogger-escaped-function="" data-blogger-escaped-jpg="" data-blogger-escaped-pre="" data-blogger-escaped-url="" data-blogger-escaped-val="">








Jangan lupa kamu letakan Jquery berikut di atas </head>, tapi jangan kamu letakan di template kalian bila telah terpasang di template Blog/Wen kalian


jQuery Library : http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

• Dan untuk penempelannya kamu copy kode HTML berikut dan bisa disesuaikan penempatannya sesuai keinginnan kalian 

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

NOTE : YOUR-URL-IMAGE.png/jpg kamu bisa masukan gambar png ataupun jpg

SELAMAT MENCOBA.....| Jangan Lupa Berkomentarya.......

Share :

Tweet

✚

Related Post

• Basic Pembuatan Auto Popup di Blog Hai kawan Ane kali ini akan berbagi Basic Pembuatan Auto Popup di Blog dengan tambahan sedi
• Cara Membuat Efek Tooltip dengan CSS di Link Blog Cara Membuat Efek Tooltip di Link Blog. Mungkinsobat sudah pernah melihat berbagai macam jenis too
• Cara Paling Mudah Membuat Contact Form di Blog Hai Kawan kali ini Url-Rhenaldy akan memberitahukan bagaimana cara Paling Mudah Membuat Conta
• Hal Yang Paling Ditakuti Para Blogger Terkadang di situ saya merasa sedih ketika Saya atau kalian sebagai seorang Blogger bertemu deng
• Cara Menampilkan Widget Hanya Di Homepage / Postingan Cara Menampilkan widget di Postingan atau Homepage. Tutorial seocips berikut ini adalah bagai
• Mengenal Tag Pre PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre ma