CodeCarvings Piczard V1.2 Help
PopupPictureTrimmer - Overview
Send Feedback
Piczard Fundamentals - Web > PictureTrimmer > PopupPictureTrimmer > PopupPictureTrimmer - Overview

Glossary Item Box

CONTENTS

  1. Introduction
  2. Customize the appearance of the lightbox popup

Please see the Example A.321 - "Web - PictureTrimmer / PopupPictureTrimmer - Overview"

 

 

1. Introduction

PopupPictureTrimmer is one of the 2 types of PictureTrimmer controls that the Piczard library provides.

This control allows to display an image editor tool within a lightbox popup
(the other type of Picturetrimmer control - PopupPictureTrimmer - is displayed directly within a web page).

The main difference between PopupPictureTrimmer and InlinePictureTrimmer is that PopupPictureTrimmer in not directly visible in the web page; it becomes visible (within a lightbox popup) only when needed.
In particular, the lightbox popup can be displayed in two ways:

  1. On the Client-side
    By invoking the following javascript method:
    CodeCarvings.Wcs.Piczard.PictureTrimmer.popup_open(controlId, [widowWidth], [windowHeight])
    
    The method accepts 3 parameters:
    1. The Id (ClientID) of the PopupPictureTrimmer control to display (this parameter is mandatory)
    2. The width of the lightbox popup window expressed in pixels (this parameter is optional)
    3. The height of the lightbox popup window expressed in pixels (this parameter is optional)

    Client-side example Copy Code
    <script type="text/javascript">
      
    //<![CDATA[
      
    function myOpenPopup()
      {
         
    CodeCarvings.Wcs.Piczard.PictureTrimmer.popup_open('<% =PopupPictureTrimmer1.ClientID %>');
      }
    //]]>
    </script>  

    <a href="#" onclick="myOpenPopup(); return false;">Open popup</a>
  2. On the Server-side
    By invoking the method OpenPopup
    Server-side example Copy Code
    protected void btnServerSideOpenPopup_Click(object sender, EventArgs e)
    {
      
    this.PopupPictureTrimmer1.OpenPopup();
    }

 

The followin properties have no effect over the PopupPictureTrimmer controls:

  1. Size:
    • Width
    • Height
    In order to control the size of the control you have to pass width and height directly to the methods that allow to open the popup window (e.g. OpenPopup)
  2. Borders:
    • BorderStyle
    • BorderWidth
    • BorderColor
    In order to control the borders of the control you have to use the LightBoxCssClass property.
    Please see the next paragraph "Customize the appearance of the lightbox popup"

 


 

2. Customize the appearance of the lightbox popup

Please see the Example A.403 - "Customize Piczard / Customize layout"

Figure 1 - The customizable elements of the lighbox popup window.

 

In order to customize the appearance of the lightbox popup, you have to follow the following steps:

  1. Write 2 CSS classes: one for the background of the lighbox popup (Figure 1-1)  and one for the lightbox window (Figure 1-2)
    The 2 CSS classes need to have a name composed by a common (custom) prefix and the suffixes "__background" and "__window".
    Example (prefix=Foo) - CSS Copy Code
    .Foo__background
    {
      
    position: absolute;
      
    overflow: hidden;
      
    display: none;
      
    z-index: 1000;
      
    top: 0px;
      
    left: 0px;
      
    width: 100%;
      
    height: 100%;
      
    background-color: #000000;
      
    opacity: 0.6;
      
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
      
    filter: alpha(opacity=60);
    }

    .Foo__window
    {
      
    position: absolute;
      
    overflow: hidden;
      
    display: none;
      
    z-index: 1001;
      
    background-color: #ffffff;
      
    border-bottom: #666666 6px solid;
      
    border-left: #eeeeee 6px solid;
      
    border-top: #eeeeee 6px solid;
      
    border-right: #666666 6px solid;
    }
  2. Set the value of property LightBoxCssClass to the value of the Prefix of the CSS classes.
    Example (prefix=Foo) - C# Copy Code
    protected void Page_Load(object sender, EventArgs e)
    {
      
    this.PopupPictureTrimmer1.CssClass = "Foo";
    }

 

Please note that with this technique you can customize:

  • The background of the lighbox popup (Figure 1-1)
  • The borders of the lightbox popup (Figure 1-2; The properties BorderStyle, BorderWidth and BorderColor of the control are ignored).

Other customizations - such as the background color of the PopupPictureTrimmer - can be achieved by directly setting the properties of the PictureTrimmer control.

The example A.403 contains a large number of customization demostrations.

©2013 Sergio Turolla. All Rights Reserved.