A picture gallery for SharePoint, with a twist. Most galleries require a user to click a button to advance to the next image. But, Swipe Gallery works just like a touch device, where you can use your mouse to swipe between images. On a touch enabled device you can use your finger. Simply click and drag your mouse in a swiping motion to advance the gallery. Optionally, you can use classic arrows to navigate the gallery. It also features a Slide Show mode to auto swipe after a set delay. It can be used to display images from ANY library in a site collection.

Features:

• NEW Images in gallery can be clicked to open links in current or new window, see guide for more info.
• Packaged as a SharePoint Sandbox Solution, can be installed as a farm solution or sandbox solution on premise or in the cloud.
• Compatible with SharePoint 2010, SharePoint 2013 and Office 365/SharePoint Online. Both Foundation (free) and Server versions of SharePoint are included.
• Packaged as a Site Collection Feature. Includes 2 libraries. JS and CSS is available via a list in the root site of site collection. Feel free to tweak and make it your own. Almost all source code is JavaScript, free to customize.
• 30 day trial period. Purchase a license for continued use. License is good for each front-end server (on premise) or each tenant (online).
• Public/anonymous sites supported.
• ANY SharePoint List that contains images can be used as gallery source. Recursive file search by default. Sorts by file name ascending by default.
• Swipe direction can be horizontal (default) or vertical.
• Four custom border styles included.
• Text captions are added conditionally, and can be displayed on hover (using HoverIntent plugin, after 300ms of hovering), on click (optimized for
touch devices), always shown, or never shown. Captions can contain links too.
• Mouse cursor can be changed to help users identify that the gallery is swipe enabled.
• Many jQuery animation easing effects included to customize the swipe animation.
• Slide Show mode included, to auto swipe after a set period of time, which uses the configured swipe animation and easing effect.
• Show or hide navigation arrows for a classic gallery look and feel.
• Show or hide the pager dots at the bottom of the gallery. Useful if your gallery has many images and the dots take up too much space (or look strange).

For Farm Solution installation: using either PowerShell or STSADM, add the WSP to the farm (we recommend opening SharePoint PowerShell, then using STSADM within)

STSADM.EXE -o addsolution -filename "AESwipeGallery.wsp"

Then deploy the solution using Central Administration (System Settings, Farm Solutions), so you can easily target the web application. You can optionally do this step too with STSADM or PowerShell, but we recommend deploying using the Central Admin GUI.

For Sandbox Solution installation, open the Site Collection that you want to add the web part, open Site Settings (must be a site admin or owner to do this), open the Solution Gallery (or Solutions in 2013), add the WSP to the gallery, then activate the solution.

NOTE: Product is contained in a single WSP file for both installing as a Farm solution and Sandbox solution. If installing On Premise then you can install as either Farm solution or Sandbox solution at your discretion. If installing SharePoint Online then Sandbox solution is your only option.

Follow the instructions for installing as a sandbox solution.

• After the solution is deployed (either Farm or Sandbox), you then activate a Site Collection Feature named “AE Swipe Gallery Web Part”. This adds the web part and creates some libraries in the root site of the site collection.
• Add the web part to a page (Group is “AMREIN Engineering”, web part name is “Swipe Gallery Web Part”).
• Edit the web part properties.
• Enter a license key, or leave blank for a 30 day trial.
• Enter the web site url (as a server relative url) that the list containing the pictures is located, or leave blank to use the current web site.
• Enter the name of the list where the images are saved. Optionally, you can use the default list that is created when the feature is activated (Title: AESwipeGalleryDefaultImagesNew).
• That’s it! Save the web part and refresh the page. Your gallery should now be filled with the images from the list.
• UPDATE: Due to a reported SharePoint 2013 and SharePoint Online bug you might need to disable the "Minimal Download Strategy" "site feature" for this web part to work.

There are a few ways to add captions to the gallery images:

• Use the “Title” field for short captions (255 chars or fewer).
• Or, add a single line of text field with internal name “swipe_memo” to the list (using list settings), for longer length captions.
• Or, add a multiple lines of text field with internal name “swipe_memo” to the list and make sure you check the box for allowing unlimited length values in document libraries.

The gallery has been updated (since v1.4) to support opening links when the swipe gallery image is clicked. The image gallery list (AESwipeGalleryDefaultImagesNew) can have extra fields added to identify which link to open and the link target (new window='_blank', current window='_top'). Field names must be "swipe_link" and "swipe_link_target", both can be SLOT or MLOT fields in SharePoint List (single line of text, multiple lines of text).

Example: Image in library has fields, Title='Bing Rocks!', swipe_link='http://www.google.com', swipe_link_target='_blank'. When image in Gallery web part is clicked it will open the Google link in a new window/tab.

