5/18/2017

Membuat Galeri Foto E-Commerce dengan Efek Zoom Keren

Selamat siang sang programmer sejati (ciee yg programmer). Ketemu lagi di artikel mengenai tutorial web. Hmm, untuk tutorial sekarang saya mau coba buat galeri foto aja deh kayanya, Cocok buat dipasang di web e-commerce. Galeri foto yang bisa menarik bak laksana rembulan penarik hati *apasih. Intinya  yang bisa menyenangkan pelanggan. Misal kalo gambarnya di sorot mouse dia bisa zoom, kan bagus tuh pengunjung bisa lihat-lihat lebih detail productnya.

Dulu pernah lihat di salah satu website *saya lupa nama nya, jadi pas kita lihat rincian product yang dijual nya muncul detail barangnya, pas sorot foto nya eh muncul gambar detail di sampingnya, menarik bisa di zoom pake scroll. Dan ternyata setelah tanya-tanya pada sang 'mbah' ketemu deh plugin yang mirip-mirip sama kaya yg dipake E-commerce nya itu. Mau tau nama pluginnya? googling dong, enak aja minta :p Hahaha. Kidding brad, namanya ElevateZoom.js  

Pada penggunaannya lumayan gampang, cuma install plugin nya dan panggil plugin nya buat di bagian yang ingin kita zoom. ingat, plugin ini harus menggunakan plugin jquery juga, kalau ga pake JQuery sampe botak gakan bisa ngezoom.
Kita coba demo kan beberapa contoh :

Hasilnya kurang lebih kaya gini :



  1. Buat project baru.
  2. Download jquery dan elevatezoom nya, dan simpan di folder project tersebut.
  3. Buat file index.php, isi dengan sintaks dibawah :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Galeri Elevatezoom</title>
        <style>
            body{
                background: #eee;
            }
            #wrap{
                margin: 0 auto;
                width: 900px;
                background: #fff;
                padding: 10px;
            }
            #header{
                width: auto;
                height: 100px;
                padding: 5px;
                margin: 5px;
                border: 1px solid #eee;
                background: #dedede;
            }
            #konten {
                padding: 5px;
            }
            #gambar {
                border: 1px solid #eee;
            }
            #rincian {
                border: 1px solid #eee;
                margin: 0px 0px 10px 5px;
                float: left;
                padding: 5px;
                width: 458px;
                min-height: 270px;
                background: #dedede;
                color: #333;
            }
            #footer{
                clear: both;
                border: 1px solid #dedede;
                padding: 5px;
                margin: 5px;
                background: #dedede;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="header">Header Galeri</div>
            <div id="konten">
                <div id="gambar">
                    <img style="border:1px solid #e8e8e6;" id="zoom_mw" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" 
                         data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg"
                         width="411"  />
                </div>
                <div id="rincian">
                    <p>
                        Dijual Mobil Mewah
                    </p>
                    <ul>
                        <li>Alamat : zzzz</li>
                        <li>Harga : 150.000.000</li>
                        <li>Telp : +62872672634</li>
                    </ul>
                </div>
            </div>
            <div id="footer">indra92</div>
        </div>
        <script src="jquery-3.8.2.min.js" type="text/javascript"></script>
        <script src="jquery.elevatezoom.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#zoom_mw").elevateZoom({
                    scrollZoom: true
                });
            });
        </script>    
    </body>
</html>

*Penamaan jquery dan elevatezoom sesuaikan dengan nama file yang sudah agan-sista download tadi.

coba runnning, saya harap bisa kaya demo saya yg di atas kalau ga, bisa dowload hasil jadi nya.


Bisa kalian explore lebih jauh lagi, semacam di koneksikan dengan database, seperti penggunaannya pada project saya di aplikasi e-kost berikut ini :


Terimakasih.. see u ..

Mulai menulis blog sejak tahun 2012. Saat ini sedang disibukkan dengan karir dibidang IT nya.

Komentar yang mengandung spam / link aktif akan secara otomatis disembunyikan. Mohon maaf atas ketidaknyamanan jika pertanyaan telat ataupun tidak terbalas karena keterbatasannya waktu. Silahkan hubungi kami di menu Contact Us. Terimakasih
EmoticonEmoticon