ASP.NET AJAX Control Toolkit Slideshow Extender - Popup Image in New Customizable Window

• Download source - 337.42 KB

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.

// 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

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():

// 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);

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() {
                 // 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>

How I Use It

As you can see in the JavaScript below, you can customize the popup window:

// 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 

If you wanted to show scrollbars on the new window, you can uncomment the line that has // Show ScrollBars and comment the line that says // Hide Scrollbars (as below):

// 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  

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() {
                   // 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>

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

• 21^st October, 2009: Initial post
• 30^th October, 2009: Updated source code