Professional Joomla templates and extensions club

<script type="text/javascript" src="http://www.joomlajunkie.com/demo/commercial/mocha/modules/mod_jj_superslider/superslider/jquery-1.2.6.min.js"></script>

  <script type="text/javascript" src="http://www.joomlajunkie.com/demo/commercial/mocha/modules/mod_jj_superslider/superslider/jquery.flow.1.2.js"></script>
  <script type="text/javascript">

    var $jj = jQuery.noConflict();

    //preload images function
    jQuery.preloadImages = function(){
        for(var i = 0; i<arguments.length; i++) {
            jQuery("<img>").attr("src", arguments[i]);
        }
    }

    $jj.preloadImages("images/stories/headers/6.jpg","images/stories/headers/5.jpg","images/stories/headers/3.jpg","images/stories/headers/2.jpg","images/stories/headers/1.jpg");

    $jj(document).ready(function(){

        $jj("#myController_mod137").jFlow({
        slides: "#mySlides_mod137",
        controller: ".jFlowControl_mod137", // must be class, use . sign
        slideWrapper : "#jFlowSlide_mod137", // must be id, use # sign
        selectedWrapper: "jFlowSelected_mod137", // just pure text, no sign
        width: "958px",
        height: "330px",
        duration: 400,
        prev: ".jFlowPrev_mod137", // must be class, use . sign
        next: ".jFlowNext_mod137" // must be class, use . sign
    	}),
        $jj("#slider-content_mod137").hover(function() {$jj(".innerController_mod137").animate({opacity: "show"}, "slow");
        },
        function() {$jj(".innerController_mod137").animate({opacity: "hide"}, "slow");
        });

    });
  </script>

<div id="jjUser1">
	<div class="jjSpan1 jjClear">
		<div class="moduletablenopadding">
			<noscript><span class="warning">JoomlaJunkie SuperSlider module requires Javascript to be enabled.</span></noscript>
			<div id="slider-content_mod137">
				<!-- First we setup the user (number) controls -->
				<div id="myController_mod137">
					<div style="display: none;" class="innerController_mod137">
						<span class="jFlowControl_mod137 jFlowSelected_mod137"><span class="nav_title_mod137">Mocha</span> |</span> <span class="jFlowControl_mod137"><span class="nav_title_mod137">About Mocha</span> |</span> <span class="jFlowControl_mod137"><span class="nav_title_mod137">Around the world</span> |</span> <span class="jFlowControl_mod137"><span class="nav_title_mod137">Ingredients</span> |</span> <span class="jFlowControl_mod137"><span class="nav_title_mod137">Preparation</span> |</span>
					</div>
				</div><!--This is where we add the flow slides -->
				<div style="overflow: hidden; position: relative; width: 958px; height: 330px;" id="jFlowSlide_mod137">
					<div id="jFlowSlide_mod137"></div><!-- End mySlides -->
					<div style="overflow: hidden; position: relative; width: 4790px; height: 330px; margin-left: 0px;" id="mySlides_mod137">
						<!-- Slider START-->
						<div style="overflow: auto; position: relative; width: 958px; height: 330px; float: left;" class="jFlowSlideContainer">
							<div class="jFlowSlideContainer_mod137">
								<div class="jFlowSlideContainer">
									<div>
										<img alt="Mocha" src="/demo/commercial/mocha/images/stories/headers/1.jpg">
									</div>
								</div>
							</div>
						</div>
						<div style="overflow: auto; position: relative; width: 958px; height: 330px; float: left;" class="jFlowSlideContainer">
							<div class="jFlowSlideContainer_mod137">
								<div class="jFlowSlideContainer">
									<div>
										<img alt="About Mocha" src="/demo/commercial/mocha/images/stories/headers/2.jpg">
									</div>
								</div>
							</div>
						</div>
						<div style="overflow: auto; position: relative; width: 958px; height: 330px; float: left;" class="jFlowSlideContainer">
							<div class="jFlowSlideContainer_mod137">
								<div class="jFlowSlideContainer">
									<div>
										<img alt="Around the world" src="/demo/commercial/mocha/images/stories/headers/3.jpg">
									</div>
								</div>
							</div>
						</div>
						<div style="overflow: auto; position: relative; width: 958px; height: 330px; float: left;" class="jFlowSlideContainer">
							<div class="jFlowSlideContainer_mod137">
								<div class="jFlowSlideContainer">
									<div>
										<img alt="Ingredients" src="/demo/commercial/mocha/images/stories/headers/5.jpg">
									</div>
								</div>
							</div>
						</div>
						<div style="overflow: auto; position: relative; width: 958px; height: 330px; float: left;" class="jFlowSlideContainer">
							<div class="jFlowSlideContainer_mod137">
								<div class="jFlowSlideContainer">
									<div>
										<img alt="Preparation" src="/demo/commercial/mocha/images/stories/headers/6.jpg">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div><!-- End jFlowSlide -->
				<!-- Lastly we add the previous & next navigation buttons - the images are handled by image replacement in the css -->
				<div class="dir_buttons_mod137">
					<span class="jFlowPrev_mod137">Previous</span><span class="jFlowNext_mod137">Next</span>
				</div>
			</div>
		</div>
	</div>
</div>