Magic Slideshow™ installation

Install this beautiful photo slideshow on your website.

1. Installation

If you're using one of these platforms, click your platform and follow the instructions to install the Magic Slideshow™ module:


If you're not using one of the platforms above, install Magic Slideshow™ like so:

  1. Download the Magic Slideshow™ demo (zip).
  2. Unzip the file and upload the magicslideshow folder to your server.
  3. Reference the magicslideshow.js and magicslideshow.css files before your </head> tag (or elsewhere on your page). For example:

    <link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css"/>

    <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>

  4. Create a <div> with the class MagicSlideshow.
  5. Place your images in the <div>, for example:

    <div class="MagicSlideshow">
    <img src="example1.jpg"/>
    <img src="example2.jpg"/>
    <img src="example3.jpg"/>
    </div>

  6. That's it! Continue reading to change the size, effects, speed, captions and other settings...

Contact us and we will help with any questions you have.

To remove the "Please upgrade" message, buy a license and overwrite the magicslideshow.js file with that from your license.

This 4-minute video shows exactly how to install Magic Slideshow™.



For a more detailed video, watch the beginners guide.

2. Width & height

You can choose the width and height of your slideshow or leave Magic Slideshow™ to set the dimensions via these defaults:

  • Width : 100% of the parent area (e.g. the div or td of your page).
  • Height : 62.5% of the width (that's a 16:10 aspect ratio).

If dimensions are automatically set by Magic Slideshow™, the slideshow will look like this:

<div class="MagicSlideshow">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>
</div>


To control the exact size of your slideshow, set the width and height in either px or %.

<div class="MagicSlideshow" data-options="width: 400px; height:187px;">


This next example uses 50% width. The parent on this particular page is a div of 430px width, so the slideshow width will be half of that:

<div class="MagicSlideshow" data-options="width: 50%;">


Slideshows are responsive - if a users' display is smaller than your slideshow width, it will automatically scale down to fit their display, no matter whether you use px or %.

3. Thumbnails

Each image can have a thumbnail or bullets image for quick navigation between slides.

You can choose the width of the thumbnails. This example shows 60px width thumbnails:

<div class="MagicSlideshow" data-options="selectors-style: thumbnails; selectors-size: 60px; width:400px; height:187px;">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>
</div>


Thumbnails can be positioned top, left, bottom or right (default is bottom). You can change the location of thumbnails with the selectors option, for example:

<div class="MagicSlideshow" data-options="selectors: bottom; selectors-style: thumbnails; selectors-size: 40px; selectors: right; width:400px; height:187px;">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>
</div>


Instead of having Magic Slideshow™ downsize your main images, you can use another set of images as your thumbnails. Reference them with data-thumb-image like so:

<div class="MagicSlideshow" data-options="selectors: bottom; selectors-style: thumbnails; selectors-size: 40px; width:400px; height:187px;">
<img src="example1.jpg" data-thumb-image="example1-thumb.jpg"/>
<img src="example2.jpg" data-thumb-image="example2-thumb.jpg"/>
<img src="example3.jpg" data-thumb-image="example3-thumb.jpg"/>
</div>

The current thumbnail is highlighted via a parameter called selectors-eye. You can adjust the style of the highlighting (thickness, color, shadow) via the CSS. Or you can turn it off like so:

<div class="MagicSlideshow" data-options="selectors: top; selectors-style: thumbnails; selectors-eye: false; width:400px; height:187px;">


4. Bullets

Instead of using thumbnails, you can switch between slides via bullets underneath the slideshow.

Set selectors-style to bullets like so:

<div class="MagicSlideshow" data-options="selectors-style: bullets;">

And choose whereabouts you'd like the bullets to be placed (top, bottom, left or right):

<div class="MagicSlideshow" data-options="selectors-style: bullets; selectors: bottom; width: 400px; height: 187px;">

Bullets on sides add 40px width to the slideshow, by default, so if you want the slideshow to be the same size as your images, speficy the width with 40px added. In this case, the image width is 400px, so the slideshow width has been set at 440px:

<div class="MagicSlideshow" data-options="selectors-style: bullets; selectors: bottom; width: 440px; height: 46.75%;">

Change the style of the bullets by editing the CSS in the magicslideshow.default.css file. This CSS will make the bullets larger:

.mss-bullets .mss-selector {
width: 24px;
height: 24px;
border-radius: 4px;
margin: 12px;
}
.mss-selectors-vertical .mss-bullets .mss-selectors-container {
width: 24px;
}
#custom-bullets .mss-bullets .mss-selector:after {
width: 10px;
height: 10px;
margin: 4px;
}



