Tutorial Menambahkan jquery Fancy Box di konten yang anda inginkan

Belajar Web Design

Menambahkan jquery Fancy Box pada konten yang anda inginkan

okey guys kita bertemu lagi, Pada artikel kali ini saya mencoba Memperkenalkan

seperti apa sih Jquery funcy box itu ? bagaimana sih cara kerja nya ?
okey  pertama2 silahkan ada lihat contoh gallery yang dibuat menggunakan jqueryfancybox  dibawah ini…

 sebelum di klik,

fancy

sesudah diklik,

fancy1

oke guys diatas adalah contoh konten gallery yang ditambahkan kan efek jquery fancybox …
setelah melihat contoh diatas mari kita ikuti tutorial menggunakan Jquery fancybox

Pertama-tama , download zip funcy boxnya disini ”

>>Version 1.3.4 (2010/11/11)<<

”

kedua ,

setelah file zip nya didapatkan extrak file,

extrak

 ketiga copysemua folder/file yang ada didalam folder kecuali index,
masukan kedalam folder yang anda ingin kan ,
lalu file ‘index.html'( example gallery funcy box) buka di editor anda

copy
copy2

Empat. Copy link script yang ada diantara  Tag <Head> dan  </head> pada index.html

paste di <Head> </head>yang sudah anda siapkan

seperti berikut

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script>
      !window.jQuery &amp;&amp; document.write('<script src="jquery-1.4.3.min.js"><\/script>');
  </script>
  <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
  <script type="text/javascript">
      $(document).ready(function() {
          /*
           *   Examples - images
           */
 
          $("a#example1").fancybox();
 
          $("a#example2").fancybox({
              'overlayShow'   : false,
              'transitionIn'  : 'elastic',
              'transitionOut' : 'elastic'
          });
 
          $("a#example3").fancybox({
              'transitionIn'  : 'none',
              'transitionOut' : 'none'
          });
 
          $("a#example4").fancybox({
              'opacity'       : true,
              'overlayShow'   : false,
              'transitionIn'  : 'elastic',
              'transitionOut' : 'none'
          });
 
          $("a#example5").fancybox();
 
          $("a#example6").fancybox({
              'titlePosition'     : 'outside',
              'overlayColor'      : '#000',
              'overlayOpacity'    : 0.9
          });
 
          $("a#example7").fancybox({
              'titlePosition' : 'inside'
          });
 
          $("a#example8").fancybox({
              'titlePosition' : 'over'
          });
 
          $("a[rel=example_group]").fancybox({
              'transitionIn'      : 'none',
              'transitionOut'     : 'none',
              'titlePosition'     : 'over',
              'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                  return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
              }
          });
 
          /*
           *   Examples - various
           */
 
          $("#various1").fancybox({
              'titlePosition'     : 'inside',
              'transitionIn'      : 'none',
              'transitionOut'     : 'none'
          });
 
          $("#various2").fancybox();
 
          $("#various3").fancybox({
              'width'             : '75%',
              'height'            : '75%',
              'autoScale'         : false,
              'transitionIn'      : 'none',
              'transitionOut'     : 'none',
              'type'              : 'iframe'
          });
 
          $("#various4").fancybox({
              'padding'           : 0,
              'autoScale'         : false,
              'transitionIn'      : 'none',
              'transitionOut'     : 'none'
          });
      });
  </script>

Kemudian copy example yang ada diantara tag <body></body>( index.html)

body

paste Example gallery fancy box dikonten yang sudah ada sediakan ,,
12 example image gallery sudah bisa anda gunakan ,,

<body>
<nav>
    <p align="center">
        Different animations<br />
        <a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>
        <a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>
        <a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
        <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
    </p>
    <p align="right">
        Different title positions<br />
        <a id="example5" href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>
        <a id="example6" href="./example/6_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="example5" src="./example/6_s.jpg" /></a>
        <a id="example7" href="./example/7_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="./example/7_s.jpg" /></a>
        <a id="example8" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="./example/8_s.jpg" /></a>
    </p>
    <p>
        Image gallery (ps, try using mouse scroll wheel)<br />
        <a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
        <a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
    </p>
</nav>
 
</body>

wow mudah bukan ?? oke guys codingan diatas sekaligus penutup artikel saya kali ini ,
kita akan bertemu lagi di artikel berikutnya…Selamat mencoba dan semoga Berhasil !

No related posts.