Friday, May 3, 2013

Tutorial : Image Slide Show [Like me]

Large

こんにちは, 안녕하세요 , Assalamualaikum. 

Ok , Atin terpaksa buat tutorial awal sikit sebab malam ni ada hal sikit nak pergi dinner ngn kuaga LOL XD . Btw sorry lambat nak buat hih.. Padahal dah lama orang ni req huhu..


So untuk tutorial kali ni pulak di namakan Image Slide Show . Rasanya kalau blogskin maybe pernah jumpa kan slide show ni? huhu . Atin ambik dari blogskin yup i got boy tu huhu . So atin buat menjadi hihi . Kalau ada sesiapa yang tak tau lagi u bleh click preview bawah ni

--> LIVE PREVIEW <--


  • Blogskin/classic template : Boleh paste di mana sahaja 
  • Template designer : Paste codes ni dalam Add Gadget




<style>
/*
 * jQuery Nivo Slider v3.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * Mhel, of html-and-etc.tumblr.com tweaked the original codes given 
 */

/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:500px;
height:400px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
    font-size:14px;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
    display:block;
    width:31px;
    height:34px;
    background:url('http://static.tumblr.com/y0x5xm1/ei3mcx19v/arrows.png') no-repeat;
    text-indent:-9999px;
    border:0;
    
}

.nivoSlider .nivo-directionNav a {
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }

a.nivo-nextNav {background-position:-30px 0;right:15px;}

a.nivo-prevNav {    left:15px;}

.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

</style>



<!-- START NIVO SLIDER -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://static.tumblr.com/y0x5xm1/WdCmcx05a/jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
    var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>

    <script src="http://static.tumblr.com/y0x5xm1/e1gmcx29e/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- END NIVO SLIDER -->
<br />
<center>

<!-- START NIVO SLIDER -->

<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="slider">
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
    
<!-- END NIVO SLIDER -->
</div>
</div>
</div>
</center>

merah : URL image
oren : width,height

6 comments:

Farah Dini said...

kak atin, sye buat tak menjadi la . nanti gambarnya tak bergerak .

Arrien ::@man!:: said...

Thankz unnie ^^ mmg smart :D

Atin Tory said...

@Farah Dini : huh? akak buat jadi? hmmm :(

Atin Tory said...

@Arrien ::@man!:: : Ur welcome dongsaeng:D

nadia farhana said...

waahh2 nak buat jugak boleh :)

Atin Tory said...

@nadia farhana : cuba lah buat :)