RadImageGallery enabled Full Screen mode on Server-Side (C#)

[Jon]

Is it possible to toggle Full Screen mode on the sever-side for the RadImageGallery control?

I have a RadImageGallery (inside a RadAjaxPanel), based on a users permissions and other variables (defined on the server-side), I want to be able to toggle whether or not the Gallery is displayed in Full Screen initially or not.

 

Thanks in advance!

[Jon]

Also, the RadImageGallery may include ImageGalleryItem(s) (with images) and/or ImageGalleryTemplateItem(s) (with videos).

[Eyup]

Hi Jon,

You can achieve this only on client-side similar to this:
http://docs.telerik.com/devtools/aspnet-ajax/controls/imagegallery/how-to/start-slideshow-automatically

The method name in this case is called toggleFullScreen().

Regards,
Eyup
Telerik

[Jon]

Thank you Eyup, I appreciate your guidance.

[Jon]

Perhaps in a future release, more server-side control can be had for the RadImageGallery? ie: toggle full screen, obtain data about active image, etc. Seems this data is only available client side, which is unfortunate.

[Eyup]

Hi Jon,

You can use the approach demonstrated in the following web site to achieve the "obtain data about active image" requirement:
http://www.telerik.com/support/code-library/access-unique-datakeyvalue-and-delete-images-from-radimagegallery-bound-to-a-data-source

In any case feel free to log these ideas as feature request in our improvements portal and our dev team may consider implementing it for the future releases:
http://feedback.telerik.com/Project/108

Regards,
Eyup
Telerik

[Jon]

Thanks Eyup, will do!

[Jon]

FYI: When trying to call the method toggleFullScreen() i got the following error:

 

'requestfullscreen' on 'element' api can only be initiated by a user gesture

 

I am looking into a workaround now, considering this is a internal company site, we are fine with this force fullscreen on pageload approach.

[Kostadin]

Hello Jon,

I am afraid you cannot workaround this issue because the error is thrown by the browser which does not allow enter a fullscreen by using a code. I would recommend you to check out the following forum thread which elaborate more on this matter and also search the web for more detail information.

Regards,
Kostadin
Telerik

[Jon]

Thank you Kostadin, I have been doing research and have come to that same conclusion. My workaround is to call a web service from the client side to run a check of user parameters, then display a confirm button to continue in fullscreen. Once the user clicks 'OK' then it will load in fullscreen. Big picture, this is a better approach anyways.

 

Thanks!

[Jon]

Hi again, please let me know if I need to open a new post, as this issue is evolving).

 

I have the Full Screen set to use the users click event. However, under a specific scenario, it will exit full screen mode prematurely. Here is the scenario:

RadImageGallery loaded (via server-side) with the following items, in the following order:

image (ImageGalleryItem)

video (ImageGalleryTemplateItem, loaded from ITemplate)

image (ImageGalleryItem)

image (ImageGalleryItem)

On page load, let's say user starts in non-FullScreen. User clicks Full Screen button, when user clicks next (to the video, for the first render) it exits FullScreen. How can I prevent this full screen exit?

 

Here is the relevant code (I tried to attach a zipped sample project, but apparently I can only attach images):

 

aspx:

        <telerik:RadImageGallery ID="PresentationView_RadImageGallery" CssClass="PresentationView_RadImageGallery" RenderMode="Auto" BackColor="Transparent" runat="server">
            <ImageAreaSettings NavigationMode="Button" />
            <ThumbnailsAreaSettings Mode="Thumbnails" />
            <ToolbarSettings ShowItemsCounter="true" ItemsCounterFormat="Slide {0} of {1}" />
            <ClientSettings AllowKeyboardNavigation="true">
                <ClientEvents />
            </ClientSettings>
        </telerik:RadImageGallery>

 

