បង្កើត​វិចិត្រសាល​រូប​ភាព​ជា​ស្លាយ​នៅ​ក្នុង​ប្លុក

   ប្លុក​ទីងមោង មិន​ដែល​បាន​ប្រកាស​ទាក់ទង​ទៅ​នឹង​ស្លាយទេ។ ថ្ងៃ​នេះ ខ្ញុំ​នឹង​បង្ហាញ​ពី​វិធី​ដាក់​រូប​ភាព​របស់​លោក​អ្នក ជា​ស្លាយ​បែប​សាមញ្ញ​មួយ ហើយ​វា​ក៏​ជា​វិធី​ដ៏​ល្អ​បំផុត​ដែរ ព្រោះ​វា​មិន​ធ្វើ​ឲ្យ​ប្លុក​យើង​ដំណើរ​ការ​យូរ​ឡើយ និង​ងាយ​ស្រួល​ក្នុង​ការ​ចូល​ទៅ​កែ​ប្រែ​រូបភាព ឬ​ពាក្យ​ពេចន៍​នានា​ជា​ដើម។ លោក​អ្នក​អាច​យក​វា​ទៅ​ដាក់​នៅ​ផ្នែក​ចំហៀង​ប្លុក ឬ​នៅ​ផ្នែក​ខាង​លើ​នៃ​ប្រកាស ឬ​ផ្នែក​ខាង​ក្រោម​នៃ​ប្រកាស​ក៏​បាន ដោយ​លោក​អ្នក​ត្រូវ​ចូល​ទៅ​កែ​សម្រួល​ទំហំ (ទទឹង និង​បណ្ដោយ​របស់​វា)។ ដើម្បី​កុំ​ឲ្យ​រងចាំ​យូរ ខ្ញុំ​នឹងបង្ហាញ​ពី​របៀប​នៃ​ការ​ដាក់​កូដ និង​របៀប​នៃ​ការ​ដាក់​រូប​ភាព​ខាង​ក្រោម ៖

៙ របៀប​ដាក់ធាតុក្រាហ្វិកប្លុក បង្កើត​វិចិត្រសាល​រូប​ភាព​ជា​ស្លាយ​ ៖ 
- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ។ 
- បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget ​លោក​អ្នក​អាច​ដាក់​តាម​តម្រូវ​ការ។

កូដ និង​ការ​ចំណាំ

<style type="text/css">
#simplegallery2 {
    //CSS for sample Gallery
position: relative;
    visibility: hidden;
    border: 5px solid black;
    margin: auto;
}

#simplegallery2 .gallerydesctext {
    //CSS for description DIV of Example 1 (if defined)
text-align: left;
    padding: 2px 5px;
    font-family: Hanuman;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://helperblogger.ucoz.com/code/simple-img-gallery.js">
</script>

<script type="text/javascript">
var mygallery2=new simpleGallery({
 wrapperid: "simplegallery2", //ID of main gallery container,
 dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
 
       ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION 1"],

       ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION 2"],

       ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION 3"],

       ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION 4"],

       ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION 5"]
 ],
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
 persist: true,
 fadeduration: 1000, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})
</script>
<div id="simplegallery2"></div>

*** សេចក្ដី​ពន្យល់​កូដ​​ខ្លះៗ​ដែល​អាច​​កែ​បាន ៖
+ នៅ​ត្រង់ font-family: Hanuman ៖ មាន​ន័យ​ថា​ពុម្ព​អក្សរ​ដើម ហនុមាន (លោក​អ្នក​អាច​លុប​ក៏​បាន)។
+ នៅ​ត្រង់ 400, 265 ៖ គឺ​ជា​ទំហំ​របស់​ស្លាយ (400 គឺ​ទទឹង, 265 គឺ​ជា​កម្ពស់)។
+ នៅ​កន្លែង IMAGE LINK 1 HERE... ៖ គឺ​ជា​ដំណ​រូប​ភាព (Image URL) ​របស់​អ្នក។
+ នៅ​ត្រង់ # ៖ # ត្រូវ​ជំនួស​ដោយ​ដំណ​ភ្ជាប់​ណា​មួយ ព្រោះ​នៅ​ពេល​ដែល​គេ​ចុច​លើ​រូប​ភាព នោះ​វា​នឹង​បើ​ចូល​ Web Page ណា​មួយ និង​មាន​លក្ខណៈ​ជា New Tab។
+ កន្លែង IMAGE DESCRIPTION 1 ៖ គឺ​ពាក្យ​ដែល​ឈរ​ពី​លើ​រូប​ភាព។ (លោក​អ្នក​គួរ​តែ​សរសេរ​ពាក្យ​ពេចន៍​ឲ្យ​ពិរោះ សម​ស្រប​ជា​មួយ​នឹង​រូប​ភាព :D )
+ នៅ​ត្រង់ true ៖ មាន​ន័យ​ថាស្លាយ​នោះ​នឹង​ដំណើរ​ការ​ដោយ​ស្វ័យ​ប្រវត្តិ មិន​បាច់​មាន​អ្នក​ចុច​ប៊ូតុង Play... តែ​បើ​លោក​អ្នក​មិន​ចង់​ឲ្យ​វា​លេង​ដោយ​ស្វ័យ​ប្រវត្តិ​ទេ សូម​ប្ដូរ​ទៅ False វិញ។
+ ចំពោះ 2500 ៖ គឺ​ជា​ចន្លោះ​ពេល​នៃ​ការ​ Load ស្លាយ មុន និង​បន្ត​បន្ទាប់...។
*** បើ​លោក​អ្នក​គិត​ថា​គន្លឹះ​មួយ​នេះ​មាន​ប្រយោជន៍ សូមចែក​រំលែក ទៅ​កាន់​មិត្ត​ភក្ដិ និង​អ្នក​ដែល​នៅ​ជុំ​វិញ​ខ្លួន​បាន​ដឹង​ផង។ *** រីក​រាយ​បុណ្យ​ចូល​ឆ្នាំ​ចិន​ទាំង​អស់​គ្នា ***

អត្ថបទស្រដៀងគ្នា:

Tweet