Introduction
I was browsing the message boards when I came across someone wanting help with the ASP.NET AJAX Control Toolkit Slideshow Extender. Basically this person wanted to be able to click the currently displayed image in the slideshow and see it popup. I decided to look into this, as I want to use the slideshow extender soon in the same way.
How to Get the Path of the Image?
Firstly, I use JavaScript to get the images source, or path.
$get("<%=Image1.ClientID %>").src
How to Make the Image Clickable
This is how you make the image clickable (I set this on PageLoad
), and I have told it to call the function PopupImage()
:
$addHandler($get("<%=Image1.ClientID %>"), "click", popupImage);
The JavaScript Function
This is the whole JavaScript function, from <script>
to </script>
, so you can just paste this straight into your page.
<script type="text/javascript" language="javascript">
function PopupImage() {
var awidth = 800;
var aheight = 600;
var leftVal = (screen.width / 2) - (awidth / 2);
var topVal = (screen.height / 2) - (aheight / 2);
var showScrollbars = 0;
var isResizable = 0;
var showToolbar = 0;
var showStatus = 0;
window.open($get("<%=Image1.ClientID %>").src
,''
,'scrollbars = ' + showScrollbars +
', height = ' + aheight +
', width = ' + awidth +
', resizable = ' + isResizable +
', toolbar = ' + showToolbar +
', status = ' + showStatus +
', left = ' + leftVal +
', top = ' + topVal);
}
function pageLoad() {
$addHandler($get("<%=Image1.ClientID %>"), "click", popupImage);
}
</script>
How I Use It
As you can see in the JavaScript below, you can customize the popup window:
var awidth = 800;
var aheight = 600;
var leftVal = (screen.width / 2) - (awidth / 2);
var topVal = (screen.height / 2) - (aheight / 2);
var showScrollbars = 0;
var isResizable = 0;
var showToolbar = 0;
var showStatus = 0;
If you wanted to show scrollbars on the new window, you can uncomment the line that has
and comment the line that says
(as below):
var showScrollbars = 0;
var showScrollbars = 1;
The code below is just to show how I used it. (As you can see, I haven't populated the Slideshow via the database. I used the example that comes with the Sample Site in the 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() {
var awidth = 800;
var aheight = 600;
var leftVal = (screen.width / 2) - (awidth / 2);
var topVal = (screen.height / 2) - (aheight / 2);
var showScrollbars = 0;
var isResizable = 0;
var showToolbar = 0;
var showStatus = 0;
window.open($get(" <%=Image1.ClientID %>").src
,''
,'scrollbars = ' + showScrollbars +
', height = ' + aheight +
', width = ' + awidth +
', resizable = ' + isResizable +
', toolbar = ' + showToolbar +
', status = ' + showStatus +
', left = ' + leftVal +
', top = ' + topVal);
}
function pageLoad() {
$addHandler($get(" <%=Image1.ClientID %>"),
"click", popupImage);
}
</script>
</div>
</div>
</form> </body>
</html>
I hope this will help others and save them some time.
Tested With...
I have tested this with Internet Explorer 8, and Firefox 3.0.14.
History
- 21st October, 2009: Initial post
- 30th October, 2009: Updated source code