ساخت اسلایدر تصاویر با jQuery و PHP می تواند به روش های مختلفی انجام شود. برای اینکار نیاز به مجموعه ای از تصاویر قابل استفاده در اسلایدر داریم.
سورس این تصاویر (data-source) می تواند یک فایل یا دیتابیس باشد که قبل از اجرا شدن واکشی شوند.
در این مثال PHP، ما اجازه آپلود چندین تصویر توسط فرم HTML را می دهیم.
سپس مسیر تصاویر آپلود شده در اسکریپت اسلایدر برای نمایش اسلاید به کار می رود.
کتابخانه های محبوب بی شماری برای ساخت اسلایدر تصاویر با jQuery و جاواسکریپت وجود دارند.
قابلیت این اسلایدرها از پلاگین به پلاگین فرق می کند. در آموزش قبلی, نحوه ساخت اسلایدشو ریسپانسیو با کتابخانه ResponsiveSlides.js را دیدیم.
در این مثال، از کتابخانه jQuery Slider برای ساخت اسلایدر استفاده می کنیم.
همچنین این امکان را خواهیم داشت که با کلیک/لمس روی تصویر آن را بصوت بزرگ و اسلایدی در همان صفحه نمایش بدیم.
فرم HTML آپلود چندین تصویر
این فرم شامل ورودی فایل (input="file"
) است که به کاربر اجازه آپلود چندین فایل همزمان را می دهد.
خصوصیت “multiple”
به کاربر امکان انتخاب همزمان بیشتر از یک فایل را برای آپلود چندگانه فایل را می دهد.
این فایل ها در قالب آرایه قابل دسترس خواهند بود و می توانیم با یک حلقه foreach به هر فایل و تصویر دسترسی پیدا کنیم.
با سابمیت این فرم، فایل عکس برای آپلود در مسیر مشخص به سمت PHP ارسال می شود.
مشخص کردن مقدار “multipart/form-data”
در خصوصیت enctype
برای آپلود فایل ها در یک فرم ضروری است.
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <!-- Main CSS --> <link rel="stylesheet" href="css/main.css"> <title>PHP Image Slideshow</title> </head> <style> body { max-width: 960px; margin: 0 auto; font-family: arial; } .gallery { padding: 40px 0px; } .galleryItem { width: 300px; display: inline-block; padding-right: 15px; } .galleryItem img { width: 100%; } </style> <body> <div class="container py-4"> <h1>PHP Image Slideshow</h1> <body> <form action="index.php" id="image" name='image' method="POST" enctype="multipart/form-data" onsubmit="return validate();"> <div class="form-row"> <input type="file" id="file-input" name="file-input[]" multiple="multiple"> </div> <div class="button-row"> <input type="submit" id="submit" name="submit" value="Post to Slideshow"><span id="validation_error"></span> </div> </form> </body> <div> </div> <div class="galleryShadow"></div> <div class="galleryModal"> <i class="galleryIcon gIquit close"></i> <i class="galleryIcon gIleft nav-left"></i> <i class="galleryIcon gIright nav-right"></i> <div class="galleryContainer"> <img src=""> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Main JS --> <script src="js/main.js"></script> </body> </html> |
اعتبارسنجی جاواسکریپت برای ورودی فایل
اسکریپت زیر یک اعتبارسنجی جاواسکریپت ساده برای بررسی اینکه تعداد فایل ها بیشتر از ۰ است را نشان می دهد.
این کد با ایجاد رویداد سابمیت (ثبت فرم) اجرا خواهد شد.
اسکریپت اعتبارسنجی ما بررسی می کند که کاربر قبل از ارسال داده های فرم به PHP، حداقل یک تصویر انتخاب شده داشته باشد.
اگر فایلی انتخاب نشود، این کد اعتبارسنجی خروجی FALSE
را برگشت می دهد و در صفحه مرورگر پیام خطا دیده خواهد شد.
1 2 3 4 5 6 7 8 9 10 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> function validate() { if($("#file-input").val() == "") { $("#validation_error").html("Please select image files"); return false; } return true; } </script> |
کد PHP آپلود فایل تصاویر
قبلا مثال های زیادی از آپلود فایل در PHP را دیدیم. برای مثال آپلود چندگانه تصاویر، آپلود فایل با AJAX، هندل آپلودها با کتابخانه FineUploader و غیره.
در این مثال, فایل های آپلود شده به مسیر خاصی که مشخص کردیم ارسال می شود.
آرایه $_FILES
به ترتیب با ایندکس های تعریف شده تکرار می شود.
همانطور که چندین تصاویر را از طریق فرم انتخاب کردیم، آرایه $_FILES
بصورت چندبعدی همانند زیر نمایش می دهد.
فایل ها در فولدر /images/ که به عنوان مسیر آپلود در move_upload_files()
مشخص کردیم، ذخیره می شوند.
توابع آپلود فایل با PHP
هنگام آپلود فایل با PHP، توابع is_uploaded_file()
و move_upload_file()
استفاده می شوند.
تابع is_upload_file()
برای بررسی اینکه فایل ها از طریق متد HTTP POST آپلود شده اند، استفاده می شود.
بعد تکمیل اعتبارسنجی، از تابع move_uploaded_file()
برای انتقال فایل ها از $_FILES[‘file-input’][‘tmp_name’]
به /images/ استفاده می کنیم.
تابع glob() در PHP
تابع glob
برای دریافت مسیر تصاویر منطبق بر الگوی مشخص شده استفاده می شود.
در این مثال, من الگوی “images/*.jpeg”
را برای دریافت تصاویر آپلود شده از فولدر موردنظر مشخص کردم.
این تابع خروجی مسیر فایل ها را بصورت آرایه برگشت می دهد. این خروجی آرایه را می توانیم با حلقه زدن به هر یک از مسیر فایل ها دسترسی پیدا کنیم.
در مثال ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP، خروجی تابع glob() در دستور foreach()
پردازش می شود.
با هر تکرار، تصویر ما از مسیر داینامیک خوانده و نمایش داده می شود.
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 }}?> |
اعتبارسنجی سمت سرور تصاویر
اسکریپت PHP در سمت سرور، طول آرایه $_FILES
را بررسی می کند که بیشتر از ۰ باشد. اگر اینطور بود، پس فرایند آپلود فایل ادامه می یابد.
از آنجا که آپلود چندگانه فایل انجام می گیرد، تابع آپلود فایل در PHP ما داخل حلقه تکرار آرایه سراسری $_FILES
اجرا می شود.
اگر آرایه $_FILES
خالی بود و مقدار ۰ را هنگام محاسبه عناصر آن برگشت داد، پس عملیات آپلود انجام نخواهد شد.
اسکریپت jQuery اسلایدر عکس
در فایل main.js رویداد کلیک روی دکمه Start Slideshow اسلایدر را اجرا می کند.
این اسلایدر در صفحه فعلی بر روی body
اجرا می شود و شامل دکمه های ناوبری و بستن است.
با کلیک روی هر یک از دکمه ها، وضعیت اسلایدر تغییر می کند. با بازشدن و بستن اسلایدر تصاویر، افکت های fade-in & fade-out اجرا می شود.
تابع galleryNavigation()
با ایجاد رویداد کلیک روی دکمه های ناوبری اجرا شده و تصاویر اسلایدر را تغییر می دهد.
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() } } }) |
کد سفارشی jQuery برای نمایش گالری تصاویر
در آموزش های قبلی، ما کد سفارشی برای ساخت اسلایدر بدون استفاده از کتابخانه جانبی را دیدم.
ساخت کد سفارشی مزایای خود را دارد و همیشه خوب است. برای افزودن قابلیت های جدید یا انجام تغییرات انعطاف پذیر است. همچنین براحتی قابل توسعه و دیباگ است.
کد jQuery زیر برای ساخت تصاویر اسلایدشو را نشان می دهد. این اسلایدشو بصورت خودکار و بدون لینک های ناوبری اجرا می شود.
اگر نمی خواهید از پلاگین های اسلایدر استفاده کنید، پس این اسکریپت به شما در ساخت اسلایدر بسیار کمک می کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="image-slide"> <img class="slide" src="slides/beach1.jpg"/> <img class="slide" src="slides/beach2.jpg"/> <img class="slide" src="slides/beach3.jpg"/> <img class="slide" src="slides/beach4.jpg"/> <img class="slide" src="slides/beach5.jpg"/> </div> <script> $(document).ready(function() { $(".slide:first").show(); setInterval(function(){ Next($('.slide:visible'))}, 2400); }); function Next(slide) { slide.fadeOut(); if(typeof slide.next().attr('src') !== 'undefined') { slide.next().fadeIn(); } else { $('.slide:first').fadeIn(); } } </script> |
در کد بالا، من از تصاویر استاتیک برای اسلایدر استفاده کردم. شما می توانید تصاویر را از منابع ذخیره سازی مثل فایل یا دیتابیس mysql فراخوانی کنید.
خروجی ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP
اسکرین شات زیر خروجی آپشن آپلود چندگانه فایل و نمایش گالری مانند تصاویر آپلود شده را نشان می دهد.
همچنین، اسکرین شات دوم اسلایدر تصاویر با افکت lightbox را نمایش می دهد.
آپلود تصاویر به همراه گالری
اسلایدر با آپشن ناوبری و بستن
امیدوارم از آموزش ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP نهایت استفاده را برده باشید.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید، از قسمت نظرات ارسال کنید. سریعا، پاسخگوی سوالات شما هستیم.
سلام اقای شفیعی،خسته نباشید.
من یک فرمی درست کردم که داخلش از اینپوتی با تایپ فایل استفاده شده و اتریبیوت مولتی پل رو هم نوشتم تا چند تا فایل رو بشه همزمان فرستاد،این کدی که زدم به درستی کار میکنه.
حالا میخوام نام هر فایل رو در دیتابیس ذخیره کنم .جدول دیتابیسم باید چه جوری باشه
سلام ممنون.
جدول files با فیلدهای id, filename که id باید auto_increament و filename هم varchar که به ازای هر فایل باید یک کویری sql از نوع insert بزنید و تک به تک داخل یک حلقه اجرا کنید تا هر کدام از فایل ها جداگانه در یک سطر جدول دیتابیس ذخیره شوند