Pada tahap ini kita akan membuat PHP code to upload image files, saya telah melihat beberapa contoh imagw upload dalam PHP. Misalnya, image upload tunggal atau ganda, unggah file AJAX, Untuk menangani upload dengan library seperti FineUploader, ImageParser, dan lainnya. Dalam contoh ini, file yang diunggah dipindahkan ke target yang ditentukan. Array $ _FILES diulang sehubungan 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 dalam folder image sebagaimana ditentukan sebagai target saat menjalankan move_upload_files ().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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 class="galleryItem"> <img src="<?php print_r($photos) ?>"> </div> <?php }?> <div class="button-row1"> <input type='submit' id='slideshow' name='slideshow' value='Start to Slideshow'> </div> <?php }}?> |
Script JQuery untuk image slider
Dalam file main.js, klik tombol start Slide, event dioperasikan untuk memulai slideshow image dinamis. Rangkai akan ditampilkan dengan container dengan popup dengan navigasi penggeser dan kontrol aksi Keluar. Pada saat mengklik Mulai Slideshow, berhenti, prev, kontrol aksi selanjutnya, keadaan slide akan berubah. Saat memuat dan keluar dari tayangan slide gambar, efek fade-in dan fade-out jquery dibuat untuk overlay slide.
Dalam tayangan slide image kontrol tindakan sebelumnya dan berikutnya digunakan untuk memindahkan gambar slider bolak-balik. Fungsi galleryNavigate () digunakan untuk memindahkan slide gambar. Script ini digunakan untuk memanggil fungsi untuk bergeser ke slide gambar sebelumnya atau berikutnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
$(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 = $(galleryNav).prev() galleryNavigate(galleryNew, 'last') }) $('.gIright').click(function () { galleryNew = $(galleryNav).next() galleryNavigate(galleryNew, 'first') }) function galleryNavigate(gData, direction) { galleryNewImg = gData.children('img').attr('src') if (typeof galleryNewImg !== "undefined") { galleryNav = gData $('.galleryModal img').attr('src', galleryNewImg) } else { gData = $('.galleryItem:' + direction) galleryNav = gData galleryNewImg = gData.children('img').attr('src') $('.galleryModal img').attr('src', galleryNewImg) } galleryNewText = gData.children('img').attr('data-text') if (typeof galleryNewText !== "undefined") { $('.galleryModal .galleryContainer .galleryText').remove() $('.galleryModal .galleryContainer').append('<div class="galleryText">' + galleryNewText + '</div>') } else { $('.galleryModal .galleryContainer .galleryText').remove() } } }) |