The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Create an image slide show

Go down

Tutorial Create an image slide show

Post by Ange Tuteur March 20th 2015, 8:40 am

Create an image slide show

This tutorial will explain how you can create a simple slide show of images by using a form.

Create an image slide show Captu147

Create an image slide show 09615110The generator

To start, you have to go to this page. You should then be met with the following form :
Create an image slide show Screen31

The first block will give you an example and a list of instructions. The second block contains fields for you to fill in so you can customize and create your slide show. Please read the next segment of this tutorial for a rundown on all the options this generator offers.

Create an image slide show 09615110Explanation

The generator offers a number of settings as well as some options to interact with the result. If the instructions or tooltips did not answer your questions, hopefully the following explanations will. Smile

General Settings

There are currently a total of 6 general settings split into 3 groups ; Duration, Dimension, and Color settings.

Create an image slide show Captu148

  • 1. Duration Settings : Duration settings are filled in using milliseconds. A millisecond is a thousandth of a second. For example 500 = 0.5 seconds and 1000 = 1 second.

    • Slide Duration : Determines how long each slide will display, when the time is up the image will fade into the next.
    • Fade Duration : Determines the speed of when an image fades out. Higher means a slower fade, lower means a faster fade. The fade duration should always be lower than the slide duration.

  • 2. Dimension Settings : Used to set the height and width of each slide. They should be filled in using pixels.

    • Height Defines the height of each image slide.
    • Width : Defines the width of each image slide.

  • 3. Color Settings : Used to set the background and border color of each slide. Colors can be set using hex or color names.

    • Background Color : Defines the background color of each slide. If you don't want a background color leave this field blank.
    • Border Color : Defines the border color of each slide. If you don't want a border leave this field blank.

Slide Settings

The slide settings allow you to set the information for each image slide in the slide show. There's a total of 3 options for each slide's settings ; link, image, and tooltip.

Create an image slide show Captu149

link : Allows you to provide an URL that a user will be taken to when the image slide is clicked.
image : The URL of the image that the slide will display.
tooltip : Allows you to provide a short description of the image. This displays when the user moves their mouse over the image slide.

On the title of each slide you will notice some texts entitled (TOGGLE). Clicking these texts will allow you to toggle the display of the information for this slide. By default older slides are hidden when a new slide is added.

Slide buttons

Under the slide settings you will notice 3 buttons ; Delete Slide, Add Slide, and Generate Code

Create an image slide show Captu150

Delete Slide : Clicking this button will delete the most recent slide. If there's no more slides to delete, it'll return an alert.
Add Slide : Clicking this button will add another slide to your slide show that you can fill in.
Generate Code : Clicking this button will generate your slide show code. You can find the code within the code box under these 3 buttons.

Code box

The code box will contain the generated code, but can also be used to paste and edit existing slide show codes. You also have the option to preview your generated slide show code.

Create an image slide show Captu151

Preview Code : Clicking this button will allow you to preview the current slide show code in the code box via a popup.
Edit Code : If you have an existing slide show code, you can paste it into the code box and click this button to load it into the slide show generator. This will allow you to go back and change slides or settings.

Create an image slide show 09615110Where do I place my slide show code ?

You can place your slide show code wherever HTML formats, such as the homepage message, an HTML page, or a widget. These are some locations of where you can paste your slideshow code. First go to your administration panel and go to one of the following locations.

Homepage message : Display > Generalities > Homepage message

HTML Page : Modules > HTML pages management > Create or edit a page

If you're not using your forum header, make sure to include the jQuery library in the <head> section !
<script type="text/javascript" src=""></script>

Widget : Modules > Forum widgets management > Create a new widget

There are a few other locations as well, but as long as HTML formats, then that is where you can place the code.

Create an image slide show 09615110Installing the generator on your forum

As the generator is open source, you can freely use or modify the existing code. You can find the slide show code here. Click and open the slide show generator.html file, copy the contents, then go to Administration Panel > Modules > HTML pages Management > Create a new HTML page in advanced mode

Title : Slide show generator
Do you wish to use your forum header and footer ? : Yes

Paste the code you copied from the file, paste it as the page content, and save ! After that you can go back to HTML pages management and click the magnifying glass to use the generator. Wink

Ange Tuteur
Ange Tuteur

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

Back to top Go down

Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum