+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Lightbox for asp.net page

Lightbox for asp.net page

9 posts, 0 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    09 Nov 2009
    Link to this post
    Hi all

    I need a lightbox for asp.net pages.

    What I want is to display 9 Images and links (all hand written). when I click on one of the images or links I need to open a asp.net page with an lighbox effect. On any of the opened pages are previous next buttons so I need to keep the lightobox effect on till the client closes the page.

    Like to get design wise as close to lightbox as possible since we using it for images.

    What is the best way to do it.

    RadWindow, jQuery.Dialog, LightBox adjustments.

    And if any of you has an example I can use along with your recomandation it would be great.

    Regards Markus
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    09 Nov 2009
    Link to this post
    Hi Markus Berchtold,

    Thank you for using our services.

    Actually what we are using our Light Box is just a regular javascript library that can be used on any ASP.NET page. You can find the whole library in ~/Sitefinity/ExternalLibraries/lightbox. More information on how to use the library can be found on the Lighbox JS home page. You can also take a look into JQ Lightbox, or PrettyPhoto

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    10 Nov 2009
    Link to this post
    I don't need it to diplay an image or so on a page.

    I need it to open a asp.net page (as if it ware an image) and have the possiblity to got through different pages.

    Example

    Page 1 has 3 links to (page_a.aspx, page_b.aspx, page_c.aspx)

    If the user clicks on any of the links the corresponding page will be open in a lightbox like fashion.

     in the pages_a, page_b, page_c I hava manually set links to the other pages (next/previous).

    So what I need is to open a whole page lightbox fashion.

    Regards Markus
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    10 Nov 2009
    Link to this post
    Hello Markus Berchtold,

    Thank you for getting back to me.

    Now I see what you are talking about. To be honest I do not believe that is up to the capabilities of the lighbox libraries. As they are external libraries I am afraid I am not able to provide much further guidance than on what is being used in Sitefinity. I think that you will have much better success with using a RadWindow and styling it to look something like this. You can use the Modal="True" property of the RadWindow in order to make it grayout the rest of the page. More information and examples onthe window can be found here:
    RadWindow for ASP.NET AJAX Overview
    RadWindow for ASP.NET AJAX On-line Demos

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    10 Nov 2009
    Link to this post
    Hi this is what I got so far

    http://www.campingtamaro.ch/rundgang/panoramas.aspx?sflang=de

    Link Vogelperspektive (Bird View)

    I have two problems

    1) My Window is overlaying the secondary navigatin on the left. Did not find where to set the z-index.

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="ct_window"   
        Behavior="None" Modal="True" Behaviors="Close, Move" AutoSize="True"   
        Overlay="True" Title="Camping Tamoro Panoramas" VisibleStatusbar="False"   
        VisibleTitlebar="False" EnableEmbeddedSkins="False">  
       
    </telerik:RadWindowManager> 
     
        
       <telerik:RadWindow runat="server" ID="MyWindow" Modal="True" Overlay="True" style="z-index:10000;" DestroyOnClose="True" EnableViewState="False">  
        </telerik:RadWindow> 

    2) I am not able to make the background darker as in lightbox
    .RadWindow.rwInactiveWindow .rwCorner,  
    .RadWindow.rwInactiveWindow .rwTitlebar,  
    .RadWindow.rwInactiveWindow .rwFooterCenter  
    {  
       
     
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10) !important;  
        opacity: .10 !important;   
        -moz-opacity: .10 !important;  
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";  
    }  
    div.RadWindow.rwInactiveWindow .rwCorner,    
    div.RadWindow.rwInactiveWindow .rwTitlebar,    
    div.RadWindow.rwInactiveWindow .rwFooterCenter    
    {    
       
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10) !important;    
        opacity: 0.1 !important;     
        -moz-opacity: 0.1 !important;    
    }    
     
     added the dev.RadWindow versions

    Tryed both 0.1 and 0.9 it does not seem to have an effect on how the background is grayed out.

    Any idea what I am dowing wrong?

    Regards Markus
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    10 Nov 2009
    Link to this post
    Hi Markus Berchtold,

    Thank you for getting back to me.

    From the live link that you have sent I can see that the secondary navigation menu sits on top of the the RadWindow. This is because the navigation elements have greater z-index (z-index=7000) whereas your RadWindow has smaller z-index. The z-index is added as a style rule to the whole window or menu, not as a property:
    .RadMenu_[YourMenuSkin]
    {
        z-index: 2999 !important;
    }

    Since the TelerikModalOverlay class that defines the grayed out area has a z-index of 3001 I would suggest that you assign at least 3000 to the navigation menu.

    As for question 2. Bellow is the default class name that is for the modal area is called TelerikModalOverlay. You should add style rules for this in your theme. Here are the default rules:
    .TelerikModalOverlay{
    background-color:#AAAAAA;
    height:1173px;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    width:1263px;
    z-index:3001;
    }

    From these rules you can define opacity and color.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    10 Nov 2009
    Link to this post
    Dear Radsolav

    1) Worked - I was just looking for a way to set the z-index of the radwindow higher instad of setting the menu lower.

    Would it be possible to set the z-index for the window?

    2) After chaning the code to this it worked

    .TelerikModalOverlay  
    {  
    background-color:#000000 !important;  
    left:0;  
    position:absolute;  
    top:0;  
    z-index:3001;  
       filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=90) !important;   
            opacity: .9 !important;  
            -moz-opacity: .9 !important;  
    }  
     

    When and where is .RadWindow.rwInactiveWindow applied?

    Regards Markus
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    10 Nov 2009
    Link to this post
    Hi Markus Berchtold,

    The same z-index setting can be applied to your RadWindow skin, as bellow:
    div.RadWindow_[YourSkinName] {
        z-index: value !important;
    }

    The .RadWindow.rwInactiveWindow class is applied to the inactive window on your page. For example if you have more than one windows open on the page, this class will be applied to the ones that are not active.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    10 Nov 2009
    Link to this post
    No even I understand it :-)

    Thanks a whole heap.

    Markus
Register for webinar
9 posts, 0 answered