Kusog WordPress Plugins, Themes, Blogs and More
Contact Us: support@kusog.org

Using Syrinx Slideshow

The Syrinx slideshow plugin provides several options for how to display a slideshow.

Each slideshow is a collection of images of any size, though it should be at least as big as you intend to use such 1200 wide.

Each slide has a direction that the image will slide in where the horizontal, vertical, and zoom can be configured to provide background animation.

Each slide can have one or more layers of html content, such as titles, images, and even video.  The layer’s visibility and other display aspects are controlled via layer keyframes.

Each layer in a slide can have as many keyframes as needed to control the animation of the layer over the time the slide is displayed.

The editor described and shown here is still under initial development.  For example, you must manually specify valid css for the keyframes because the inline keyframe editor is not completed.  You can manually edit the slideshow html file in the plugin’s slideshow folder after it has been created, or create new ones as html files which are saved into this folder.  The filename is the slideshow’s id value.

Creating a new Slideshow

You can create a slideshow via the main Slideshows admin panel added via the plugin.

You can create a new slideshow via the Syrinx Slideshow widget.  Once you drop the widget into a location, you can use the “Create New” select option and a new field will appear to type an ID.

Note: This id is used as a DOM element id, and should be restricted to alphanumerics only.  The current version of the editor does not check for valid IDs so you can hang yourself by using a non alphanumeric.

After you save your changes, a new slideshow is created from the _blank.html template using the ID provided.  The widget will set the newly created ID as its option.

Editing a Slideshow

When you are logged in with a user that can edit content, you will notice an edit icon in the corner of the slider.  Clicking the edit icon will show the slideshow editor popup window.  As you make changes to the editor window, they should show the change immediately in the slideshow player you initiated the edit with.  The slideshow editor uses the player as its display to show the changes being made.

You can drag/drop the images in the “slideshow filmstrip” display to change the order of the slides in the display.  So if you have 3 slides, you can drag the 3rd slide over the 1st slide and drop and it will become the new first slide with the other two being pushed to the right.  As soon as you drop, the player will show the new slide order as it animates through them.

When you created a new slideshow, the new slideshow will have one blank slide setup, with no layers.  Depending on the browser you use and security privileges, you can drag images into the slide cell to change the slide to use that url for the image.  However, you can paste or type a url into the slide’s image url text box in the editor.

Add a new slide by using the Add button in the slide area, which appends a blank slide to the end of the filmstrip.  You can drag the slide to where you want it positioned.


Saving Slideshow Changes

Once you have the slideshow edited to the point you want it to be saved, used the Save button just to the right side below the filmstrip and the options will be saved and made public.

Note: There currently is no way to save your changes but not have them go public like a draft in posts.  That could be a future update!

Did you Save Not actually Save?

The plugin stores all of its slideshows in its slideshows directly within its plugin.  If the plugin cannot use standard php IO to save the slideshow as an html file, the save will fail.


Leave a Reply

Latest blogs