ASP.NET AJAX Control Toolkit Slideshow Extender - 在可定制的新窗口中弹出图像
2.89/5 (6投票s)
如何使 ASP.NET AJAX Control Toolkit Slideshow Extender 在一个可定制的新窗口中弹出显示的图像。
引言
我在浏览消息板时，看到有人寻求有关 ASP.NET AJAX Control Toolkit Slideshow Extender 的帮助。基本上，这个人希望能够点击幻灯片中当前显示的图像并使其弹出。我决定研究一下，因为我很快想以相同的方式使用幻灯片扩展器。
如何获取图像路径？
首先，我使用 JavaScript 获取图像的源或路径。
// Use this to get the Source of the Image from the control.
//(where it is called Image1, change this to what ever you called it)
$get("<%=Image1.ClientID %>").src
如何使图像可点击
这是使图像可点击的方法（我在 PageLoad 中设置了它），并且我已指示它调用函数 PopupImage()
// Set the image so it can accept a click, and tell it to call "PopupImage()"
//(where it is called Image1, change this to what ever you called it)
$addHandler($get("<%=Image1.ClientID %>"), "click", popupImage);
JavaScript 函数
这是完整的 JavaScript 函数，从 <script> 到 </script>，因此您可以直接将其粘贴到您的页面中。
<script type="text/javascript" language="javascript">
function PopupImage() {
// This is where you set how wide you want your popup window
var awidth = 800;
// This is where you set how high you want your popup window
var aheight = 600;
// This calculates the middle of the screen Horizontally
var leftVal = (screen.width / 2) - (awidth / 2);
// This calculates the middle of the screen Vertically
var topVal = (screen.height / 2) - (aheight / 2);
// This is where you set it to show scrollbars.
var showScrollbars = 0; // Hide Scrollbars
//var showScrollbars = 1; // Show Scrollbars
// This is where you set it to be resizable or not.
var isResizable = 0; //Not resizable
//var isResizable = 1; //Is resizable
// This is where you set it to show Toolbars.
var showToolbar = 0; // Hide Toolbar
//var showToolbar = 1; // Show Toolbar
// This is where you set it to show Status or not.
var showStatus = 0; // Hide Status
//var showStatus = 1; // Show Status
// This is where you tell the window to popup
window.open($get("<%=Image1.ClientID %>").src
,''
,'scrollbars = ' + showScrollbars +
', height = ' + aheight +
', width = ' + awidth +
', resizable = ' + isResizable +
', toolbar = ' + showToolbar +
', status = ' + showStatus +
', left = ' + leftVal +
', top = ' + topVal);
}
function pageLoad() {
// Set the image so it can accept a click,
// and tell it to call "popupImage"
$addHandler($get("<%=Image1.ClientID %>"), "click", popupImage);
}
</script>
我的使用方法
如您在下面的 JavaScript 中看到的，您可以自定义弹出窗口
// This is where you set how wide you want your popup window
var awidth = 800;
// This is where you set how high you want your popup window
var aheight = 600;
// This calculates the middle of the screen Horizontally
var leftVal = (screen.width / 2) - (awidth / 2);
// This calculates the middle of the screen Vertically
var topVal = (screen.height / 2) - (aheight / 2);
// This is where you set it to show scrollbars.
var showScrollbars = 0; // Hide Scrollbars
//var showScrollbars = 1; // Show Scrollbars
// This is where you set it to be resizable or not.
var isResizable = 0; //Not resizable
//var isResizable = 1; //Is resizable
// This is where you set it to show Toolbars.
var showToolbar = 0; // Hide Toolbar
//var showToolbar = 1; // Show Toolbar
// This is where you set it to show Status or not.
var showStatus = 0; // Hide Status
//var showStatus = 1; // Show Status
如果您想在新窗口中显示滚动条，可以取消注释包含 // Show ScrollBars 的行，并注释掉包含 // Hide Scrollbars 的行（如下所示）
// Scroll bars are Hidden
var showScrollbars = 0; // Hide Scrollbars
//var showScrollbars = 1; // Show Scrollbars
// Scroll bars are Visible
//var showScrollbars = 0; // Hide Scrollbars
var showScrollbars = 1; // Show Scrollbars
下面的代码只是为了展示我是如何使用的。（如您所见，我没有通过数据库填充幻灯片。我使用了 ASP Ajax Control Toolkit 示例站点附带的示例。）
<%@ Page Language="C#" AutoEventWireup="true" Title="Slideshow Popup Sample" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body> <form id="form1" runat="server">
<script runat="Server" type="text/C#">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide
("images/Blue hills.jpg", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),
new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),
new AjaxControlToolkit.Slide
("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),
new AjaxControlToolkit.Slide
("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")};
}
</script>
<div class="demoarea">
<div class="demoheading">
Slideshow with popup image
<br />
<small>Just click the image displayed and this will
popup that image in a customized window </small>
<br />
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1"
runat="server" />
<div style="text-align: center">
<asp:Label runat="Server" ID="imageTitle"
CssClass="slideTitle" /> <br />
<asp:Image ID="Image1" runat="server"
Height="300" Style="border: 1px solid black;
width: auto" ImageUrl="~/SlideShow/images/Blue hills.jpg"
AlternateText="Blue Hills image" />
<asp:Label runat="server" ID="imageDescription"
CssClass="slideDescription"> </asp:Label> <br />
<br />
<asp:Button runat="Server" ID="prevButton"
Text="Prev" Font-Size="Larger" />
<asp:Button runat="Server" ID="playButton"
Text="Play" Font-Size="Larger" />
<asp:Button runat="Server" ID="nextButton"
Text="Next" Font-Size="Larger" />
<ajaxToolkit:SlideShowExtender ID="slideshowextend1"
runat="server" TargetControlID="Image1"
SlideShowServiceMethod="GetSlides" AutoPlay="true"
ImageTitleLabelID="imageTitle"
ImageDescriptionLabelID="imageDescription"
NextButtonID="nextButton" PlayButtonText="Play"
StopButtonText="Stop" PreviousButtonID="
prevButton" PlayButtonID="playButton"
Loop="true" />
<script type="text/javascript" language="javascript">
function popupImage() {
// This is where you set how wide you want your popup window
var awidth = 800;
// This is where you set how high you want your popup window
var aheight = 600;
// This calculates the middle of the screen Horizontally
var leftVal = (screen.width / 2) - (awidth / 2);
// This calculates the middle of the screen Vertically
var topVal = (screen.height / 2) - (aheight / 2);
// This is where you set it to show scrollbars.
var showScrollbars = 0; // Hide Scrollbars
//var showScrollbars = 1; // Show Scrollbars
// This is where you set it to be resizable or not.
var isResizable = 0; //Not resizable
//var isResizable = 1; //Is resizable
// This is where you set it to show Toolbars.
var showToolbar = 0; // Hide Toolbar
//var showToolbar = 1; // Show Toolbar
// This is where you set it to show Status or not.
var showStatus = 0; // Hide Status
//var showStatus = 1; // Show Status
// This is where you tell the window to popup
window.open($get(" <%=Image1.ClientID %>").src
,''
,'scrollbars = ' + showScrollbars +
', height = ' + aheight +
', width = ' + awidth +
', resizable = ' + isResizable +
', toolbar = ' + showToolbar +
', status = ' + showStatus +
', left = ' + leftVal +
', top = ' + topVal);
}
function pageLoad() {
// Set the image so it can accept a click,
// and tell it to call "popupImage"
$addHandler($get(" <%=Image1.ClientID %>"),
"click", popupImage);
}
</script>
</div>
</div>
</form> </body>
</html>
我希望这能帮助其他人并节省他们的时间。
测试环境...
我已使用 Internet Explorer 8 和 Firefox 3.0.14 对其进行了测试。
历史
- 2009 年 10 月 21 日：初始发布
- 2009 年 10 月 30 日：更新源代码