MagicToolbox.comImage tools for your website Contact Us

Magic Slideshow™ installation

Install this beautiful photo slideshow on your website.

  1. Quick install
  2. Example without thumbnails
  3. Example with thumbnails
  4. Customising the JavaScript
  5. Changing the size
  6. Link to URL
  1. Arrow buttons
  2. Text
  3. Text style
  4. Border
  5. Background
  6. Parameters

1. Quick install

  1. Download the Magic Slideshow™ demo.
  2. Upload the magicslideshow folder to your server.

  3. Reference the magicslideshow.js and magicslideshow.css files before your </head> tag.

    (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)

  4. Create a <div> with the class MagicSlideshow.
  5. Place your images in the <div>. That's all! See the two HTML examples below.

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

Watch this 4-minute video to see exactly how to install Magic Slideshow™!



For a more detailed video, watch the beginners guide.

2. Example without thumbnails

Your code should look something like this:

<html>

<head>

<title>Magic Slideshow example</title>

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

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

</head>

<body>

<div class="MagicSlideshow">

<img src="example1.jpg"/>

<img src="example2.jpg"/>

<img src="example3.jpg"/>

<img src="example4.jpg"/>

</div>

</body>

</html>

3. Example with thumbnails

Your code should look something like this:

<html>

<head>

<title>Magic Slideshow example</title>

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

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

</head>

<body>

<div class="MagicSlideshow">

<a rel="example1.jpg"><img src="example1small.jpg"/></a>

<a rel="example2.jpg"><img src="example2small.jpg"/></a>

<a rel="example3.jpg"><img src="example3small.jpg"/></a>

<a rel="example4.jpg"><img src="example4small.jpg"/></a>

</div>

</body>

</html>

4. Customizing the JavaScript

You can adjust up to 27 different parameters in the JavaScript. Place each parameter in a script tag - example below. Be sure to not put a comma after your last tag or Internet Explorer will fail (a well documented IE bug).

<script type="text/javascript">
MagicSlideshow.options = {
  'speed': 4,
  'text-effect': 'slide',
  'text-delay': 0.6
}
</script>

5. Changing the size

Your slideshow will automatically scale to the dimensions of your first image. All other images will scale downwards to fit these dimensions.

You can specifically set the size of the slideshow using width and/or height parameters. Example:

<script type="text/javascript">
MagicSlideshow.options = {
  'width': 400,
  'height': 300
}
</script>

You can stretch the images to the same size using the preserve parameter. Example:

<script type="text/javascript">
MagicSlideshow.options = {
  'preserve': 'no'
}
</script>

6. Link to URL

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

<div class="MagicSlideshow">

<a href="example.htm"><img src="example1.jpg"/></a>

<a href="/"><img src="example2.jpg"/></a>

<a href="http://www.example.com"><img src="example3.jpg"/></a>

</div>

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

<div class="MagicSlideshow">

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

</div>

7. Arrow buttons

Forward and back arrow buttons are shown on the right and the left. You can hide them using the arrows parameter:

<script type="text/javascript">
MagicSlideshow.options = {
  'arrows': 'no'
}
</script>

Change the opacity of the arrows with arrows-opacity and arrows-hover-opacity. Example:

<script type="text/javascript">
MagicSlideshow.options = {
  'arrows-opacity': 0.1,
  'arrows-hover-opacity': 0.7
}
</script>

Magic Slideshow™ comes with 9 sets of arrows

arrows01.png
arrows02.png
arrows03.png
arrows04.png
arrows08.png
arrows09.png
arrows05.png
arrows06.png
arrows07.png

To change the arrow buttons, edit the background CSS property of a.MagicSlideshowArrow in the magicslideshow.css:

background: url('graphics/arrows06.png');

8. Text

You can add text description to the image using the <span>.

Example without thumbnails:

<div class="MagicSlideshow">

  <img src="example1.jpg"/>

  <img src="example2.jpg"/><span>Here is some text</span>

</div>

Example with thumbnails:

<div class="MagicSlideshow">

  <a rel="example1.jpg"><img src="example1small.jpg"/><span>Here is some text</span></a>

  <a rel="example2.jpg"><img src="example2small.jpg"/></a>

</div>

The text description is positioned to the bottom of the image by default. You can place it to the top of the image changing the text-position parameter:

<script type="text/javascript">
MagicSlideshow.options = {
  'text-position': 'top'
}
</script>

You can make the text description slide or fade:

Slide effect:

<script type="text/javascript">
MagicSlideshow.options = {
  'text-effect': 'slide'
}
</script>

Fade effect:

<script type="text/javascript">
MagicSlideshow.options = {
  'text-effect': 'fade'
}
</script>

Add a heading to the text description via the ALT of your images:

<div class="MagicSlideshow">

  <img src="example1.jpg"/>

  <img src="example2.jpg" alt="Big heading"/><span>You can add headings like the one above</span>

</div>

To use the ALT tag but hide the text from showing on your slideshow, copy and paste this style to the end of your magicslideshow.css file:

.MagicSlideshowDescription b {
display: none;
}

9. Text style

To change styles of the text, edit the the CSS class .MagicSlideshowDescription in the magicslideshow.css file:

.MagicSlideshowDescription {
line-height: 24px;
background: #333333;
color: #FFFFFF;
padding: 3px !important;
}

10. Border

To change the outside border, edit the border property of div.MagicSlideshow:

border: 1px solid #557493;

11. Background

To choose a background colour or image, open the CSS and set the background attribute of .MagicSlideshow:

.MagicSlideshow {
background: #9C09C0;
}

or:

.MagicSlideshow {
background: url('your-image.png') no-repeat;
}

For inspiration, see the CSS used on the examples page or download the Magic Slideshow™ demo (zip) and check out the many examples. If you get stuck, contact us.

12. Parameters

Parameters for Magic Slideshow™
Parameter Default Options Description
Slideshow
speed 5 numeric Change the slide speed in seconds (0 - manual)
loop yes yes/no Restart slideshow after last image
loop-type next first/next Continue to next image or slide all the way back
width auto 'auto' or numeric Slideshow width (pixels)
height auto 'auto' or numeric Slideshow height (pixels)
Sliding effect
effect scroll scroll/fade/none Effect for image sliding
effect-next scroll scroll/fade/none Effect when arrow is clicked
effect-jump fade scroll/fade/none Effect when thumbnail is clicked
effect-duration 1.0 numeric Duration of effects (seconds)
direction right top/right/bottom/left Direction of slide
Text
text effect always/effect Display text always or give it an effect
text-effect fixed fixed/slide/fade Choice of text effects
text-delay 0.5 numeric Delay before the text effect starts
text-opacity 0.6 numeric Opacity of text and backgrounds
text-position bottom top/bottom Position of text (must be different to 'container-position')
Arrows
arrows yes yes/no Show arrows
arrows-opacity 0.6 numeric Opacity of arrows
arrows-hover-opacity 1.0 numeric Opacity of arrows on mouse over
Thumbnails
thumbnails outside inside/outside/off Position of thumbnails
thumbnail-opacity 0.8 numeric Opacity of thumbnails (0-1)
container-size auto 'auto' or numeric Size of thumbnails container (pixels)
container-position top top/right/bottom/left Position of thumbnail container
container-opacity 0.3 numeric Opacity of thumbnail container
container-speed 10 numeric Speed that thumbnails move (pixels per second)
container-padding 0 numeric Padding beetwen container and slideshow (pixels)
Other
pause off hover/click/thumbnail-click/off Pause slideshow
preserve yes yes/no Use original image proportions or stretch them to same size
loading-text text Display text with the loading icon (empty by default)
start 1 numeric Choose which image to start slideshow at
autostart yes yes/no Autostart slideshow on document ready
preload-in-order no yes/no Preload images simultaneously or one-at-a-time
z-index 200 numeric Starting zIndex
use-links yes yes/no Enable/Disable links
links-window _self _self/_blank/_parent/_top Page where a link should load
Buy Now1 site license £29

30 day money-back guarantee.
Free license for non-commercial use

Download Free trial

30 minutes free technical support.

Download a module:



Magic Toolbox on Facebook Magictoolbox.com on YouTube Magic Toolbox on Twitter Magic Toolbox on GetSatisfaction