cara membuat load more seperti instagram

gimana ya caranya membuat foto diawalan tampil hanya 6 , lalu dibawahnya ada tulisan Lihat Lainnya, lalu ketika di tekan tampil terus menerus ketika di scrooling??

ane berhasil buat, tapi untuk diawal ane limit 6, seperti ini scriptnya

<div id="grid-container" class="cbp">
                    <?php
                    $queryProject = mysqli_query($link, "SELECT * FROM galeri LIMIT 0,6") or die(mysqli_error());
                    while($dataProject = mysqli_fetch_array($queryProject)){
                    ?>
                        <div class="cbp-item <?php echo str_replace(' ','-',$dataProject['nama_galeri']); ?>">
                            <div class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="img/portfolio/<?php echo $dataProject['gambar_galeri']?>" alt=""  class="img-responsive">
                                </div>
                                <div class="cbp-caption-activeWrap">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <a href="img/portfolio/<?php echo $dataProject['gambar_galeri']?>" class="cbp-lightbox cbp-l-caption-buttonRight" data-title="<?php echo $dataProject['keterangan_galeri'] ?><br>by Author" >view larger</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><?php } ?>
                    </div>

                    <div id="loadMore-container" class="cbp-l-loadMore-button">
                        <a href="loadmore.php" class="cbp-l-loadMore-link">
                            <span class="cbp-l-loadMore-defaultText">Lihat Lainnya</span>
                            <span class="cbp-l-loadMore-loadingText">LOADING...</span>
                            <span class="cbp-l-loadMore-noMoreLoading">NO MORE WORKS</span>
                        </a>
                    </div>

dan ini di loadmore.php

<div class="cbp-loadMore-block1">

    <?php
    $link = mysqli_connect("localhost", "root", "", "database");

    /* cek koneksi ke database */
    if (mysqli_connect_errno()) {
        printf("Gagal Terhubung: %s\n", mysqli_connect_error());
        exit();
    }
    $queryProject = mysqli_query($link, "SELECT * FROM galeri LIMIT 6,15") or die(mysqli_error());
    while($dataProject = mysqli_fetch_array($queryProject)){
    ?>
        <div class="cbp-item <?php echo str_replace(' ','-',$dataProject['nama_galeri']); ?>">
            <div class="cbp-caption">
                <div class="cbp-caption-defaultWrap">
                    <img src="img/portfolio/<?php echo $dataProject['gambar_galeri']?>" alt=""  class="img-responsive">
                </div>
                <div class="cbp-caption-activeWrap">
                    <div class="cbp-l-caption-alignCenter">
                        <div class="cbp-l-caption-body">
                            <a href="img/portfolio/<?php echo $dataProject['gambar_galeri']?>" class="cbp-lightbox cbp-l-caption-buttonRight" data-title="<?php echo $dataProject['keterangan_galeri'] ?><br>by Author" >view larger</a>
                        </div>
                    </div>
                </div>
            </div>
        </div><?php } ?>
</div>

agar otomatis tampil tanpa limit seprti diatas gimana ya caranya??? diawal 6 gambar lalu ketika "Lihat Lainnya" di tekan tampil otomatis gimana yaa??

avatar Tidak ada Nama
@Tidak ada Nama

102 Kontribusi 17 Poin

Diperbarui 7 tahun yang lalu

6 Jawaban:

Jawaban Terpilih

yang ane tangkep dari pertanyaan agan itu adalah "bagaimana cara menampilkan data setelah menekan tombol lihat lainnya" kira-kira seperti itu ???

kalo iya, setau ane gan. kalo mau buat tombol load more/lihat lainnya itu harus pake ajax..

jadi caranya agan harus menggunakan jquery namanya. untuk bisa menggunakan ajax atau bisa juga menggunakan javascript.

contoh penggunaan nya bisa lihat di video tutorial ini gan..

[link]https://www.sekolahkoding.com/kelas/ajax-dengan-javascript-dan-jquery[/link]

sama satu lagi nih gan..

https://www.sekolahkoding.com/kelas/belajar-jquery-dari-dasar

semoga membantu

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

untuk membtasinyaa apa harus di limit lagi??

avatar Tidak ada Nama
@Tidak ada Nama

102 Kontribusi 17 Poin

Dipost 7 tahun yang lalu

iyak gan harus di limit lagi..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

mau load more seperti instagram "tanpa click button", atau mau pakai tombol "load more" ?

avatar ma4m
@ma4m

97 Kontribusi 39 Poin

Dipost 7 tahun yang lalu

Infinite scrolling , reff coba cek ini https://www.sitepoint.com/jquery-infinite-scrolling-demos/

avatar gunalirezqimauludi
@gunalirezqimauludi

350 Kontribusi 243 Poin

Dipost 7 tahun yang lalu

@ma4m maunyaa pertama di pencet load habis itu otomatis @gunalirezqumauludi makasih bang linknya. masig di coba ni

avatar Tidak ada Nama
@Tidak ada Nama

102 Kontribusi 17 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban