Cara Membuat PHP dan jQuery Image slideshow part 2

Di tahap ini kita akan membangun PHP code to upload image files, saya telah melihat beberapa contoh imagw upload pada PHP. Misalnya, image upload tunggal atau ganda, unggah file AJAX, Bagi menangani upload dengan library seperti FineUploader, ImageParser, dan lainnya. Pada contoh ini, file yang diunggah dipindahkan ke target yang ditentukan. Array $ _FILES diulang sekaitan dengan indeks yang sesuai. Karena saya telah memilih banyak gambar dengan menggunakan input file form, array $ _FILES akan bersifat multi dimensi seperti terlihat di bawah ini.

File-file tersebut disimpan pada folder image dari yang ditentukan selaku target dikala menjalankan move_upload_files ().

<?php<br />
    if(isset($_POST[‘submit’])){<br />
        if(count($_FILES[‘file-input’][‘name’]) > 0){<br />
                    for($i=0; $i<count($_FILES[‘file-input’][‘name’]); $i++) {<br />
                        $File_dir = $_FILES[‘file-input’][‘tmp_name’][$i];<br />
                        $save = “images/”.$_FILES[‘file-input’][‘name’][$i];<br />
                        move_uploaded_file($File_dir, $save) ;<br />
                    }<br />
                $dir = “images/”;<br />
                $photo = glob($dir.”*.jpeg”);<br />
                foreach($photo as $photos){?><br />
                    <div class=”galleryItem”><br />
                        <img src=”<?php print_r($photos) ?>”><br />
                    </div><br />
                  <?php<br />
                }?><br />
                <div class=”button-row1″><br />
                <input type=’submit’ id=’slideshow’ name=’slideshow’  value=’Start to Slideshow’><br />
                </div><br />
      <?php }}?>

<?php

if(isset($_POST[‘submit’])){

if(count($_FILES[‘file-input’][‘name’]) > 0){

for($i=0; $i<count($_FILES[‘file-input’][‘name’]); $i++) {

$File_dir = $_FILES[‘file-input’][‘tmp_name’][$i];

$save = “images/”.$_FILES[‘file-input’][‘name’][$i];

move_uploaded_file($File_dir, $save) ;

}

$dir = “images/”;

$photo = glob($dir.“*.jpeg”);

foreach($photo as $photos){?>

</div>

<?php

}?>

</div>

<?php }}?>

Script JQuery bagi image slider

Pada file main.js, klik tombol start Slide, event dioperasikan bagi memulai slideshow image dinamis. RangkaiÂ akan ditampilkan dengan container dengan popup dengan navigasi penggeser dan kontrol aksi Keluar. Di dikala mengklik Mulai Slideshow, berhenti, prev, kontrol aksi berikutnya, keadaan slide akan berubah. Dikala mengandung dan keluar dari tayangan slide gambar, efek fade-in dan fade-out jquery dikerjakan bagi overlay slide.

Pada tayangan slide image kontrol tindakan sebelumnya dan berikutnya digunakan bagi memindahkan gambar slider bolak-balik. Manfaat galleryNavigate () digunakan bagi memindahkan slide gambar. Script ini digunakan bagi memanggil manfaat bagi bergeser ke slide gambar sebelumnya atau berikutnya.

$(function () {<br />
    $(‘.gIquit’).click(function () {<br />
        $(‘.galleryModal’).css({ ‘transform’: ‘scale(0)’ })<br />
        $(‘.galleryShadow’).fadeOut()<br />
    })<br />
    $(‘#slideshow’).click(function (){<br />
        galleryNavigate($(‘.galleryItem’), ‘opened’)<br />
        $(‘.galleryModal’).css({ ‘transform’: ‘scale(1)’ })<br />
        $(‘.galleryShadow’).fadeIn()<br />
    })</p>
<p>    let galleryNav<br />
    let galleryNew<br />
    let galleryNewImg<br />
    let galleryNewText<br />
    $(‘.gIleft’).click(function () {<br />
        galleryNew = $(galleryNav).prev()<br />
        galleryNavigate(galleryNew, ‘last’)<br />
    })<br />
    $(‘.gIright’).click(function () {<br />
        galleryNew = $(galleryNav).next()<br />
        galleryNavigate(galleryNew, ‘first’)<br />
    })</p>
<p>    function galleryNavigate(gData, direction) {<br />
        galleryNewImg = gData.children(‘img’).attr(‘src’)<br />
        if (typeof galleryNewImg !== “undefined”) {<br />
            galleryNav = gData<br />
            $(‘.galleryModal img’).attr(‘src’, galleryNewImg)<br />
        }<br />
        else {<br />
            gData = $(‘.galleryItem:’ + direction)<br />
            galleryNav = gData<br />
            galleryNewImg = gData.children(‘img’).attr(‘src’)<br />
            $(‘.galleryModal img’).attr(‘src’, galleryNewImg)<br />
        }<br />
        galleryNewText = gData.children(‘img’).attr(‘data-text’)<br />
        if (typeof galleryNewText !== “undefined”) {<br />
            $(‘.galleryModal .galleryContainer .galleryText’).remove()<br />
            $(‘.galleryModal .galleryContainer’).append(‘<div class=”galleryText”>’ + galleryNewText + ‘</div>’)<br />
        }<br />
        else {<br />
            $(‘.galleryModal .galleryContainer .galleryText’).remove()<br />
        }<br />
    }<br />
})

$(function () {

$(‘.gIquit’).click(function () {

$(‘.galleryModal’).css({ ‘transform’: ‘scale(0)’ })

$(‘.galleryShadow’).fadeOut()

})

$(‘#slideshow’).click(function (){

galleryNavigate($(‘.galleryItem’), ‘opened’)

$(‘.galleryModal’).css({ ‘transform’: ‘scale(1)’ })

$(‘.galleryShadow’).fadeIn()

})

let galleryNav

let galleryNew

let galleryNewImg

let galleryNewText

$(‘.gIleft’).click(function () {

galleryNew = $< sumber :kursuswebprogramming.com/blog/

(Visited 3 times, 1 visits today)

Leave a Reply Cancel reply