MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

Embed Video into existing slider (Closed) (Mono Support )

Viewed 15277 time(s), 6 post(s) 6/10/2011 1:46:04 PMby geneboss
geneboss

geneboss

6/10/2011 1:46:04 PM
Hi Guys,
Can Videos be embeded into existing slider on the default page?
This content has not been rated yet. 
189 Reputation 19 Total posts
denis

denis

6/10/2011 6:25:12 PM

This can be easily achieved due to our newly introduced support for the oEmbed standard. Here's what I did:
- put a new video into the slider on the default page:

<MonoX:SlideShow runat="server" ID="ctlSlideShow">
                        <SlideShowItems>
                            <ModuleGallery:SlideShowItem runat="server" ImageUrl="[http://youtu.be/CqPntijMrbU]"></ModuleGallery:SlideShowItem>
...

Note that our oEmbed parser requires that "embedable" URLs be put in a pair of square braces. I just copied the URL for a video on YouTube for this example.

- change the ItemTemplate in the SlideShow.ascx Web part in the module gallery:

<ItemTemplate>
<div class="slide">
            
    <a href='<%# DataBinder.Eval(Container.DataItem,"Url") %>' target="_blank" title='<%# DataBinder.Eval(Container.DataItem,"Title") %>'><%# new MonoSoftware.MonoX.oEmbed.Embedder().EmbedContent(DataBinder.Eval(Container.DataItem,"ImageUrl").ToString()) %> </a>
</div>
</ItemTemplate>

You should also change the width and height in the slide class to match your video size.
Note that the Embedder class also supports resizing of the video files.
Of course, now the slideshow part supports only embeddable resources. It would be easy to develop a custom part that can accept any type of resource, let me know if you need any help with that.

This content has not been rated yet. 
7207 Reputation 956 Total posts
geneboss

geneboss

6/10/2011 11:09:40 PM
Hi Denis,
Thank you very much for your prompt and detailed response. I'll take you offer on developing a custom web part to accept any type of resources. I appreciate your feedback on it.

Kindest Regards
This content has not been rated yet. 
189 Reputation 19 Total posts
denis

denis

6/14/2011 12:25:02 PM
Hi Bo,
Here it is - a complete code for a changed Web part, although the same effect could be achieved by inheriting the existing SlideShow part, adding one method and changing its front end.. Note that resources with ImageUrl's stored in square brackets will be parsed by MonoX oEmbed engine, while "ordinary" images should stay as they are.
Also, change the web part and class names as well as namespaces as you want:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SlideShow.ascx.cs" Inherits="MonoSoftware.MonoX.ModuleGallery.SlideShow" %>
 
<asp:Repeater runat="server" ID="rptItems">
<HeaderTemplate>
<div id="slideshow">
    <div id="slidesContainer">
</HeaderTemplate>
<ItemTemplate>
    <div class="slide">       
        <a href='<%# Eval("Url") %>' target="_blank" title='<%# Eval("Title") %>'><%# FormatUrl(Eval("ImageUrl").ToString(), Eval("Title").ToString(), String.Empty) %></a>
    </div>
</ItemTemplate>
<FooterTemplate>
    </div>
</div>
</FooterTemplate>
</asp:Repeater>


Codebehind:

using MonoSoftware.MonoX.Utilities;
using MonoSoftware.Web;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web.UI;
using MonoSoftware.MonoX.oEmbed;
 
namespace MonoSoftware.MonoX.ModuleGallery
{
    /// <summary>
    /// Slide show Web part used to display a sliding list of images.
    /// </summary>
    [ParseChildren(true), PersistChildren(false)]
    public partial class SlideShow : BaseAutoRegisterPart, IExcludeAutoRegisterPart
    {
        #region Properties
        private int _slideWidth = 460;
        /// <summary>
        /// Width of the images.
        /// </summary>
        public int SlideWidth
        {
            get { return _slideWidth; }
            set { _slideWidth = value; }
        }
 
        private List<SlideShowItem> _slideShowItems;
        /// <summary>
        /// List of SlideShowItems that hold the image, url and the title of each slide.
        /// </summary>
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public List<SlideShowItem> SlideShowItems
        {
            get
            {
                if (_slideShowItems == null)
                    _slideShowItems = new List<SlideShowItem>();
                return _slideShowItems;
            }
            set { _slideShowItems = value; }
        }
 
        private int _oEmbedHeight = 0;
        /// <summary>
        /// Max height of oEmbed content.
        /// </summary>
        public int oEmbedHeight
        {
            get { return _oEmbedHeight; }
            set { _oEmbedHeight = value; }
        }
 
        private int _oEmbedWidth = 0;
        /// <summary>
        /// Max width of oEmbed content.
        /// </summary>
        public int oEmbedWidth
        {
            get { return _oEmbedWidth; }
            set { _oEmbedWidth = value; }
        }
        #endregion
 