aspx.cs

        public class VideoTemplate : ITemplate {
            private readonly string _VideoFile;
            private readonly string _VideoTitle;
            private readonly string _PosterImage;

            public VideoTemplate(string VideoFile, string VideoTitle, string PosterImage) {
                _VideoFile = VideoFile;
                _VideoTitle = VideoTitle;
                _PosterImage = PosterImage;
            }

            public void InstantiateIn(Control container) {
                RadMediaPlayer player = new RadMediaPlayer() {
                    ID = "RadMediaPlayer1",
                    CssClass = "PresentationView_RadImageGallery",
                    Width = Unit.Pixel(700),
                    Height = Unit.Pixel(366),
                    StartVolume = 60,
                    RenderMode = RenderMode.Lightweight,
                    AutoPlay = false,
                    Title = _VideoTitle,
                    //Poster = _PosterImage,
                    Source = _VideoFile
                };

                player.Load += (s, a) => {
                    player.TitleBar.ShareButton.Visible = false;
                    player.ToolBar.FullScreenButton.Visible = false;
                    player.ToolBar.HDButton.Visible = false;
                    player.ToolBar.SubtitlesButton.Visible = false;
                    player.BackColor = Color.Transparent;
                };

                container.Controls.Add(player);
            }
        }

        protected override void OnInit(EventArgs e) {
            // Slide 1 - Image
            ImageGalleryItem igi1 = new ImageGalleryItem();
            igi1.Title = "Title 0";
            igi1.Description = "0";
            var igi1Path = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\0_5_6723e283-2a53-42e9-8c4d-9615a93fe32e.jpg";
            igi1.ImageUrl = igi1Path;
            igi1.ThumbnailUrl = igi1Path;
            PresentationView_RadImageGallery.Items.Add(igi1);

            // Slide 2 - Video
            ImageGalleryTemplateItem igti = new ImageGalleryTemplateItem();
            igti.Title = "Title 1";
            igti.Description = "1";
            igti.ThumbnailUrl = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\1_5_3dcfbcab-a72a-47da-abac-5c62831379e1_thumbnail_w.jpg";
            igti.ContentTemplate = new VideoTemplate("tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\1_5_3dcfbcab-a72a-47da-abac-5c62831379e1.mp4", igti.Title, igti.ThumbnailUrl);
            PresentationView_RadImageGallery.Items.Add(igti);

            // Slide 3 - Image
            ImageGalleryItem igi2 = new ImageGalleryItem();
            igi2.Title = "Title 2";
            igi2.Description = "2";
            var igi2Path = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\2_5_fe726b92-dabc-4bc3-9458-70eb3df42d5e.jpg";
            igi2.ImageUrl = igi2Path;
            igi2.ThumbnailUrl = igi2Path;
            PresentationView_RadImageGallery.Items.Add(igi2);

            // Slide 4 - Image
            ImageGalleryItem igi3 = new ImageGalleryItem();
            igi3.Title = "Title 3";
            igi3.Description = "3";
            var igi3Path = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\3_5_8b234313-4492-4376-aa33-9788ee6a768c.jpg";
            igi3.ImageUrl = igi3Path;
            igi3.ThumbnailUrl = igi3Path;
            PresentationView_RadImageGallery.Items.Add(igi3);

            PresentationView_RadImageGallery.DataBind();
        }
        
        protected void Page_Load(object sender, EventArgs e) {

        }

 

[Kostadin]

Hello Jon,

In case you are using a template it will perform a postback when navigate through the ImageGallery items. I assume the code that you are using to enter a full screen might be executed which will automatically exit the full screen. I tried to replicate the issue in the following live example but I was unable to. Could you please check it out and let me know how it differs from your real setup. Keep in mind the toolbar in the example is hidden by the following CSS rule.

<style type="text/css">
    .rigToolbar {
        display: none;
    }
</style>

Regards,
Kostadin
Telerik

[Jon]

Thank you for your reply. Whether the user automatically enters full screen mode on page load or not is based on whether certain conditions are met. I have been able to resolve this (if conditions = enter full screen) using a radconfirm asking the user 'Continue in Full Screen?' if they click ok, I use that click event to execute $(document.getElementsByClassName("rigFullScrButton")).trigger('click'); which then simulated clicking the full screen button in the display bar.

However, I do not wish to hide the toolbar, in the event a user either (1) is not required to enter full screen on page load, but wants to enter full screen via the normal method or (2) if the user exits full screen, they can have the option to re-enter full screen if desired.

The issue that I am having regarding exiting full screen if next item is a video, I have issued a Support ticket to Telerik (1042058), they agreed that this is a Bug (194056). Until this issue is resolved, I have hidden the Full Screen button only (RadImageGallery.ToolbarSettings.ShowFullScreenButton = false) and not using the radconfirm option on page load.

Thanks!