Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET

WebSlideProjector - Using supersized! jQuery and IZWebFileManager

Rate me:
Please Sign up or sign in to vote.
5.00/5 (7 votes)
21 Feb 2012GPL35 min read 30.6K   1.3K   10   2
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:

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:

  1. 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
  2. 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
  3. 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
  4. 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.

WebSlideProjector_DefaultPage.PNG

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

ProjectorSetup.aspx Page Controls

WebSlideProjector_ProjectorSetupPage.PNG

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

SlideCarousel.aspx Page Controls

WebSlideProjector_SlideCarouselPage.PNG

  1. IZWebFileManager Controls
  2. Back to Default.aspx page button at upper left: Token_Slides.png

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.

WebSlideProjector_ProjectorSetupBox.PNG

Deployment

Site Layout

  • bin\AjaxControlToolkit.dll
  • bin\DotNetSources.Web.UI.Buttons.dll
  • bin\Interop.Shell32.dll
  • bin\IZ.WebFileManager.dll
  • bin\WebSlideProjector.dll
  • Default.aspx
  • ErrorPages\404.aspx
  • ErrorPages\Error.aspx
  • favicon.ico
  • Global.asax
  • Images\...
  • Login.aspx
  • ProjectorSetup.aspx
  • Scripts\jquery-1.6.2.min.js
  • Scripts\supersized.3.1.3.js
  • Scripts\supersized.3.1.3.min.js
  • SlideCarousel.aspx
  • Slides\... [Set Permission to Read-Write!]
  • Styles\supersized.css
  • Styles\WebSlideProjector.css

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

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

IZWebFileManager Configuration

XML
<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

XML
<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

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

XML
<!--
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, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Software Developer (Senior)
United States United States
I enjoy and take seriously the craft of programming, and I improve upon my skills daily. Start day: coffee is always a good idea!

Comments and Discussions

 
GeneralMy vote of 5 Pin
mustyname31-Jan-13 15:40
mustyname31-Jan-13 15:40 
GeneralMy vote of 5 Pin
Chandrabhan Sangale18-Dec-12 17:40
professionalChandrabhan Sangale18-Dec-12 17:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.