        #region Page events
        protected void Page_PreRender(object sender, EventArgs e)
        {
            string js = @"
                  var currentPosition = 0;
                  var slideWidth = " + this.SlideWidth.ToString() + @";
                  var slides = $('.slide');
                  var numberOfSlides = slides.length;
 
              $(document).ready(function(){
 
                  SlideShow();
                  var prm = Sys.WebForms.PageRequestManager.getInstance();
                  if (prm != null) {
                    prm.add_endRequest(function(s, e) {
                    SlideShow();
                   });
                  }
              });
 
              function SlideShow() {
               
              slides = $('.slide');
              numberOfSlides = slides.length;
 
              $('#slidesContainer').css('overflow', 'hidden');
 
              slides
                .wrapAll('<div id=""slideInner""></div>')
                // Float left to display horizontally, readjust .slides width
                .css({
                  'float' : 'left',
                  'width' : slideWidth
                });
 
              $('#slideInner').css('width', slideWidth * numberOfSlides);
 
              $('#slideshow')
                .prepend('<span class=""control"" id=""leftControl"">Clicking moves left</span>')
                .append('<span class=""control"" id=""rightControl"">Clicking moves right</span>');
 
              manageControls(currentPosition);
 
              $('.control')
                .bind('click', function(){
                currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
                 
                manageControls(currentPosition);
                $('#slideInner').animate({
                  'marginLeft' : slideWidth*(-currentPosition)
                });
              });
              }
               
              function manageControls(position){
                if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
                if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
              }
            ";
 
            JavascriptUtility.RegisterStartupScript(this, this.GetType(), "slideShowScript", js, true);
 
            BindData();
 
        }      
 
        #endregion
 
        #region Methods
 
        /// <summary>
        /// Apply web part property changes (Note: Overridden property still needs to be marked as <see cref="MonoSoftware.MonoX.WebPartApplyChangesAttribute"/>).
        /// <para>
        /// Note: Marked with <see cref="MonoSoftware.MonoX.WebPartApplyChangesAttribute"/> attribute so it is called from ApplyChanges event in the editor part to refresh the module appearance.
        /// </para>
        /// </summary>
        [WebPartApplyChanges]
        public override void ApplyChanges()
        {
            base.ApplyChanges();
            BindData();
        }
 
        private void BindData()
        {
            if (this.SlideShowItems != null)
            {
                rptItems.DataSource = this.SlideShowItems;
                rptItems.DataBind();
            }
        }
 
        /// <summary>
        /// Adds a slide show item to the list.
        /// </summary>
        /// <param name="imageUrl">Image URL.</param>
        /// <param name="url">Navigation URL.</param>
        /// <param name="title">Image title.</param>
        public void AddItem(string imageUrl, string url, string title)
        {
            this.SlideShowItems.Add(new SlideShowItem(UrlFormatter.ResolveUrl(imageUrl), url, title));
        }
 
        /// <summary>
        /// Formats the URL of the slider resource, supports oEmbed protocol.
        /// </summary>
        /// <param name="imageUrl">Image URL.</param>
        /// <param name="title">Image title.</param>
        /// <param name="additionalAttributes">Any additional attributes that should be displayed in the img tag.</param>
        /// <returns>Formatted URL.</returns>
        public string FormatUrl(string imageUrl, string title, string additionalAttributes)
        {
            if (!string.IsNullOrEmpty(imageUrl))
            {
                if (imageUrl.Trim().StartsWith("["))
                {
                    Embedder embedder = new Embedder();
                    embedder.MaxWidth = this.oEmbedWidth;
                    embedder.MaxHeight = this.oEmbedHeight;
                    return embedder.EmbedContent(imageUrl);
                }
                else
                    return string.Format("<img src=\"{0}\" alt=\"{1}\" {2}/>", UrlFormatter.ResolveUrl(imageUrl), title, additionalAttributes);
            }
            else
                return string.Empty;
 
        }
        #endregion
    }
 
    #region Related classes
    /// <summary>
    /// Slide show item.
    /// </summary>
    public class SlideShowItem
    {
        private string _url;
        /// <summary>
        /// Url to which the user is transferred when he clicks on a slide.
        /// </summary>
        [NotifyParentProperty(true), Browsable(true), Bindable(true)]
        public string Url
        {
            get { return _url; }
            set { _url = value; }
        }
 
        private string _imageUrl;
        /// <summary>
        /// Image URL of the slide.
        /// </summary>
        [NotifyParentProperty(true), Browsable(true), Bindable(true)]
        public string ImageUrl
        {
            get { return _imageUrl; }
            set { _imageUrl = value; }
        }
 
        private string _title;
        /// <summary>
        /// Title of the slide.
        /// </summary>
        [NotifyParentProperty(true), Browsable(true), Bindable(true)]
        public string Title
        {
            get { return _title; }
            set { _title = value; }
        }
 
        /// <summary>
        /// Constructor.
        /// </summary>
        public SlideShowItem()
            : this(String.Empty, String.Empty, String.Empty)
        { }
 
        /// <summary>
        /// Constructor.
        /// </summary>
        /// <param name="imageUrl">Image URL.</param>
        /// <param name="url">Redirect URL.</param>
        /// <param name="title">Slide title.</param>
        public SlideShowItem(string imageUrl, string url, string title)
        {
            this.Url = url;
            this.ImageUrl = imageUrl;
            this.Title = title;
        }
 
 
    }
    #endregion
}


The usage is same as before - note that I included the new haight and width properties for the embedded resources:

<MonoX:SlideShow runat="server" ID="ctlSlideShow" oEmbedHeight="214" oEmbedWidth="454">
                        <SlideShowItems>
                            <ModuleGallery:SlideShowItem runat="server" ImageUrl="[http://youtu.be/CqPntijMrbU]" />
...


Rated 5.00, 1 vote(s). 
7207 Reputation 956 Total posts
geneboss

geneboss

6/14/2011 5:31:59 PM
Hi Denis,
Once again you came through with a thorough explanation
Thank you very much for your great support.

Hvala vam puno (Hope I said it right ;) )
This content has not been rated yet. 
189 Reputation 19 Total posts
denis

denis

6/14/2011 5:44:12 PM
Thanks Bo, it seems that your Croatian is as good as ours :)
This content has not been rated yet. 
7207 Reputation 956 Total posts