5. Link to URLs

Each image can link to a URL. Simply add a href to the link. Example:

<div class="MagicSlideshow">
<a href="/"><img src="example1.jpg"/></a>
<a href="example.html"><img src="example2.jpg"/></a>
<a href="http://www.example.com/any-page/"><img src="example3.jpg"/></a>
</div>

You can also add links within the text description. Example:

<div class="MagicSlideshow">
<a><img src="example3.jpg"/><span>You can add links [a href="example.htm"]within this span[/a].</span></a>
</div>

6. Multiple slideshows

One page can have many slideshows (as this page does).

If you'd like each slideshow to have different options, use a data-options tag like in all the examples on this page.

If you'd like to set the same options for all slideshows on your page, you might prefer to use MagicSlideshow.options like so:

<script type="text/javascript">
var MagicSlideshowOptions = {
      'autoplay': true,
      'kenburns': true
};
</script>

To specify different CSS attributes for a particular slideshow, give it a unique ID, for example:

<div class="MagicSlideshow" id="slide-green" data-options="width: 400px; height 187px;">

Use that ID to apply CSS only to that slideshow. This example adds a green border to the slideshow below:

#slide-green .mss-slider {
background: #8FB416;
}

7. Fading slideshow

To create a fading slideshow, change the effect parameter to either fade or dissolve.

  • fade - fade-in the next slide only.
  • dissolve - fade-in the next slide and fade-out the current one.

Example for fade:

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; effect: fade">

Example for dissolve (the difference is subtle):

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; effect: fade">

You can adjust the speed of the fading effect by changing effect-speed (default speed is 600ms). This next example has a much faster dissolve effect (200ms):

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; effect: dissolve; effect-speed: 200;">

8. Ken Burns slideshow

The Ken Burns effect is a popular technique for panning an image to make it look like you're slowly zooming in or out.

<div class="MagicSlideshow" data-options="kenburns: true; effect: fade; autoplay: true; selectors: none;">

9. Orientation

You can scroll your slideshow vertically (up / down) instead of horizontally (right / left). Set the orientation parameter like so:

<div class="MagicSlideshow" data-options="orientation: vertical; width: 400; height: 187;">

10. Speed

You can change the speed of the slide/fade/dissolve effect (effect-speed). You can also change the length of time each slide stays visible for (effect-duration).

In the example below, each slide is shown for 5 seconds (normally 3000 milliseconds) and the fade effect lasts 2.5 seconds (normally 600 milliseconds):

<div class="MagicSlideshow" data-options="effect:dissolve; slide-duration: 5000; effect-speed:2500;">

11. Arrows

On hover over a slideshow, forwards and backwards arrows appear to the left and right. For vertical slideshows, the arrows appear to the top and bottom.

There are 6 icons:

  • Left
  • Right
  • Up
  • Down
  • Full-screen
  • Close

There is one set for slides and a smaller set for thumbnails. There is a hover state for every image. This makes 24 icons in total.

buttons.png
The file buttons.png has 12px buttons and 24px buttons.

There is a further set of 24 icons, which are served to high resolution retina displays:

buttons@2x.png
The file buttons@2x.png has 32px buttons and 46px buttons.

You can design your own set of arrows, by creating images like the two above, using the same width and height of each icon.

You can remove the arrows by using the arrows parameter like so:

<div class="MagicSlideshow" data-options="arrows: false;">

12. Full screen

Show an impressive full-screen version of your slideshow by referencing large versions of your images with data-fullscreen-image, like so:

<div class="MagicSlideshow" data-options="fullscreen: true; effect: fade;">
<img src="example1.jpg" data-fullscreen-image="example1-large.jpg"/>
<img src="example2.jpg" data-fullscreen-image="example2-large.jpg"/>
<img src="example3.jpg" data-fullscreen-image="example3-large.jpg"/>
</div>

13. HTML content

A slideshow can be more than just images - it can contain any HTML content!

