Update README.md

ParaSlide
=========

Combining NivoSlider with jParallax to a new attractive content slider.

Usage
-------------------

Include these awesome libraries to your page

<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/nivo.slider.pack.js"></script>
<script type="text/javascript" src="/js/parallax.min.js"></script>
<script type="text/javascript" src="/js/event.frame.js"></script>

http://github.com/stephband/jparallax <br/>
http://dev7studios.com/nivo-slider


HTML
--------------

Slider 

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <div></img src="" title="#htmlcaption1"/></div> <nobr/> NOTE! img src is empty 
        <div></img src="" title="#htmlcaption2"/></div> <nobr/> NOTE! img src is empty 
    </div>
    <div id="htmlcaption1" class="nivo-html-caption">
        <div id="caption_title">Caption Title number one</div>
        <a id="link" href="#">More...</a>
    </div>
    <div id="htmlcaption2" class="nivo-html-caption">
        <div id="caption_title">Caption Title number two</div>
        <a id="link" href="#">More...</a>
    </div>
    
</div> 

<!-- Parallax -->
    
<div class="parallax-viewport" style="display:block;" name="#htmlcaption1"> <!-- NOTE! 1st div display block  -->

    <div class="parallax">
        <div class="parallax-layer" style="width:1100px; height:300px;">
            <img src="/images/bg_1.png" />
        </div>
        
        <div class="parallax-layer" style="width:1080px; height:300px;">
            <img src="/images/img_1.png" />
        </div>
    </div>
    
</div>

<div class="parallax-viewport" style="display:none;" name="#htmlcaption2"> <!-- NOTE! the rest display none  -->

		<div class="parallax">
		    <div class="parallax-layer" style="width:1100px; height:300px;">
		        <img src="/images/bg_2.png" />
		    </div>

		    <div class="parallax-layer" style="width:1080px; height:300px;">
		        <img src="/images/img_2.png" />
		    </div>
    </div>

</div>
    
------------------------------

<style>

<!-- All essential styles you can get with the related libraries from their project repositories, 
     as well as can be easily written by yourselves.
     The only thing need to be mentioned is that jParallax wrapper should be positioned "absolute"
     and should underlay the NivoSlider, that's how we get our content inside the slider. -->

</style>

------------------------------

<!-- And finally  initialize logic at top of your page. The whole mess is about just one tiny thing))) 
     to trigger an action that will show non-displayed absolutely positioned divs in the right order,
     time and related to proper html-captions. That's it. That's actually how any image slider can be 
     converted to content slider. This one is ParaSlide))) Hope it will help somebody some day. -->

<script type="text/javascript">

    $(document).ready(function() {
        $('#slider').nivoSlider({
            pauseTime:10000,

            afterLoad: function() {
                $('.parallax .parallax-layer').parallax({
                mouseport: $('html')
                });
                $('#slider .nivo-caption').css("opacity","1");
            },

            beforeChange: function() {
                $(".parallax-viewport").fadeOut(500);
                $('#slider .nivo-caption').css("opacity","0");
            },

            afterChange: function() {
                current_title = $('#slider').data('nivo:vars').currentImage.attr('title');

                var relevant_viewport = $('.parallax-viewport[name='+current_title+']');      
                
                
                $(relevant_viewport).fadeIn(1000);
                $('#slider .nivo-caption').css("opacity","1")

            },    
        });    

      });       

</script>