Kembali lg nih saya akan memberikan tutorial mengenai 'Membuat Slider Image Responsive With jQuery Plugin' Berikut Priview Image dan Demonya! :D
Jika sobat belum puas dengan gambar diatas, silahkan lihat demonya disini,...
Nah jika sobat tertarik untuk mencobanya, disini saya telah memberikan kode CSS, HTML & SCRIPT!
CSS ::
/* The slider */
.iviewSlider {
overflow: hidden;
}
/* The timer in the Slider */
#iview-timer {
position: absolute;
z-index: 100;
border-radius: 5px;
cursor: pointer;
}
#iview-timer div {
border-radius: 3px;
}
/* The Preloader in the Slider */
#iview-preloader {
position: absolute;
z-index: 1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #000 1px solid;
padding: 1px;
width: 100px;
height: 3px;
}
#iview-preloader div {
float: left;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
height: 3px;
background: #000;
width: 0px;
}
/* The strips and boxes in the Slider */
.iview-strip {
display:block;
position:absolute;
z-index:5;
}
.iview-block {
display:block;
position:absolute;
z-index:5;
}
/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.iview-prevNav {
left:0px;
}
.iview-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
position:absolute;
z-index:9;
}
.iview-controlNav a {
z-index:9;
cursor:pointer;
}
.iview-controlNav a.active {
font-weight:bold;
}
.iview-controlNav .iview-items ul {
list-style: none;
}
.iview-controlNav .iview-items ul li {
display: inline;
position: relative;
}
.iview-controlNav .iview-tooltip {
position: absolute;
}
/* The captions in the Slider */
.iview-caption {
position:absolute;
z-index:4;
overflow: hidden;
cursor: default;
}
/* The video show in the Slider */
.iview-video-show {
background: #000;
position: absolute;
width: 100%;
height: 100%;
z-index: 101;
}
.iview-video-show .iview-video-container {
position: relative;
width: 100%;
height: 100%;
}
.iview-video-show .iview-video-container a.iview-video-close {
position: absolute;
right: 10px;
top: 10px;
background: #222;
color: #FFF;
height: 20px;
width: 20px;
text-align: center;
line-height: 29px;
font-size: 22px;
font-weight: bold;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.iview-video-show .iview-video-container a.iview-video-close:hover {
background: #444;
}
#iview {
display: block;
width: 900px;
height: 500px;
background: #000;
background: rgba(0, 0, 0, 0.7);
padding: 5px;
border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;
position: relative;
-webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
margin: 40px auto;
}
#iview .iviewSlider {
display: block;
width: 900px;
height: 500px;
overflow: hidden;
border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;
}
.iview-controlNav {
position: absolute;
bottom: 30px;
left: 347px;
height: 44px;
}
.iview-controlNav a {
text-indent: -9999px;
}
.iview-controlNav a.iview-controlPrevNav {
float: left;
width: 50px;
height: 44px;
background: url('http://iprodev.com/iview/img/slider-controls.png') no-repeat;
}
.iview-controlNav a.iview-controlNextNav {
float: left;
width: 50px;
height: 44px;
background: url('http://iprodev.com/iview/img/slider-controls.png') no-repeat -50px 0px;
}
.iview-controlNav div.iview-items {
float: left;
padding: 0px 10px 0px 10px;
height: 44px;
background: url('http://iprodev.com/iview/img/nav-bg.png');
}
.iview-controlNav a.iview-control {
padding: 0px;
float: left;
width: 11px;
height: 12px;
background: url('http://iprodev.com/iview/img/bullets.png') no-repeat;
line-height: 0px;
}
.iview-controlNav a.iview-control.active {
background-position: 0px -12px;
}
.iview-caption {
background: url('http://iprodev.com/iview/img/caption-bg.png');
color: #FFF;
border-radius: 3px;
padding: 10px 15px;
font-family: Verdana;
font-size: 12px;
text-shadow: #000 1px 1px 0px;
}
.iview-caption.caption1 {
font-size: 36px;
font-weight: bold;
height: 45px;
}
.iview-caption.caption2 {
background: #00b4ff;
font-size: 36px;
font-weight: bold;
text-shadow: none;
}
.iview-caption.caption3 {
background: #FFF;
color: #000;
font-size: 26px;
text-shadow: none;
}
.iview-caption.caption4 {
font-size: 22px;
font-weight: bold;
}
.iview-caption.caption5 {
background: #c4302b;
box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;
font-size: 20px;
font-weight: bold;
text-shadow: none;
}
.iview-caption.caption6 {
font-size: 18px;
}
.iview-caption.caption7 {
text-align: left;
font-size: 11px;
color: #888;
border-radius: 0px;
}
.iview-caption.caption7 div {
line-height: 200%;
}
.iview-caption.caption7 h3 {
margin-bottom: 20px;
color: #FFF;
}
.iview-caption.blackcaption {
background: #000;
box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;
text-shadow: none;
}
#iview-preloader {
border: #666 1px solid;
width: 150px
}
#iview-preloader div {
background: #666;
}
.iview-controlNav div.iview-items ul li {
padding: 0px;
float: left;
width: 11px;
height: 12px;
margin: 3px;
margin-top: 16px;
line-height: 0px;
}
#iview #iview-tooltip {
display: none;
position: absolute;
background: url('http://iprodev.com/iview/img/tooltip.png') no-repeat;
width: 124px;
height: 90px;
bottom: 30px;
left: -67px;
padding: 10px;
z-index: 100;
}
#iview #iview-tooltip div.holder {
display: block;
width: 124px;
height: 84px;
overflow: hidden;
border-radius: 2px;
}
#iview #iview-tooltip div.holder div.container {
display: block;
width: 4000px;
}
#iview #iview-tooltip div.holder div.container div {
float: left;
display: block;
overflow: hidden;
width: 124px;
height: 84px;
left: -50%;
text-align: center;
}
#iview #iview-tooltip div.holder div.container div img {
height: 84px;
margin: 0 auto;
}
HTML ::
<div id="iview">
<div data-iview:image="http://iprodev.com/iview/photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
<div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>™</sup></div>
<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">The world's most awesome jQuery Image & Content Slider</div>
<div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Presented by <b>Hemn Chawroka</b></i></div>
</div>
<div data-iview:image="http://iprodev.com/iview/photos/photo2.jpg" data-iview:transition="zigzag-top,strip-left-fade" data-iview:pausetime="3000">
<div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
<div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
</div>
<div data-iview:image="http://iprodev.com/iview/photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
<iframe src="http://player.vimeo.com/video/11475955?byline=1&portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Video</div>
<div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Support</div>
</div>
<div data-iview:image="http://iprodev.com/iview/photos/photo3.jpg">
<div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Some of iView's Options:</div>
<div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Touch swipe for iOS and Android devices</div>
<div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">Image And Thumbs Fully Resizable</div>
<div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">Customizable Transition Effect</div>
<div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">Freely Positionable and Stylable Captions</div>
<div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">Cross Browser Compatibility!</div>
</div>
<div data-iview:image="http://iprodev.com/iview/photos/photo4.jpg">
<div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
</div>
<div data-iview:image="http://iprodev.com/iview/photos/photo5.jpg">
<div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">What are you waiting for?</div>
<div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Get it Now!</div>
</div>
</div>
SCRIPT ::
<script src="http://iprodev.com/iview/js/jquery-1.7.1.min.js"></script>KET::
<script type="text/javascript" src="http://iprodev.com/iview/js/raphael-min.js"></script>
<script type="text/javascript" src="http://iprodev.com/iview/js/jquery.easing.js"></script>
<script src="http://iprodev.com/iview/js/iview.js"></script>
<script>
$(document).ready(function(){
$('#iview').iView({
pauseTime: 4000,
directionNav: false,
controlNav: true,
tooltipY: -15
});});
</script>
- Silahkan rubah sesuai kebutuhan masing-masing!
Selamat Mencoba, dan semoga tutorial ini bermanfaat bagi kita semua! Keep Blogging ^^
Posting Komentar