Fade-In Slideshow v2.14 : Tutorial [1]
Creating a new slideshow
In this tutorial, you will create the first slideshow using the Fade-In Slideshow admin panel.
Prepare images for slideshow
The first step is to collect the images you want to include in the slideshow. For this tutorial, we'll be using these three images:
It would be ideal if all the images were the same size. If not, you can have the admin panel resize the images automatically. We'll discuss more about automatic resizing later in this page.
Creating a new slideshow
In order to create a new slideshow, click Slideshows on the top menu bar,
and then click Add New.
Click Add New
This will open the Add New form.
Add new slideshow Form
Enter the title and the size of the new slideshow you will create.
The title is used in the admin panel only. Enter a meaningful title.
Enter a title
Now, it's time to specify the size of the slideshow. If all the pictures are the same size,
then simply input the size of the pictures in pixels.
Enter a size in pixels
If all the pictures are not the same size,
then you need to come up with a good size that will satisfy
how you want to display the slideshow on web pages.
To do so, you should understand how the size information is used in Fade-In Slideshow.
The next section will explain two important facts about slideshow size.
Understanding slideshow size
Slideshow can shrink but maintains the aspect ratio
Suppose you have a slideshow whose size is 200px(width) × 100px(height), like shown below:
Slideshow 200px wide and 100px high
Consider putting this slideshow into the space that has a width of 100px.
The available space is 100px wide
Then the slideshow shrinks to 100px in width and it's height becomes 50px accordingly.
Slideshow can shrink
As shown in the example above, slideshow can shrink to fit inside an available space,
however it's aspect ratio remains the same.
Uploaded pictures will shrink to fit in slideshow
Suppose you have a 100px wide and 50px high slideshow.
A 100px wide and 50px high slideshow
Consider uploading a 200px wide and 100px high image onto the slideshow, which is clearly bigger than the slideshow,
Uploading a 200px wide and 100px high image
The image will automatically get resized to 100px wide and 50px high to fit inside the slideshow.
The image will automatically get resized
In the above example, they may be different size but still have the same aspect ratio, 2 to 1.
Aspect ratio = 2 : 1
In the next example, we will consider a case in which
the uploaded image and the slideshow have different aspect ratios.
Uploading an image with a different aspect ratio
Just like the previous example, the image gets resized to fit in the slideshow.
However, it creates spaces on sides because they have different aspect ratios.
Different aspect ratios create spaces
You can upload the image without maintaining the aspect ratio, so the image will get
stretched to fill the slideshow.
The image gets stretched without maintaining the aspect ratio
«
Setting up Hostname, Database, Username, and Password
|
|
Adding slides and uploading pictures »
|