Altneratively, you could add a link as text in the caption for each image in the gallery. Captions can include hyperlinks, just use regular markup in your caption, ex:

For more information <a href="{my url}">click here</a>.

• The web part gets its images from a list, by default the “AESwipeGalleryDefaultImagesNew” document library.
• You have the option of choosing a View, by editing the web part properties and adding a View Name.
• If the “View Name” property is empty, then the default view is used (All Items), which returns all items from the library (in the list’s root folder).
• You can either change the default view or add a new view to return different images to the web part.
• Views are created and managed out-of-box with SharePoint. There is plenty of documentation to help you create list views available on the web.
• Views can be used to filter items (based on string matches, date ranges, etc), can change the sort order of items, and can return either items in their folders or all items found in all folders at once.

Ex: I create a view in the default image list “AESwipeGalleryDefaultImagesNew” that filters based on a custom field (I can add a new field to the list named “Department”, of type “single line of text”). The view name will be “Finance” and only return items where the “Department” field equals “Finance”. I can easily confirm if the view is working using the SharePoint web interface. Next, I edit my web part properties, and change the “View Name” property to be “Finance”. The next time the page loads it should only pull items that are available in the view.

Download the latest version from the AMREIN product catalog: AMREIN Swipe Gallery Web Part

If you are upgrading from another paid version available from the AMREIN product catalog, then you can use the “STSADM –o upgradesolution” to upgrade to the latest version.

If upgrading as a Farm Solution, open “SharePoint 2010 (or 2013) Management Shell”, then use the following command:

STSADM.EXE -o upgradesolution -name "AESwipeGallery.wsp" -filename "AESwipeGallery.wsp" -immediate –allowGacDeployment

If upgrading as a Sandbox Solution, open the root site of the site collection you want to upgrade. Open Site Settings, then open the Solution Gallery. You will have to deactivate the solution first, then upload the new solution (replace existing one), then activate again. You will have to upgrade the web part sandbox solution in every site collection separately. This is not applicable for sub sites, just site collections.

TIP: before upgrading, we recommend deleting the JS and CSS resources used by the product in the following library: AESwipeGalleryAssets. This library is located in the root site of the site collection. If any customizations were done here, they will be lost in the upgrade, since you will either be deleting the contents manually or they will be automatically replaced during solution upgrade. Sometimes the contents of this library are not replaced/overwritten correctly during solution upgrade, so this is why we recommend manually deleting the contents of this list/library before upgrading.

The free version is a completely separate unique SharePoint Solution. So, there is no direct upgrade approach from the free version to the paid version. However, you can still use the same image galleries (since the Paid version allow you to point to any SharePoint list that contains image files). So, when upgrading to the paid version, you should:

1. Delete all instances of the web part on all pages it is in use.
2. Deactivate the site collection feature in each site collection it is used.
3. Uninstall the SharePoint Solution:
• For Farm Solutions: use STSADM commands in SharePoint Management Shell, or use Central Administration GUI (recommended approach).
• For Sandbox Solutions: use the root site Site Settings, open Solution Gallery, deactivate and uninstall the solution, then delete the solution.
4. Install the paid version separately, following the steps outlined elsewhere in this guide.
5. Add the paid version web part to the pages that you previously deleted the free version web part.
6. Configure the paid version web part, to point to the image galleries needed.

The web part loads files from the specified SharePoint List, in the specified SharePoint web site using either the List’s default view or a custom view entered by the user. By default the images are saved in a document library created on feature activation named “AESwipeGalleryDefaultImagesNew” which is located in the root site of the site collection.

Basic Web Part Properties:

• NOTE: you can open a “tip” for each custom web part property by clicking on the question mark next to each web part property (in the web part properties editor pane).
• License Key: Enter your license key here, or leave blank to use the 30 evaluation period.
• Web Server Relative Url: The Server Relative Url of the web site that the picture list is located.
• List Name: Name of the list where the images are saved. If field is empty, then the default list (created by the site collection feature) is used.
• View Name (Optional): Use this to change which images are loaded from a library. Leave blank to use the default view or enter an alternate view name. Views can be used to filter and sort images.
• Swipe Container Width: Explicit width set on swipe container and images within.
• Swipe Container Height: Explicit height set on swipe container and images within.

Advanced Web Part Settings (Optional):

