html - Want to make navigation button in jQuery photo gallery -

-

i've made photo gallery using jquery. when click on photo, photo display. want add navigation button, mean when click next, next image displayed, , when click previous, previous image displayed nicely. please me this. if possible, please give me full code clearly.

my css: 

.gallery {     border: 1px solid #5b6168;     width: 162px;     display:inline-block;     margin:10px;     border-radius:10px; } .img_head {   border-bottom: 1px solid #5b6168;   text-align: center;   border-radius: 9px 9px 0 0;   margin-top: -5px;   background: linear-gradient(#698bf0, #0c101d); } .img_head h3{color:#ffffff; padding-top:5px;} img.album {   height: 150px;   width: 150px;   margin: 5px;   border-radius: 0;   cursor: pointer;   transition:.5s; } img.album:hover {   height: 158px;   width: 158px;   margin: 1px;   border-radius: 0 0 10px 10px;   cursor: pointer; } .abs {position:fixed; z-index:9999;} #overlay {   top: 0;   left: 0;   right: 0;   height: 100%;   bottom: 0;   background: black;   opacity: 0.5;   z-index: 9999; }  #lb {   top: 30%;   left: 3%;   width: 50%;   max-height: 100%;   overflow: hidden;   margin-left: 20%; }  #lbhead {   height: 40px;   width: 100%;   background: darkcyan; }  #lbtitle {   float: left;   width: 70%;   height: 30px;   color: white; }  #lbx {   float: right;   width: 30px;   height: 40px;   padding: 10px;   text-align: center;   color: #000000; }  #lbx:hover {   background: white;   color: darkcyan;   cursor: pointer; }  img.album:hover {   cursor: pointer; }  #lb > #lbbody {   text-align: center;   padding-bottom: 5px;   background: #ededed; }  #lb #lbbody img {   max-width: 100%;   max-height: 1900px; }  #overlay, #lb {   display: none; }  .prev, .next {   display: inline-block;   margin: 10px;   color: #ffffff;   cursor: pointer; }

my html:

<!doctype html> <html lang="en-us">     <head>         <meta charset="utf-8">         <title></title>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     </head>     <body>         <div id="overlay" class="abs"></div>         <div id="lb" class="abs">             <div id="lbhead">                 <div id="lbtitle">your image</div><div id="lbx">x</div>                 <div class="prev"> << prev </div>                 <div class="next"> next >> </div>             </div>             <div id="lbbody">             </div>         </div>         <div class="gallery">             <div class="img_head">                 <h3>image title</h3>             </div>             <img class="album albm_img" src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" alt="" />         </div>         <div id="" class="gallery">             <div class="img_head">                 <h3>image title</h3>             </div>             <img class="album albm_img" src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" alt="" />         </div>         <div id="" class="gallery">             <div class="img_head">                 <h3>image title</h3>             </div>             <img class="album albm_img" src="http://images.replacements.com/images/images5/china/c/lenox_china_garden_birds_no_box_p0000014675s0122t2.jpg" alt="" />         </div>     </body> </html>

my jquery

$(document).ready(function(){     $('img').click(function(){         var tmp = $(this).attr('src');         $('#lbbody').html('<img src="'+tmp+'" />');         $('#overlay, #lb').fadein(1800);     });      $('#lbx').click(function(){         $('#overlay, #lb').fadeout(800);     }); });


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more