(untagged)

WebSlideProjector - Using supersized! jQuery and IZWebFileManager

jeff00seattle

0.00/5 (No votes)

21 Feb 2012

WebSlideProjector is a ASP.NET 3.5 Web Application that manages a fullscreen background slideshow (presented by supersized! jQuery library) with handling of anonymous user Projector Setup and login-administered Slide Carousel loading (using IZWebFileManager ASP.NET File Manager library).

Introduction

WebSlideProjector is a ASP.NET 3.5 Web Application provides the following:

Manages a fullscreen background slideshow presented by supersized! jQuery library v3.1.3
Anonymous user Projector Setup
Login-administered Slide Carousel loading using IZWebFileManager ASP.NET library.

CodePlex

The sources for this project are also available for downloading on CodePlex: http://webslideprojector.codeplex.com/

Utility

The utility behind WebSlideProjector is that

You can deploy a slide show presentation viewable over the web
Assign administrators with login access to manage the loading of the slide show carousel using an intuitive web-based file manager
Allow viewers to define their own viewing experience by setting intervals, ordering, and transitions of slides.

Site Layout

WebSlideProjector site layout contain four pages:

Default.aspx: Presentation of slide set (populated in SlideCarousel.aspx) through supersized! jQuery library:
- Autogenerated sequentially or randomly
- Manually using standard controls: previous, pause, play, next
ProjectorSetup.aspx: Allows users to manage how image are presented within Default.aspx by setting supersized! Options:
- Sequence: Ordered or Random (User defined)
- Transitions: None, Fade, Slide Top, Slide Right, Slide Bottom, Slide Left, Carousel Right, Carousel Left
- Time Interval: Between Slides
- Time Interval: Refresh Image Set
SlideCarousel.aspx: Built upon IZWebFileManager, allows administrators to manage a repository of images that will be assigned as a slide set to supersized! when presenting within Default.aspx.
- Upload File
  - Validates expected image types (app key=SlideShowFileTypes)
    - image/jpeg
    - image/pjpeg
    - image/png
    - image/x-png
    - image/gif
  - Validates expected file extensions of images (app key=SlideShowFileExtensions)
    - .jpg
    - .png
    - .gif
    - .jpeg
  - Validates maximum image sizes (app key=SlideShowMaxImageSizeKB)
  - Validates file name of image is URI friendly
- Delete
- Rename
- Copy
Login.aspx: Using form authentication and credentials defined within Web.config, provides login access to SlideCarousel.aspx, thereby restricting access to the image repository.
Using the code

Page Controls

Default.aspx Page Controls

This page has presents the supersized! slide show and has three controls.

Manual Slide Controls at the footer: Previous, Play/Pause, Next
Go to ProjectorSetup.aspx page button at upper left:
Go to SlideCarousel.aspx page button at upper right:

ProjectorSetup.aspx Page Controls

Input settings for supersized! Presentation Options
Back to Default.aspx page button at upper left:

SlideCarousel.aspx Page Controls

IZWebFileManager Controls
Back to Default.aspx page button at upper left:

Solution

WebSlideProjector is a ASP.NET 3.5 Web Application and not ASP.NET 4.0 so that it is deployable upon most shared-hosting providers.

File Manager for SlideCarousel.aspx

IZWebFileManager ASP.NET library is used to maintain a repository of images. Note that I had issues with the downloaded 2.6.4 version of IZ.WebFileManager.dll binary within a shared-hosted ASP.NET 3.5 environment, so I built this binary instead using GitHub sources: https://github.com/manishma/IZWebFileManager. It is within a separate project within this solution.

supersized! Slides for Default.aspx

In page Default.aspx, WebSlideProjector extracts an image set from IZWebFileManager repository and creates a JSON serialized set of images URLs and their respective titles to be provided to a JSON serialized set of image URLs paired with their title.

slidesJSON = [ {image:URL,title:String} , {image:URL,title:String} , {image:URL,title:String} ...]

This JSON data structure (an array containing all your images with image, title, url, and any custom fields) is passed to supersize! Option slides:

$.supersized({
   slides: slidesJSON
});

