Bagaimana membuat image slider saat di klik bisa memberikan informasi..?
: Januar : janua*****@yahoo.co.id : http://--
: di image slip yg ada .., kita ingin membuat saat image di klik akan muncul/halaman/form baru yg akan dapat memberikan keterangan dari image yg terpilih..?, tks LIVE DEMO SLIDER
Sebagai contoh pada link diatas ane memakai bootstrap slider gan, karena proses pembuatan bisa lebih mudah, kita tidak perlu membuat code CSS dan javascript yang terlalu panjang.
Caranya :
1. Pastikan ada code jquery dan boostrap pada bagian <head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>2. Pada bagian <body> untuk slider, kita memanfaatkan code slider dikombinasikan dengan modal, jadinya seperti ini gan, ini ane buat contoh code dengan satu gambar saja, agar mudah memahaminya
<div class="container">
<div id="WJSlider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-toggle="modal" data-target="#info_gambar1" src="http://url_gambar_agan.jpg">
</div>
<div class="modal fade" id="info_gambar1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">1. Header Keterangan Untuk Gambar Slider</h4>
</div><div class="modal-body">
<p>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</div>
</div>
</div> Untuk lebih lengkapnya contoh code jadinya bisa seperti ini, ( code ini ane kombinasikan dengan tutorial slider ini : Membuat Slider Bootstrap Yang Responsive )
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider Bootstrap Webjalanan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 80%; margin: auto;}</style>
</head>
<body>
<div class="container">
<div id="WJSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#WJSlider" data-slide-to="0" class="active"></li>
<li data-target="#WJSlider" data-slide-to="1"></li>
<li data-target="#WJSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Gambar Slider 1 -->
<div class="item active">
<img data-toggle="modal" data-target="#info_gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1MA0LR75O4sDiwqjIjC8alenS7wdEG7xAcPmHK06m7cE-MHfq5YKVBIY9bLpyZXK7zRIRbvwFaBF8ttiviXWnnl94R8yaMPRggR6KAa7__T1d3i_vjcQ3qZNjgUYvMtpCgTIU9ag4RdL/s1600/WJslider1.jpg" alt="slide1" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 1</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
</div>
</div>
<div class="modal fade" id="info_gambar1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">1. Header Keterngan Gambar Pertama</h4>
</div>
<div class="modal-body">
<p>Keterangan 1<br/>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Gambar Slider 1 -->
<div class="item">
<img data-toggle="modal" data-target="#info_gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-65ATwtkC5DHanXcAJMA1bCIlVRixrZe9G9uztpgpqfZ8bwB4p8UudCj5ebec7of1uHMWFp9ECiKmfD5Os4RmZZCim8WVWnUCsmjuHbWHp_7tb3QQ4emKuRkdN2gISlU6BwUBp_A2dnv/s1600/WJslider2.jpg" alt="slide2" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 2</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
</div>
</div>
<div class="modal fade" id="info_gambar2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">2. Header Keterngan Gambar Pertama</h4>
</div>
<div class="modal-body">
<p>Keterangan 2<br/>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Gambar Slider 1 -->
<div class="item">
<img data-toggle="modal" data-target="#info_gambar3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2HmKddCVf06f1GsuEDEqrMTuFtNra3z9qPdAkZlXsyK9kymk3QpoJyyRAMweT_eY8e4b2l2EGdQHrAMGy90HmDcq6qk8JCrRhnMMN4jCW_26fn-MbzoH9tbl-1DlBJg3uyHlhh29urSnv/s1600/WJslider3.jpg" alt="slide3" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 3</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
</div>
</div>
<div class="modal fade" id="info_gambar3" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">3. Header Keterngan Gambar Pertama</h4>
</div>
<div class="modal-body">
<p>Keterangan 3<br/>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Panah Kanan-Kiri -->
<a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Kembali</span>
</a>
<a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Lanjut</span>
</a>
</div>
</div>
</body>
</html>Sepertinya itu saja sudah cukup gan, semoga membantu ^_^
0 komentar:
Post a Comment