ងាយ​ស្រួល​ទេ​បង្កើត Background Slideshow ក្នុង​វែបសាយ​

សួស្ដី​ប្រិយ​មិត្ត សំបុក​អាយ​ធី​ទាំង​អស់​គ្នា នេះ​ជា​អត្ថបទ​ដំបូង​គេ​របស់​ខ្ញុំ​នៅ​ក្នុង​ប្លក់​ដ៏​ពេញ​យមមួយនេះ ។ ខ្ញុំ​នឹង​បង្ហាញជូន​គន្លឹះ​ទាក់​ទង​នឹង​ការ​អភិវឌ្ឍន៍​​គេហទំព័រ ដើម្បី​ឲ្យ​មើល​ទៅ​ឃើញ​ស្រស់​ស្អាត និង​ទាក់ទាញ ។

Background Slideshow with Backstretch

អត្ថបទ​ដំបូង​របស់​ខ្ញុំ​នេះ​ គឺ​ចង់​បង្ហាញ​ប្រិយ​មិត្ត​អំពី វិធី​បង្កើត​ Background Slideshow ក្នុង​វែបសាយ​​​​​ ដោយ​ប្រើ Backstretch jQuery Plugin ដែល​អាច​ដំណើរការ​បាន​ផង​ដែរ​​លើ​ទូរស័ព្ទ​ ហើយ​​ខ្ញុំ​​ក៏​បាន​​ប្រើ​វា​​​នៅ​ក្នុង​វែបសាយ Saramoni.com

មើល​ឧទាហរណ៍ក្នុង វែបសាយ​របស់​ខ្ញុំ ឬទាញ​យក​ទីនេះ Source Code

ក. HTML

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Background Slideshow with Backstretch</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <div class="box">
     <div class="box-content">
       Text here...
     </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/jquery.backstretch.min.js"></script>
    <script>
      $(function() {
       $.backstretch([
        "img/slide_01.jpg",
        "img/slide_02.jpg",
        "img/slide_03.jpg",
        "img/slide_04.jpg"
       ], {
       fade: 750,
       duration: 4000
      });
    });
   </script>
</body>
</html>

កូដ​ខាង​លើនគឺ ឧទាហណ៍ទាំងមួល ខ្ញុំ​នឹង​ពន្យល់តាមផ្នែកនិមួយដូខាងក្រោម៖

ខ. ​STYLESHEET

.box {
	width: 940px;
	background: rgba(0, 0, 0, .9);
	margin: 50px auto;
	border-radius: 10px;
}
.box-content {
	padding: 20px;
}
.box h1,
.box p {
	color: #fff;
}

@media (max-width: 950px) { 
	body {
		padding: 15px;
	}
	.box {
		width: 100%;
		margin: 0;
		padding: 0;
	}
}

ក្នុងកូដ CSS នេះ​គឺ​ធម្មតាទេ តែ​ខ្ញុំ​បាន​បន្ថែម​ទួនាទី Responsive (@media query) បន្តិច​ដើម្បី​អោយ​វា​ដំណើរការ​ជាមួយ Smart Phone។

គ. JAVSASCRIP

 <script>
      $(function() {
       $.backstretch([
        "img/slide_01.jpg",
        "img/slide_02.jpg",
        "img/slide_03.jpg",
        "img/slide_04.jpg"
       ], {
       fade: 750,
       duration: 4000
      });
    });
   </script>

ចំនុច ក ខ្ញុំ​បាន​ដា់កូដ​ខាង​លើននេះ​ហើយ ដែល​វា​អាច​ដំណើរការ​បានដោយ​ពឹ​ផ្អែកលើ jQuery libraries និង Backstretch jQuery Plugin។

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>

$.backstretch([…]) កូដ​នេះ​មាន​នាទី​ហៅ​ Plugin Backstretch ក្នុង​នោះ​ខ្ញុំ​បាន​ប្រើ​រូប​ភាព​ចំនួន​៤ ដើម្បី​អោយ​ធ្វើ​ Slideshow នៅ​ក្នុងមាន​ Properties ២ ដែល​ខ្ញុំ​បាន​ប្រើ គឹ ៖

  • fade: 750 មាន​ន័យ​ថា​​វានឹង​ធ្វើ effect រយៈពេល ៧៥០ms
  • duration: 4000 មានន័យ​ថា​វា​នឹង​ប្ដូរ​រូបភាព​ក្នុងរយៈពេល 4s

ប្រសិន​បើ​អ្នកមាន​ចម្ងល់​ អាច​សួរ​បាន​តាម​រយៈ​ការ​ដាក់​មតិ​ខាង​ក្រោម។​​

8 មតិ

  1. Code Stylesheet មានតែមួយទេ តែ Code ក្នុង HTML មាន href ដល់ទៅពីរ មួយ href=”css/normalize.css” និងមួយទៀត href=”css/style.css”
    ខ្ញុំចង់សួរថាតើកូដ Stylesheet ខាងលើជារបស់ normalize.css ឬ style.css ? ចុះហេតុអីមានកូដ CSS តែមួយ តែក្នុង HTML បែរជាមានកូដចាប់យក CSS ដល់ទៅពីរ?

  2. @Rainy normalize.css ជា​ reset ជាទួទៅ​គឺ​យើង​ប្រើវា​ដើម្បី​ Format Browser setting ចំពោះ CSS កូដ​ដែល​ប្រើ​ពិត​ប្រាកដ​នោះ គឺ style.css។ Rainy អាច​អាន​បន្ថែម​នៅទី​នេះ http://necolas.github.io/normalize.css/

  3. បើខ្ញុំចង់យកវាដាក់ក្នុង Google Blog ធ្វើយ៉ាងម៉េចទៅ??

    • សួស្តី! សូម​អនុវត្តន៍​តាម​ជំហាន ក ខ ដូចខាងលើ!

  4. ហេតុអ្វីនបានជាខ្ញុំ​ Ctrl+space មិន​លោតអក្សពីក្រោម​ ។

  5. Thanks you so much

  6. សួស្តីបង បើខ្ញុំចង់ដាក់ code អោយអ្នកទស្សនាគេហះទំព័ររបស់យើងអាច post បានដូចបងបានដាក់អោយ ខ្ញុំ comment មកបងចឹងតើត្រូវសរសេរ code យ៉ាងដូចម្តេចបង សូមបងជូយ ប្រាប់ខ្ញុំផងបង sophann_on@yahoo.com អរគុណបងទុកជាមុន។

Leave a Reply