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.
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: