Install this beautiful photo slideshow on your website.

Getting Started

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 on your computer and FTP the magicslideshow folder to your website directory (on your server), keeping the file and folder structure intact.
  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.

Size

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 40% width. The parent on this particular page is a div of 430px width, so the slideshow width will be less than half of that:

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

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 %.

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: bottom; selectors-size: 60px;">
    <img src="example1.jpg"/>
    <img src="example2.jpg"/>
    <img src="example3.jpg"/>
</div>

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

<div class="MagicSlideshow" data-options="selectors: right; selectors-style: thumbnails; selectors-size: 40px;">
    <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;">
    <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;">

Custom selectors. With a little imagination and ...

<style>
    .MagicSlideshow .mss-selectors-wrapper {
        background: #fbd2ee;
        background: -webkit-linear-gradient(top, #fbd2ee 0%, #f5f1c9 100%);
        background: -moz-linear-gradient(top, #fbd2ee 0%, #f5f1c9 100%);
        background: -ms-linear-gradient(top, #fbd2ee 0%, #f5f1c9 100%);
        background: -0-linear-gradient(top, #fbd2ee 0%, #f5f1c9 100%);
        background: linear-gradient(top, #fbd2ee 0%, #f5f1c9 100%);
    }   
    .MagicSlideshow .mss-selectors-container {
        text-align: left !important;
        width: 100% !important;
        height: 100% !important;
    }
    .MagicSlideshow .mss-selectors-container .mss-selector {
        margin: 5px !important;
        text-align: center;
        width: 50px !important;
        clear: both;
    }
</style>
<div class="MagicSlideshow" data-options="selectors-style: thumbnails; selectors: right; selectors-size: 245;">
    <img src="example1.jpg" data-thumb-image="example1-thumb.jpg" alt=""/>
    <img src="example2.jpg" data-thumb-image="example2-thumb.jpg" alt=""/>
    <img src="example3.jpg" data-thumb-image="example3-thumb.jpg" alt=""/>
    ...
</div>

You can fill all selectors with selectors-fill parameter.

<div class="MagicSlideshow" data-options="selectors-style: thumbnails; selectors-fill: true; selectors: bottom;selectors-size: 20; selectors-eye: false;">
    <img src="example1.jpg" data-thumb-image="example1-thumb.jpg" alt=""/>
    <img src="example2.jpg" data-thumb-image="example2-thumb.jpg" alt=""/>
    <img src="example3.jpg" data-thumb-image="example3-thumb.jpg" alt=""/>
    ...
</div>

HTML thumbnails

Title 1
Thumbnail 1
Title 2
Thumbnail 2
Title 3
Thumbnail 3
Title 4
Thumbnail 4
Title 5
Thumbnail 5
Title 6
Thumbnail 6
Title 6
Thumbnail 7

<style>
.MagicSlideshow div[data-mss-thumbnail] {
    padding: 5px;
}
</style>
<div class="MagicSlideshow" data-options="width: 500; selectors-style: thumbnails; selectors: right; selectors-size: 100;">
    <div><img src="example1.jpg" alt=""/><div data-mss-thumbnail><b>Title 1</b><br/>Thumbnail 1</div></div>
    ...
</div>

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):

bullets-preview parameter have three states (top, bottom, none). By default bullets-preview is switched on and you can see preview of slide when you hover on bullet

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

You can switch off bullets preview.

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

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%;">
</div>

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: 12px;
    height: 12px;
    margin: 4px;
}

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 (slide-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;">

Fullscreen

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>

Slide effects

Choose from a slick range of 14 image effects, including: slide (default), fade, fade-up, fade-down, dissolve, cube, bars3d, slide-in, slide-out, flip, blinds3d, slide-change, diffusion, blocks or choose random. To select effect, use the effect parameter.

Pick your favourite: click below to try each effect:

<div class="MagicSlideshow" data-options=""></div>

Alternatively, use a mixture of effects by setting effect to random:

<div class="MagicSlideshow" data-options="effect: random; effect-speed:1500;">

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

<div class="MagicSlideshow" data-options="effect: fade-down; effect-speed: 200;">

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-up; autoplay: true;  selectors: none;">

Video

It's easy to make a slideshow of videos or a mixture of videos and images. This example shows left/right arrows on hover and has auto-sliding disabled:

<div class="MagicSlideshow" data-options="width: 60%; height: 56.25%; effect: fade-up; autoplay: false;">
    <iframe data-video-fullsize="true" src="https://www.youtube.com/embed/JUdNeFh2SDo"></iframe>
    <iframe data-video-fullsize="true" data-video-autoplay="true" src="https://player.vimeo.com/video/192130017"frameborder="0"></iframe>
</div>

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 href="/magicslideshow/">
        <img src="example3.jpg" data-caption="Descriptive text can go here." data-caption="You can add links [a href='example.htm']within this attribute[/a]." />
    </a>
    ...
</div>

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;">

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. You can design the buttons by overriding default css.

<style>
.MagicSlideshow.mss-horizontal .mss-slider .mss-arrow-prev:before,
.MagicSlideshow.mss-horizontal .mss-slider .mss-arrow-next:before {
    border-color: rgb(212, 214, 124) !important;
}
</style>
<div class="MagicSlideshow">
    <img src="example1.jpg" alt=""/>
    <img src="example2.jpg" alt=""/>
    <img src="example3.jpg" alt=""/>
    ...
</div>

Also slideshow has play button but it is disabled by default. You can switch on by css .MagicSlideshow .mss-button-play { display: block; }. For simplicity, slideshow has class mss-control-bar and if you will add it to slideshow container, you can see control bar.

<div class="MagicSlideshow mss-control-bar" data-options="fullscreen: true;">
    <img src="example1.jpg" alt=""/>
    <img src="example2.jpg" alt=""/>
    <img src="example3.jpg" alt=""/>
    ...
</div>

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

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

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

Magic Slideshow - Integration GuideGone 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 £25.00 Buy Now
Magic Zoom Plus £45.00 Buy Now
Magic 360 £99.00 Buy Now
Magic Zoom £29.00 Buy Now
Magic Thumb £25.00 Buy Now
Magic Scroll £29.00 Buy Now

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

Follow us on Facebook...

<div class="MagicSlideshow" data-options="width:430px; height: 300px; slide-duration:6000;">

Lazy Loading

You can configure the slideshow to load images on demand (lazy loading). Set the preload parameter to false and use data-image attribute to specify the URL of the image instead of the src. Example:

<div class="MagicSlideshow" data-options="preload: false;">
    <img data-image="example1.jpg">
    <img data-image="example2.jpg">
    <img data-image="example3.jpg">
</div>

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;">

Text caption

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:

Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide

<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='/magicslideshow/'>links</a>."/>
</div>

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 MagicSlideshowOptions 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 {
    border: 12px solid #0073bd;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.5);
    transition: box-shadow .4s;
}
#slide-green:hover {
    box-shadow: 9px 9px 12px rgba(0, 0, 0, 0.5);
}

Zoom your slideshow

You can add zoom and enlarge effects to each image in your slideshow by combining Magic Zoom Plus with Magic Slideshow.

Update your file references before your </head> tag. For example:

<link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

<link href="magicslideshow/magicslideshow.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>

<script>
window.MagicSlideshowOptions || (window.MagicSlideshowOptions = {});
MagicSlideshowOptions.onReady = function() {
  if (arguments[0].slideShowId=='zoom-slideshow') { MagicZoom.start(); }
};
</script>

<style type="text/css">
.mss-slide div { 
    text-align:center;
}
.mss-slide figure.mz-figure {
    width: 100%;
    height: 100%;
}  
</style>

Place the following code in the <body> tag of your web page. The example below uses thumbnails

Your slideshow will look like this:

Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide

<div class="MagicSlideshow" data-options="autoplay: false; selectors: bottom; selectors-style: thumbnails;" id="zoom-slideshow">
	<a href="big1.jpg" class="MagicZoom" data-options="autostart:false;"><img data-thumb-image="tiny1.jpg" src="small1.jpg"/></a>
	<a href="big2.jpg" class="MagicZoom" data-options="autostart:false;"><img data-thumb-image="tiny2.jpg" src="small2.jpg"/></a>
	<a href="big3.jpg" class="MagicZoom" data-options="autostart:false;"><img data-thumb-image="tiny3.jpg" src="small3.jpg"/></a>
	<a href="big4.jpg" class="MagicZoom" data-options="autostart:false;"><img data-thumb-image="tiny4.jpg" src="small4.jpg"/></a>
</div>

If you prefer to use bullets instead of thumbnails, please use this code in your <body> tag:

Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide
<div class="MagicSlideshow" data-options="autoplay: false; selectors: bottom; selectors-style: bullets;" id="zoom-slideshow">
	<a href="big1.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small1.jpg"/></a>
	<a href="big2.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small2.jpg"/></a>
	<a href="big3.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small3.jpg"/></a>
	<a href="big4.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small4.jpg"/></a>
</div>

API & Callbacks

You can control the slideshow by using the API.

  • MagicSlideshow.start(node) - Start Magic Slideshow instance by #id or reference to <a> tag. Without parameters, start all instances on the page.
  • MagicSlideshow.stop(node) - Stop Magic Slideshow instance by #id or reference to <a> tag. Without parameters, stop all instances on the page.
  • MagicSlideshow.refresh(node) - Reload Magic Slideshow instance by #id or reference to <a>. Without parameters, reload all instances on the page.
  • MagicSlideshow.play(node) - Play Magic Slideshow instance by #id or reference to <a> tag. Without parameters, play all instances on the page.
  • MagicSlideshow.pause(node) - Pause Magic Slideshow instance by #id or reference to <a> tag. Without parameters, pause all instances on the page.
  • MagicSlideshow.next(node) - Go to the next slide of a particular slideshow. Without parameters, go all instances on the page.
  • MagicSlideshow.prev(node) - Go to the previous slide of a particular slideshow. Without parameters, go all instances on the page.
  • MagicSlideshow.jump(node, index) - Switch to a particular slide by index. index - is number of the slide (index number starts from 0).
  • MagicSlideshow.enterFullscreen(node) - Go to Magic Slideshow fullscreen mode by #id or reference to <a> tag.
  • MagicSlideshow.exitFullscreen(node) - Exit from Magic Slideshow fullscreen mode by #id or reference to <a> tag.
  • MagicSlideshow.running(node) - Check is Magic Slideshow running by #id or reference to <a> tag.
  • MagicSlideshow.getActiveSlide(node) - Get index of active slide by #id or reference to <a> tag.
  • MagicSlideshow.getInstance(node) - Get Magic Slideshow instance by #id or reference to <a> tag.

Example:

Callbacks:

  • onReady: function({slideShowId: "id"}) {} - Fires when slideshow instance is ready to operate
  • onPlay: function({slideShowId: "id"}) {} - Fires when autoplay mode activated
  • onPause: function({slideShowId: "id"}) {} - Fires when autoplay mode deactivated
  • onVideoPlay: function({slideShowId: "id", slideIndex: e.index}) {} - Fires when video played
  • onVideoPause: function({slideShowId: "id"}) {} - Fires when video paused
  • onEnterFullscreen: function({slideShowId: "id", slideIndex: number_of_slide, videoState: state_of_video}) {} - Fires when slideshow in fullscreen mode
  • onExitFullscreen: function({slideShowId: "id", slideIndex: number_of_slide, videoState: state_of_video}) {} - Fires when slideshow in common mode after fullscreen mode
  • onBeforeSlideChange: function({slideShowId: "id", currentIndex: number_of_slide, nextIndex: number_of_slide}) {} - Fires before when slide swapped
  • onAfterSlideChange: function({slideShowId: "id", prevIndex: number_of_slide, currentIndex: number_of_slide}) {} - Fires after when slide swapped

Parameters

Use the 25 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 MagicSlideshowOptions 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 auto 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 random | slide | fade | fade-up | fade-down | dissolve |
cube | bars3d | slide-in | slide-out | flip |
blinds3d | slide-change | diffusion | blocks
Slide transition effect.
effect-easing ease linear | ease | ease-in-out | ease-in | ease-out | 'cubic-bezier' CSS3 Animation Easing. See cubic-bezier.com.
effect-speed 600 <milliseconds> Transition speed.
kenburns false true | false Ken Burns effect.
Autoplay
autoplay true true | false Autoplay slideshow after initialization
slide-duration 6000 <milliseconds> Length of time to show each slide for.
shuffle false true | false Shuffle the order.
pause true true | 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.
bullets-preview top top | bottom | none Show tooltip on bullets.
selectors-fill false true | false When set to true, arrows removed from selector area and all selectors are shown.
Other settings
caption true true | false Display text on a slide.
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.
autostart true true | false Whether to start Slideshow automatically on page load or manually.
show-loader false true | false Show slide's timeline.

Credit: photos courtesy of Andrew Tan.