CLICK WITCHERY FRIDAY SHOWCASE: The Doors

For today’s Friday showcase we have another Click Witchery presentation featuring music videos. These feature the music of the Californian band from the late 1960’s, The Doors. The presentation was created by creating a montage of album covers and linking to a video of a song from that album

The following is the music used in this presentation.

The End https://www.youtube.com/embed/e9TmQQQGddQ
Maggie M’Gill https://www.youtube.com/embed/qI8l1h3UrrY
People are Strange https://www.youtube.com/embed/VH_jh5LeVYE
Hello, I Love You https://www.youtube.com/embed/c1huRuo6Wj0
Tell All the People https://www.youtube.com/embed/Hh0UpTkADqY
When the Music’s Over https://www.youtube.com/embed/A7KRVAWx3nU
LA Woman https://www.youtube.com/embed/6TSZ9imUhxU

Click with the volume up!

CLICK WITCHERY FRIDAY SHOWCASE: Company Introduction

Today’s Friday showcase is the presentation we use on the home of our website to introduce Click Witchery.

The white background adds a lot to this presentation. It gives the impression that there a number of different graphics when you look at it first. These are in fact, one single graphic. We have made the six boxes interactive.

Embedding a Click Witchery presentation in your web page!

There are two ways to embed a Click Witchery presentation in a HTML page, iframe and jQuery.

A very effective way is to use the iframe function. To do this, log into https://sys.clickwitchery.com/, create the presentation you want to embed in a HTML page and to the embed option on the left hand side. You will be given the following options which will control what your embedded presentation will look and do.

Field

Description

Type

Whether the embedding method is iframe or jQuery.

Width

This can be a pixel width or a percentage.

height

The height

Right navigation bar

Whether the right navigation bar is visible

Padding

How much padding.

object names

Whether object names are visible.

descriptions of objects

Whether descriptions of objects are visible

The background color of the internal

The background color used internally.

The background color

The background color

 

 

You then just have to select the button “Generate the embed code” and a dialog will appear with the code which you then copy to your HTML page and you have an embedded Click Witchery presentation.

The jQuery option is more powerful than the iframe and slightly more complex to implement. When you select the jQuery you are given more options as you can see below.

embed1

 

Field

Description

Type

Whether the embedding method is iframe or jQuery.

Width

This can be a pixel width or a percentage.

Maximum images height

Maximum height

Keep constant height

Whether the height changes if the page changes

Right navigation bar

Whether the right navigation bar is visible

Minimum width of desktop view

Minimum width

Padding

How much padding.

object names

Whether object names are visible

descriptions of objects

Whether descriptions of objects are visible

Display share buttons

Whether share buttons are visible

The background color of the internal

The background color used internally.

The background color

The background color

 

To add the jQuery to your HTML page you need to add code to the header of the page as well as within the page itself. Select the button “Generate the embed code”. The dialog below will appear.

embed jQuery

You need to copy two sets of code to the header file and one to the body of the page.

In the header section you should add the following line of code:

<script src=”https://code.jquery.com/jquery-2.2.3.min.js”></script>

Followed by these lines of code:

<script src=”https://sys.clickwitchery.com/presentation/jquery.presentation.js”></script>

<link href=”https://sys.clickwitchery.com/presentation/jquery.presentation.min.css” rel=”stylesheet”>

This only needs to be done once on a page.

You then need to copy the code for embed itself. You must have a unique id for each embedded jQuery so you should change the label “presentation-container” to a unique identifier. The code should look something like this:

<div id=”presentation-1234″></div><script>$(document).ready(function() { $(‘#presentation-1234’).presentation({

“presentationId”: “44”,

“displaySidebar”: true,

“displayNames”: true,

“displayDescriptions”: true,

“displayShareButtons”: true,

“internalBackground”: “rgba(255,255,255,1)”,

“externalBackground”: “rgba(255,255,255,1)”

}); });</script>

 

WordPress

If you are using WordPress, you can add the lines to the header file by going to Appearance and then select editor. You should then select the PHP page which is used for your header file. This is usually header.php. The following code should be inserted just below the meta information:

<script src=”https://code.jquery.com/jquery-2.2.3.min.js”></script>

<script src=”https://sys.clickwitchery.com/presentation/jquery.presentation.js”></script>

<link href=”https://sys.clickwitchery.com/presentation/jquery.presentation.min.css” rel=”stylesheet”>

WordPress Editor

I look forward to seeing your embedded Click Witchery presentations. I hope you enjoy creating them!

Creating a Poster Presentation with Click Witchery

Poster presentations are widely used at academic and other conferences. The idea is that you create a poster to explain some topic. This is printed and displayed and anyone can look at it to get an understanding of the topic. The person who created the poster is usually there to talk about it.

There are some excellent resources available on creating poster presentations:
https://www.ncsu.edu/project/posters/
http://guides.nyu.edu/posters
http://colinpurrington.com/tips/poster-design

There is a presumption that a poster should always be printed and displayed. However, there is nothing to stop anyone creating an electronic poster and displaying via a monitor. Click Witchery has excellent functionality for doing just that and I will show you how this is done by creating a poster presentation on the plays of William Shakespeare.
We have designed our presentations so that we divide the plays of Shakespeare into Comedies, Tragedies and Historical plays. There is a graphic on each of these which lists the plays in that category and we then look at one play in more detail.
You can see the structure in Click Witchery here.

structure

We have included the graphic files used for this presentation here. Creating the presentation is simple. After you have created and named the presentation you add the graphic file with the picture of Shakespeare. We will next add the graphic file which lists the comedies of Shakespeare and link that to the word “Comedy” in the first graphic by drawing a polygon around that word. We will then click on the object, Comedy, we have just created and add a new object with the graphic detailing The Merchant of Venice. We will again link this by drawing a polygon around the image in the Comedy object.
We will then do the same for Tragedies and Historical plays.

This video takes you through this process.

Here is the completed Click Witchery presentation: