Image slider with random animation effects using Jquery | 2my4edge

29 August 2013

Image slider with random animation effects using Jquery

Image slider for web page, this is what most of them searching for make their static web site with more animation and attractive, that's why i'm going to make a small web slider with more animation effects. such as fold, slice, boxrain, fade, etc.. here i'm going to use novi slider jquery to make this image slider. this very flexiable and well supported image slider for all kind of web. let's try this image slider. 
Image slider with random animation effects using Jquery

DOWNLOAD                LIVE DEMO
yeah, in this image slider makes the slider more effective and attractive. it has more animation effects. we can make it as single and multiple effects. let me explain the details about the code of image slider with animation effects. 

CODE
<div class="container"> 
  <div id="slider" class="nivoSlider">
    <a href="http://www.2my4edge.com">
      <img src="images/2.jpg" alt="" title="Sending my heart to you.." />
    </a>
      <img src="images/3.jpg" alt="" title="World map :)" />
      <img src="images/4.jpg" alt="" title="Boy with Joy.. :)" />
      <img src="images/1.jpg" alt="" title="Robotic world" />
      <img src="images/5.jpg" alt="" title="Touching of True love.." />
  </div>
</div>
as like the above just call the image with img tag, and the title will be comes as caption of the image.

SCRIPT
this is also comes in the same page. here we are going to use nivo.slider.pack.js.
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
  effect: 'random', // Specify sets like: 'fold,boxRainGrowReverse,sliceDown'
  slices: 35, // For slice animations
  boxCols: 8, // For box animations
  boxRows: 4, // For box animations
  animSpeed: 3500, // Slide transition speed
  pauseTime: 7000, // How long each slide will show
  startSlide: 0, // Set starting Slide (0 index)
  directionNav: true, // Next & Prev navigation
  directionNavHide: true, // Only show on hover
  controlNav: true, // 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.9, // Universal caption opacity
  prevText: 'Prev', // Prev directionNav text
  nextText: 'Next', // Next directionNav text
  randomStart: false, // Start on a random slide
  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>
you can get clear idea from what i have given in the comment line after the double slash, you can modify the above all as what you need.

CSS
here the css is also holding the main part with this image slider. you don't want change the css. if you want to mofity something as you need. you can change it. 
* { 
margin:0px;
padding:0px;
}
.container { 
width:900px;
padding:5px;
margin:0 auto;
margin-top:50px;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* 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%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
padding-top:10px;
left:0px;
top:0px;
color:#efd0df;
opacity:1; /* Overridden by captionOpacity setting */
height: 41px;
width: 100%;
font-size:20px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
z-index:8;
}
.nivo-caption p {
padding:5px;
padding-left: 30px;
margin:0;
}
.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%;
color:#FFF;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
position:absolute;
text-align:center;
margin-left:360px;
bottom:0px;
}
.nivo-controlNav a {
position:relative;
z-index:9;
margin-left:10px;
color:#999;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

2 comments:

Subscribe to: Post Comments (Atom)
^