Create iView Slider Image Responsive With jQuery

Assalamu Alaikum Wr.Wb.
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^&trade;</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&amp;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>
<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>

KET::
- Silahkan rubah sesuai kebutuhan masing-masing!

Selamat Mencoba, dan semoga tutorial ini bermanfaat bagi kita semua! Keep Blogging ^^

Please rate this article: