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: