Cycle2

gistfile1.html

  <script src="@routes.Assets.at("javascripts/jquery-1.8.3.min.js")"></script>
	<script src="@routes.Assets.at("javascripts/bootstrap.js")"></script>
	<script src="@routes.Assets.at("javascripts/ios-orientationchange-fix.js")"></script>
	<script src="@routes.Assets.at("javascripts/jquery-ui-1.9.2.custom.min.js")"></script>	
	<script src="@routes.Assets.at("javascripts/jquery.cycle2.js")"></script>
	<script src="@routes.Assets.at("javascripts/jquery.cycle2.loader.js")"></script>	
	<script src="@routes.Assets.at("javascripts/jquery.cycle2.center.js")"></script>
	<script src="@routes.Assets.at("javascripts/jquery.cycle2.swipe.js")"></script>
	<script src="@routes.Assets.at("javascripts/jquery.slidePanel.js")"></script>
	<script src="@routes.Assets.at("javascripts/ios6fix.js")"></script>
	<script src="@routes.Assets.at("javascripts/mousetrap.min.js")"></script>
	<script src="@routes.Assets.at("javascripts/jquery.ui.touch-punch.js")"></script>
	<script src="@routes.Assets.at("javascripts/jquery.mousewheel.min.js")"></script>
  
    	<div id="cycle-slideshow" class="cycle-slideshow"
						data-cycle-loader="wait"
						data-cycle-center-horz=true
						data-cycle-timeout="0"
						data-cycle-fx="fadeout"
						data-cycle-manual-speed="50"
						data-cycle-swipe=true
						data-allow-wrap=false
						data-cycle-prev="#prev"
						data-cycle-next="#next"
						data-cycle-caption-template="{{slideNum}} / @images.size()"
						data-cycle-caption=".custom-caption"
							
		>
    		    								
			@for(image <- images) {	
				<img src='@routes.Resources.getResizedJpegImage(study.getInstitution().getCode(),study.getStudyInstanceUID(),image.getSeries().getSeriesInstanceUID(),image.getSopInstanceUID())' />
			}	
				
		</div>