• Extra Css Url: Specify a Url to a CSS file, which can be used to customize the look and feel of the gallery.
• Extra Css Inline: Enter inline CSS here, which can be used to customize the look and feel of the gallery.
• Hide Dot Pager: Hide the paging dots that appear at the bottom of the image.
• Hide Swipe Tip: Hide the tip that displays on page load and fades after 3 seconds.
• Show Arrows: Display paging arrow buttons on either side of panel (disabled when caption display mode is "ClickMode").
• Fade Arrows: Auto hide the first or last panel arrows (disabled when caption display mode is "ClickMode").
• Border Style: Choose a border style for the swipe gallery container.
• Caption Display Mode: Show caption text using either Hover Mode (caption shows when hovering over image), Click Mode (caption shows when clicking the image), Never Show (caption never displays), Always Show (caption is always visible).
• Swipe Direction: Choose between horizontal and vertical.
• Mouse Cursor Style: Choose the CSS mouse cursor/pointer.
• Swipe Type: Choose between Panel and Mouse.
• Swipe Easing Effect: Choose different easing effects for the swipe animation, or none at all (default: easeOutBack).
• Swipe Snap Distance: Pixel distance before panel swipe animation begins.
• Swipe Duration: Time it takes for next panel to slide in.
• Enable Slide Show: Enable or disable slide show mode, automatic scrolling of images in gallery.
• Slide Show Pause On Hover: When slide show is enabled, option to pause slide show on hover.
• Slide Show Auto Start: When slide show is enabled, the time to delay before first slide advances, in milliseconds. This is in addition to the slide show time to delay on page load. (Ex. Auto Start Delay is 2s, slide show time is 4s, then on page load the slide show will not start for 6s.)
• Slide Show Time: Duration to pause on each slide, in milliseconds.

After the page is done loading, use your browser to “View Source”, and search for the following string “AESG_VERSION_NUMBER”. Your version number will appear next to it, ex:

The product is available as a 30 day free trial, per front-end server, or per Office 365 tenant license. You can download and install the web part and evaluate for 30 days before a license is needed for continued usage. After 30 days you will be prompted to license the product.

Each license is valid for each front-end server in your SharePoint Farm (or each Office 365 tenant). The web part can then be used as many times as needed on each server/tenant.

You can enter the license key in two ways:

• Enter license key in each Metro Grid Web Part property
• For on premise deployments you can optionally enter the license key in a web.config file. This is the preferred method if you will be using the web part in many locations, so that you can enter the key once and be done.
• You will enter the license key in an “appSetting” configuration section in the web.config file:

• <appSettings><add key="AEMG" value="{MY_LICENSE_KEY_VALUE}" /></appSettings>

  • For Farm Solutions, use web.config here:

  • C:\inetpub\wwwroot\wss\VirtualDirectories\{YOURSITE}\web.config

  • For Sandbox Solutions, use web.config here:

  • C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\UserCode\web.config

The web part reads images from lists. By default it reads images from the following list in the root site in the site collection, “AESwipeGalleryDefaultImagesNew”. However, the web part can be configured to read images from ANY list in ANY site, using web part properties.

Also, the web part’s CSS and JavaScript resources are saved in a list named “AESwipeGalleryAssets”, also saved in the root site of the site collection.

It is important that any user expected to use the web part have at least read permissions to:

• The root site of the site collection (that contains the web part and page it’s on).
• The list “AESwipeGalleryDefaultImagesNew” that contains the images (or another list in another site, since any list that contains images can be used).
• The list “AESwipeGalleryAssets” that contains the CSS and JavaScript resources, located in the root site of the site collection.

Almost all the source code for the application is included in a library in the root site of the site collection named “AESwipeGalleryAssets”. You can make changes to the CSS and JS files here to customize how the web part functions.

• BEWARE: you can break the web part by changing the source code.
• NOTE: if you break the web part’s source code, you can delete the contents of this library and “deactivate” and then “activate” again the site collection feature “AE Swipe Gallery Web Part”. This will refresh the contents of the library.
• NOTE: if you change the source code, any future upgrades/fixes/releases to this web part will likely overwrite your changes.

• 1.0: Initial Release
• 1.1: Added support for using List Views to filter images from list, instead of using "web part id" web part property.
• 1.2: Changed swipe JS internals, will skip to beginning or end of slides in 10ms, instead of full duration
• 1.3: Fix on how jQuery script is loaded from C#, always loads jQuery, and JS file should use $.noConflict so it doesn't impact other versions on page.
• 1.4: Adding support for clickable image links, using optional image list fields "swipe_link" and "swipe_link_target" (internal names), not site columns, not part of content type, can be added manually to any library (image gallery). Target values can be '_self', '_blank', '_top', etc.
• 1.5: Deleted site content type and site fields from solution.
  Deleted list template and list instance 'AESwipeGalleryDefaultImages'.
  Created new list instance based on image gallery, 'AESwipeGalleryDefaultImagesNew'.
  Since no more content type user should add fields to any image list to be used by swipe gallery web part with names as follows (internal names): swipe_memo, swipe_link, swipe_link_target
  Renamed demo images file names
  Updated app.js, when demo images found (based on filename match) it adds some fake data for demo purposes (title, memo, links), this fake data will be overridden when real field data is found in list.