Jquery Image Slider

Fade in/out Image Effect

Here we will explain you a Fade in/out Image effect in "Jquery Image Slider" with minimum coding and settings

  • yourname
  • yourname
  • yourname
  • yourname
  • yourname
  • yourname
  • yourname
  • yourname
Download the Library NOW!

Setup

1. Load jQuery and include Jquery Image Slider plugin files

To use Jquery Image Slider, you need to make sure both the Jquery Image Slider and jQuery 1.7 or higher scripts are included.

<!-- Important Jquery Image Slider stylesheet -->
<link rel="stylesheet" href="jquery-image-player-min.css">

<!--  jQuery 1.7+  -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<!--  jQuery 1.8+  -->
<script type="text/javascript" src="jquery-ui.min.js"></script>

<!-- Include js plugin -->
<script type="text/javascript" src="jquery-image-player-min.js"></script>

2. Set up your HTML

You need a special markup "data-duration", using this attribute you can hold the timing of your slide. All you need is to wrap your li(Jquery Image Slider works with only li element) inside the container element. Any type of ID "uipg-video-player" is mandatory to apply proper styles that come from jquery-image-player-min.css file.

You need a new markup "data-effect", using this attribute you can fade in/out your section.

Note: You can only have "data-duration" markup on the main LI

Expand
<div id="demo1">
<ul>
    <li data-duration="0">
        <div class="contentArea"><img src="demo-images/img1.png" class="img1" /></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img1.png" class="img1" /></div>
    </li>
    <li data-duration="25">
        <div class="contentArea"><img src="demo-images/img1.png" class="img1" /><img src="demo-images/img2.png" class="img1" data-effect="fadeIn" /></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img2.png" class="img1" /></div>
    </li>
    <li data-duration="25">
        <div class="contentArea"><img src="demo-images/img2.png" class="img1" /><div class="usernameText" data-effect="fadeIn">yourname</div></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img2.png" class="img1" /><div class="usernameText">yourname</div></div>
    </li>
    <li data-duration="25">
        <div class="contentArea"><img src="demo-images/img2.png" class="img1" /><img src="demo-images/img3.png" class="img1" data-effect="fadeIn" /><div class="usernameText">yourname</div></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img3.png" class="img1" /><div class="usernameText">yourname</div></div>
    </li>
    <li data-duration="25">
        <div class="contentArea"><img src="demo-images/img3.png" class="img1" /><div class="usernameText">yourname</div><div class="passwordText" data-effect="fadeIn" style="width:60px;"></div></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img3.png" class="img1" /><div class="usernameText">yourname</div><div class="passwordText" style="width:60px;"></div></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img4.png" class="img1" /><div class="usernameText">yourname</div><div class="passwordText" style="width:60px;"></div></div>
    </li>
    <li data-duration="25">
        <div class="contentArea" data-effect="fadeOut"><img src="demo-images/img4.png" class="img1" /><div class="usernameText">yourname</div><div class="passwordText" style="width:60px;"></div></div>
    </li>
    <li data-duration="25">
        <div class="contentArea" data-effect="fadeIn"><img src="demo-images/img5.png" class="img1" /></div>
    </li>
    <li data-duration="1000">
        <div class="contentArea"><img src="demo-images/img5.png" class="img1" /></div>
    </li>
</ul>
</div>

3. Do the Styling

Now call the styling codes for styling.

<style>
	#demo1 .galWrapper{background:#2f4159;}
	#demo1 .contentArea{position: absolute; top: 10px; left:50px; /*width:300px; height:330px; display:block;*/ }
	#demo1 .img1{position: absolute; top:0; left:0;}
	#demo1 .usernameText, #demo1 .passwordText{position: absolute; top:107px; left:35px; z-index:1; font-size:15px; color:#009a9a; font-weight:bold; font-family:arial; height:20px; width:auto; display:inline-block;}
	#demo1 .usernameText img, #demo1 .passwordText img{position:relative; float:none;}
	#demo1 .passwordText{top:162px; width:10px; background:url(../demo-images/password.png) repeat-x 0 0; }
	#demo1 .pipe{position:relative;}
	#demo1 .pipe:before{content:''; position:absolute; top:0; right:-4px; width:5px; height:20px; display:block; z-index:1; background:url(../demo-images/pipe.gif) repeat-x 0 0; }
</style>

4. Call the plugin javascript

To use Jquery Image Slider, you need to make sure both the Jquery Image Slider and jQuery 1.7 or higher scripts are included.

<script type="text/javascript">
$(function(){
	$('#demo1').jsVideoPlayer({
		showTitle : false,
		showVolumeControl : false,
		playerWidth:400,
		playerHeight:340
	});
});
</script>

Player Demos

comments powered by Disqus