<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Test.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<div>http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/index.html</div>
<link rel="stylesheet" href="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var totalPanels = $(".scrollContainer").children().size();
var regWidth = $(".panel").css("width");
var regImgWidth = $(".panel img").css("width");
var regTitleSize = $(".panel h2").css("font-size");
var regParSize = $(".panel p").css("font-size");
var movingDistance = 300;
var curWidth = 350;
var curImgWidth = 326;
var curTitleSize = "20px";
var curParSize = "15px";
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
$panels.css({ 'float': 'left', 'position': 'relative' });
$("#slider").data("currentlyMoving", false);
$container
.css('width', ($panels[0].offsetWidth * $panels.length) + 100)
.css('left', "-350px"); /* for middle image */
var scroll = $('#slider .scroll').css('overflow', 'hidden');
function returnToNormal(element) {
$(element)
.animate({ width: regWidth })
.find("img")
.animate({ width: regImgWidth })
.end()
.find("h2")
.animate({ fontSize: regTitleSize })
.end()
.find("p")
.animate({ fontSize: regParSize });
};
function growBigger(element) {
$(element)
.animate({ width: curWidth })
.find("img")
.animate({ width: curImgWidth })
.end()
.find("h2")
.animate({ fontSize: curTitleSize })
.end()
.find("p")
.animate({ fontSize: curParSize });
}
//direction true = right, false = left
function change(direction) {
//if not at the first or last panel
if ((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }
//if not currently moving
if (($("#slider").data("currentlyMoving") == false)) {
$("#slider").data("currentlyMoving", true);
var next = direction ? curPanel + 1 : curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
$(".scrollContainer")
.stop()
.animate({
"left": movement
}, function() {
$("#slider").data("currentlyMoving", false);
});
returnToNormal("#panel_" + curPanel);
growBigger("#panel_" + next);
curPanel = next;
//remove all previous bound functions
$("#panel_" + (curPanel + 1)).unbind();
//go forward
$("#panel_" + (curPanel + 1)).click(function() { change(true); });
//remove all previous bound functions
$("#panel_" + (curPanel - 1)).unbind();
//go back
$("#panel_" + (curPanel - 1)).click(function() { change(false); });
//remove all previous bound functions
$("#panel_" + curPanel).unbind();
}
}
// Set up "Current" panel and next and prev
growBigger("#panel_3");
var curPanel = 3;
$("#panel_" + (curPanel + 1)).click(function() { change(true); });
$("#panel_" + (curPanel - 1)).click(function() { change(false); });
//when the left/right arrows are clicked
$(".right").click(function() { change(true); });
$(".left").click(function() { change(false); });
$(window).keydown(function(event) {
switch (event.keyCode) {
case 13: //enter
$(".right").click();
break;
case 32: //space
$(".right").click();
break;
case 37: //left arrow
$(".left").click();
break;
case 39: //right arrow
$(".right").click();
break;
}
});
});</script>
<link rel="stylesheet" type="text/css" href="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/fancybox/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/fancybox/fancybox/jquery.fancybox-1.2.6.pack.js%22%3E%3C/script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom2").fancybox({
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500,
'overlayOpacity' : 0.6,
'overlayColor' : '#000'
});
});
</script>
<div id="slider-outer" >
<!-- Slider Starts -->
<div id="slider">
<img class="scrollButtons left" src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/images/arrow-left.png" alt="" />
<!-- Scroll Starts Here -->
<div style="overflow: hidden;" class="scroll">
<!-- Scroll Container Starts -->
<div class="scrollContainer">
<!-- Panel Starts -->
<!-- Panel Ends -->
<%string[] str = ViewData["Message"] as string[]; string[] strTitle = ViewData["strTitle"] as string[]; string[] strCurrentPrice = ViewData["strCurrentPrice"] as string[];
for (int i = 0; i < str.Length; i++)
{ %>
<div class="panel" id="panel_<%=i+1 %>">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="<%=str[i] %>" alt="<%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %>" />
<p>
<a class="zoom2" target="_blank" rel="group6"title='<%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %>'><%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %></a>
</p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<%} %>
</div>
<!-- SCroll Container Ends -->
</div>
<!-- Scroll Ends Here -->
<img class="scrollButtons right" src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/images/arrow-right.png" alt="right" />
</div>
<!-- Slider Ends -->
</div>
</asp:Content>