|
 |
| |
Banner Slide image โดยดึงรูปจากฐาน ทำยังไงค่ะ |
| |
 |
|
|
 |
 |
|
Code (PHP)
foreach($data as $dt){
<!-- Picture 1 -->
<a href="https://www.thaicreate.com" target="_blank">
<img src="<?php echo $dt['picture']?>" alt="IRON 3" />
<span>
<b>ไอรอนแมน IRON MAN 3</b><br />
<small>เป็นตัวละครส่วนหนึ่งของมาร์เวลคอมิกส์ เป็นที่รู้จักกันดีในหน้าของนักรบใส่เกราะซึ่งมักจะใส่เกราะ แดง-เหลือง เป็นชุดประจำตัวอยู่เสมอ</small>
</span>
</a>
}
|
ประวัติการแก้ไข
2016-02-08 09:05:06
2016-02-08 09:05:30
 |
 |
 |
 |
| Date :
2016-02-08 09:04:15 |
By :
tam78910 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
- ใช้ bower ติดตั้ง coin-slider ด้วยคำสั่ง
Code
bower install coin-slider
package จะถูกโหลดมาไว้ที่ /resources/assets/bower_components
- ใช้ elixir เพื่อจัดการ package โดยเปิด gulpfile.js เพื่อติดตั้ง package ที่โหลดมา
มาไว้ public ซึ่งเป็น folder ที่ user ใช้เรียก app ตัวนี้ แล้วก็โค้ดตามด้านล่าง
Code (JavaScript)
elixir(function(mix) {
mix.copy('resources/assets/coin-slider/coin-slider.min.js', 'public/js')
.copy('resources/assets/coin-slider/coin-slider-styles.css', 'public/css');
});
จากนั้นเปิด cmd แล้วรัน command เพื่อรัน script elixir
Code
gulp
- เปิด view แล้วแทรกโค้ดที่ head
Code
{!! Html::style('/public/css/coin-slider-styles.css') !!}
จากนั้นแทรก js ตรงส่วนท้ายของ body
Code
{!! Html::script('/public/js/coin-slider.min.js') !!}
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
- เปิด controller เพื่อ query database ส่งไปแสดงผลที่ view
Code (PHP)
public function getIndex() {
$data = DB::table('table name')
->where('id', '>', 5)
->select('field1', 'field2', 'field3', 'field4')
->orderBy('id', 'asc')
->get();
return view('index', ['Data' => $data]);
}
- เปิด view อีกครั้งเพื่อเขียนโค้ดเอา data ไปแสดงผล
Code (PHP)
<div id="coin-slider">
<div>
@foreach($Data as $row)
<a href="{{ $row->field1 }}" target="_blank">
<img src="/images/{{ $row->field2 }}" alt="" />
<span>
<b>{{ $row->field3 }}</b>
<br />
<small>{{ $row->field4 }}</small>
</span>
</a>
@endforeach
</div>
</div>
|
| |
|
|
| |
| Date :
2016-02-08 09:17:50 |
By :
ห้ามตอบเกินวันละ 2 กระทู้ |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
