Click here to Skip to main content
Click here to Skip to main content

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

, 30 Oct 2009
Rate this:
Please Sign up or sign in to vote.
How to make the Ajax Control Toolkit Slideshow Extender popup the image displayed in a new customizable window.

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Rob Branaghan
Software Developer
United Kingdom United Kingdom
My first memories of programming were back in the days of Amstrad 464+, and we used to get a magazine called "Amstrad Action", every issue had some games or programs you could code into the computer and I used to love doing this.
 
I remember watching "War Games" at the same time as typing in the code to a small game on the computer, and thought it would be amazing to be able to connect the computer to the telephone!
 
In 2000, I started a computing A Level, part of the course was Delphi Programming, and I remember writing an application to display train time tables and ticket costs, and creating a manual of how to use it, and the lecturer said to me back then I would have a career as a Manual writer or a programmer. (I chose Programmer)
 
The programming lecturer was a lively, wacky lecturer, and that made it entertaining.
 
I then went back to night school in 2006 and learnt VB.NET.
 
This lecturer (at a different college, in a different country was also quite wacky and lively (seemed to be a common occurrence))
 
During the second year at night school my employer asked if I could put together a quotation application, I said I was up for it and the MD and I spent a day or two a week looking into the calculations, and after a few months we had created a quotation application that they still use to this day!
I created 4 more applications before joining my previous employer in 2008.
 
At my previous employment I created Mobile Software for Windows Mobile 6.1, Integrated with Sage Line 50, Exchequer, created ASP.NET websites, SSRS Reports for Customers and Internal use, created the UI for the new Scheduling application, and more.
 
Now working for Gemba Solutions Ltd as a Product Development Support Engineer.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 1 Pinmembersimpa30-Nov-10 10:23 
GeneralMy vote of 2 Pinmembersundara201020-Oct-10 20:59 
GeneralHyperlink questions Pinmemberphamtasmic22-Jun-10 6:36 
AnswerRe: Hyperlink questions PinmemberRob@FactoryMaster23-Jun-10 20:47 
GeneralRe: Hyperlink questions Pinmemberphamtasmic24-Jun-10 3:43 
QuestionRe: Hyperlink questions PinmemberRob@FactoryMaster29-Jun-10 2:19 
Generalall files PinmemberMember 373120830-Oct-09 4:53 
AnswerRe: all files PinmemberRob@FactoryMaster30-Oct-09 5:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 30 Oct 2009
Article Copyright 2009 by Rob Branaghan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid