OVERVIEW

WebSlideProjector is a ASP.NET 3.5 Web Application provides the following:
It is a ASP.NET 3.5 Web Application and not ASP.NET 4.0 so that it is deployable upon a shared-hosting provider.

Deployed Example

WebSlideProjector

CodeProject Article

This article is more complete documentation of this project:
WebSlideProjector - Using supersized! jQuery and IZWebFileManager

SITE LAYOUT

WebSlideProjector site layout contain four pages:
  1. Default.aspx: Autogenerated sequential display of images of types jpg, png, gif (Admin defined in Web.config) through "supersized!" jQuery library.
  2. ProjectorSetup.aspx: Allows users to manage how image are presented within Default.aspx by setting supersized! properties:
    1. Sequence: Ordered or Random (User defined)
    2. Transitions: None, Fade, Slide Top, Slide Right, Slide Bottom, Slide Left, Carousel Right, Carousel Left
    3. Intervals: Between Slides, Randomizing 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.
    1. Upload: Validates uploads are expected image types (JPEG, PNG, GIF - see Web.config).
    2. Delete
  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.

DETAILS

  1. 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 IE8 selecting keys Ctrl-F11.
  2. IZWebFileManager ASP.NET library is used to maintain a repository of images
  3. WebSlideShow provides a JSON serialized set of images URL to supersized! extracted from IZWebFileManager repository, and manages user settings of supersized! properties.

supersized! Version

This project used "Supersized" jQuery Library version 3.1.3 and not version 3.2.6 because it has fewer UI controls, which was perferable.

supersized! Slides

The serialized data structure that holds the slide images is JSON:

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


Using image repository created by IZWebFileManager within page SlideCarousel.aspx, page Default.aspx generates this JSON data structure and passes it to supersize! via;

$.supersized({
    slides: slidesJSON
});

supersize! Properties

The supersized! properties used for this project are:
  • Slideshow Images Property
    • slides: The array containing all your images with image, title, url, and any custom fields.
  • Functionality Properties
    • 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.
  • Components Properties: In version 3.1.3 only
    • navigation: Turn slideshow controls on/off
    • slide_counter: Display slide numbers
    • slide_captions: Slide caption (Pull from "title" in slides array)

The setting of these supersized! properties are managed by page ProjectorSetup.aspx.

supersize! Documentation

See supersized! Documentation

DEPLOYMENT

Deployment of WebSlideProjector is requires some setup.

Web.config

You may want to modify the credentials.
<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.
<appSettings>
      <!--TEST-->
      <add key="CookieExpireInMinutes" value="5"/>
      <!-- On - Login is Required, Off - Login is ignored -->
      <add key="SlideCarouselLoginMode" value="Off"/>
</appSettings>

Folder /Slides

/Slides folder is used by IZWebFileManager within SlideCarousel.aspx, thereby provide access permissions to load images.

Last edited Feb 21, 2012 at 11:53 PM by jeff00seattle, version 22

Comments

No comments yet.