The supersized! jQuery library v3.1.3 takes a serialized data structure of a set of image URLs and displays them in fullscreen background within any browser; fullscreen is achieved within IE-8 by selecting shortcut keys Ctrl-F11.

Why supersized! Version 3.1.3?

This project used supersized! jQuery Library version 3.1.3 and not the latest version 3.2.6. The latest version deprecated a couple of supersized! Options which managed the visibility of controls, image number, and titles.

supersize! Component Options managed by ProjectorSetup.aspx

The following supersized! 3.1.3 Options manages the visibility of components that would appear within Default.aspx page, and they are managed within ProjectorSetup.aspx page.

navigation: Turn slideshow controls on/off
slide_counter: Display slide numbers
slide_captions: Slide caption (Pull from "title" in slides array)

supersize! Presentation Options managed by ProjectorSetup.aspx

ProjectorSetup.aspx page also manages these supersized! presentation options:

start_slide: The slide the slideshow starts on.
random: Slides are shown in a random order.
slide_interval: Time between slide changes in milliseconds.
transition: Controls which effect is used to transition between slides.
transition_speed: Speed of transitions in milliseconds.

DotNetSources.Web.UI.Buttons in ProjectorSetup.aspx

In providing a confirmation of that updates to supersized! Options was successfully performed, I found that the DotNetSources.Web.UI.Buttons' MessageBox interface most appealing.

Deployment

Folder ~/Slides Permissions

IMPORTANT: In order for IZWebFileManager in SlideCarousel.aspx to manage the image repositiory within folder ~/Slides, be sure to set the file access permission of this folder from Read-Only to Read-Write!

General Web Site Configuration

<add key="LogName" value="Application"/>
<add key="LogSource" value="WebSlideProjector"/>

IZWebFileManager Configuration

<add key="SlideShowFolder" value="Slides"/>
<add key="SlideShowFileExtensions" value=".jpg, .png, .gif, .jpeg"/>
<add key="SlideShowFileTypes" value="image/jpeg, image/pjpeg, image/png, image/x-png, image/gif"/>
<add key="SlideShowExemptFolders" value="_hcc_thumbs, _hpp_images"/>

Default supersized! Configuration

<add key="SlideShowIntervalSeconds" value="5"/>
<add key="SlideShowRefreshMinutes" value="15"/>
<add key="SlideShowTransistionSpeedMilliSeconds" value="700"/>
<add key="SlideShowMaxImageSizeKB" value="1000"/>
<add key="SlideShowRandomModeRBL" value="0"/>
<add key="SlideShowControlsModeRBL" value="0"/>
<add key="SlideShowMouseCursorModeRBL" value="1"/>
<add key="SlideShowFileExtensions" value=".jpg, .png, .gif, .jpeg"/>
<add key="SlideShowFileTypes" value="image/jpeg, image/pjpeg, image/png, image/x-png, image/gif"/>
<add key="SlideShowExemptFolders" value="_hcc_thumbs, _hpp_images"/>
<add key="LogName" value="Application"/>
<add key="LogSource" value="WebSlideProjector"/>

SlideCarousel.aspx Access via Login.aspx Configuration

<credentials passwordFormat="Clear">
<user name="admin" password="P@ssword1"/>
<user name="testUser2" password="testPass2"/>
<user name="testUser3" password="testPass3"/>
</credentials>

And appSettings as well to determine Login.aspx access to page SlideCarousel.aspx.

<!--
TEST - Authentication Cookie expiration would be longer in a production environment
-->
<add key="CookieExpireInMinutes" value="5"/>
<!-- On - Login is Required, Off - Login is ignored -->
<add key="SlideCarouselLoginMode" value="Off"/>

Recognition

CodeProject: Buttons, Message Box, and Confirm Box in ASP.NET 3.5 By Petr Pechovic

History

2012-02-20 12:00 PST -- Article Release -- Source Version 1.0.3.0
2012-02-21 01:00 PST -- Source Version 1.0.3.1 CodePlex fixes - Default.aspx Page and Web.Config
2012-02-21 16:00 PST -- Source Version 1.0.3.2 CodePlex fixes - Login.aspx And SlideCarousel.aspx pages
2012-02-21 23:00 PST -- Source Version 1.0.3.3 CodePlex fixes - Comments and GNU License Info

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here