What will you create with Magic Slideshow™?

HTML content is perfect for slideshows

Gone are the days when slideshows can only display images.

Use HTML to create a plush looking slideshow for your site.

We've gathered some neat ways for you to make your slideshows stand out...

Embed a YouTube video

Embed YouTube, Vimeo and other videos in your slides.

Show tables

Tool Price
Magic Slideshow™ £29.00 Buy Now
Magic Zoom Plus™ £45.00 Buy Now
Magic Zoom™ £29.00 Buy Now
Magic Magnify Plus™ £39.00 Buy Now
Magic Magnify™ £29.00 Buy Now
Magic Thumb™ £25.00 Buy Now
Magic 360™ £99.00 Buy Now
Magic Scroll™ £29.00 Buy Now

Use an HTML table. You can add anything to Magic Slideshow™.

Follow us on Facebook...

14. Pause

You can set the slideshow to pause on hover, on click or onclick of a thumbnail or bullet.

This example pauses the slideshow on hover:

<div class="MagicSlideshow" data-options="pause: hover;">

15. API

You can start, stop, refresh and control the slideshow by using the API.

Start | Stop | Refresh | Previous | Pause | Next

16. Text captions

You can add captions under each image using data-caption or in a span after the image.

You can add larger text using the title tag, for example:

<div class="MagicSlideshow">
<img src="example1.jpg" data-caption="Descriptive text can go here." title="Title here"/>
<img src="example2.jpg" data-caption="You can have one or two sets of text, or none at all." title="Another title"/>
<img src="example3.jpg" data-caption="You can also use HTML such as <b>bold</b>, <i>italic</i> and <a href='http://magictoolbox.com/magicslideshow/'>links</a>."/>
< /div>

You can make the text fade or dissolve:

Fade effect:

<div class="MagicSlideshow" data-options="caption-effect: fade;">

Dissolve effect (the difference is subtle):

<div class="MagicSlideshow" data-options="caption-effect: dissolve;">

17. Text style

To change color, font, size and other text styles, edit the CSS file magicslideshow.default.css.

18. Parameters

Use the 23 parameters to make your slideshow look exactly how you want.

The parameters can be applied in two ways - simply add the data-options attribute to a slideshow, like so:

<div class="MagicSlideshow" data-options="autoplay: true; kenburns: true;"></div>

or apply your parameters in a script tag with MagicSlideshow.options like so:

<script type="text/javascript">
var MagicSlideshowOptions = {
      'autoplay': true,
      'kenburns': true
};
</script>

Using a script tag will apply the same settings to all slideshows on that page, or across your entire site if placed within your your website template (assuming you have a template/theme).

Be sure not to put a comma after your last tag or Internet Explorer will fail (a long running bug in IE).

Parameters for Magic Slideshow™
Parameter Default Options Description
Common settings
width auto auto | <pixels> | <percentage> Slideshow width.
height 62.5% auto | <pixels> | <percentage> Slideshow height.
orientation horizontal horizontal | vertical Direction for slides (left/right or up/down).
arrows true true | false Show navigation arrows on hover.
loop true true | false Continue slideshow after last slide.
effect slide slide | fade | dissolve Slide transition effect.
effect-speed 600 <milliseconds> Transition speed.
kenburns false true | false Ken Burns effect.
Autoplay
autoplay true true | false Autoplay slideshow after initialization
slide-duration 3000 <milliseconds> Length of time to show each slide for.
shuffle false true | false Shuffle the order.
pause false hover | click | selector-click | false Pause the slideshow.
Selectors
selectors none bottom | top | right | left | none Where to show selectors.
selectors-style bullets bullets | thumbnails Style of selectors.
selectors-size 70 <pixels> | <size>
e.g. selectors-size: 90x60
Size of thumbnails.
selectors-eye true true | false Highlighter for active thumbnail.
Caption
caption true true | false Display text on a slide.
caption-effect fade fade | dissolve | fixed Effect when changing captions.
Other settings
fullscreen false true | false Enable full-screen view.
preload true true | false Load images automatically or on demand.
keyboard true true | false Use left / right arrows to change slides.
links _self _self | _blank | false How to open links on slides.
loader true true | false Show loading icon while downloading.

Credit: photos courtesy of Andrew Tan.