Magic Scroll™ integration

Magic Scroll™ can be installed in a few simple steps. Then you can customize it just how you want it.

Installation

1. Download the Magic Scroll™ demo.
2. Unzip it and copy the magicscroll folder to your website.
3. Reference the CSS and JS files before the </head> of your page. Example:

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

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

   (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 a class of MagicScroll and put whatever you want to scroll inside it. Here is a scroll of 6 images, each linking to a URL:
   <div class="MagicScroll">
    <a href="/page-1/"><img src="example1.jpg"/></a>
    <a href="/page-2/"><img src="example2.jpg"/></a>
    <a href="/page-3/"><img src="example3.jpg"/></a>
    <a href="/page-4/"><img src="example4.jpg"/></a>
    <a href="/page-5/"><img src="example5.jpg"/></a>
    <a href="/page-6/"><img src="example6.jpg"/></a>
   </div>

   This is how it looks:

   

Customization

1. Wizard
2. Upgrade
3. Images without links
4. Images with links and text
5. Text with links
6. Choice of tag
7. Speed
8. Duration
9. Looping
10. Number of items

11. Size
12. Arrows
13. Border
14. Background
15. Direction
16. Slider
17. API / Callbacks
18. Combinations
19. Multiple scrolls on page
20. List of parameters

1. Wizard

Save time! Use the wizard to choose your perfect settings for Magic Scroll™. It's fast and easy.

Each setting is explained on this page. If you get stuck, just contact us and we'll reply ASAP.

2. Upgrade

To remove the red "Please upgrade" message, buy Magic Scroll™ and overwrite the magicscroll.js file with that from your fully licensed version.

Non-commercial sites can apply for a free license.

3. Images without links

The example below uses images only. Magic Scroll™ looks for <a> links by default, so as there are no <a> links in the code, we must add the 'item-tag' JavaScript parameter to tell Magic Scroll™ to scroll all items with <img>. (More explanation of the item-tag is below).

4. Images with links and text

The example below uses images, with text and with links to URLs. If you add text to your images, you must also specify height and ideally width too otherwise the images will be scaled down. (The default height is determined as the height of your tallest image).

Chestnut Blue Charcoal Green Pink White

5. Text with links

The example below scrolls 1 headline of text every 3 seconds (3000 milliseconds).

6. Choice of tag

You may scroll items that are inside <a> tags, <img> tags, <div> tags or <p> tags. The default is <a>. If you want to scroll items that do not start with <a>, you must specify what type of item it is.

To scroll a collection of images without links, set the 'item-tag' to img like so:

To scroll HTML content within divs, set the 'item-tag' to div like so:

7. Speed

Change the amount of time the items are stationary. The default is 5000ms (5000 milliseconds = 5 seconds). Make it faster by reducing the number of milliseconds e.g.

To stop the automatic scroll and use arrows only, set the speed to 0:

8. Duration

Adjust how long the slide effect takes. The default is 1000ms (1 second). To make it faster, decrease the number e.g.

9. Looping

The scroll will seamlessly continue from the last image to the first image. Alternatively, you can scroll it all the way back to the beginning like so:

10. Number of items

Three items are shown by default. You can change this with the 'items' parameter:

Each time it scrolls, it will move by the same number of items on display, i.e. 5 in the example above. Use the 'step' parameter if you want to scroll more or fewer items, for example:

11. Size

The height and width of the scroll area is automatically calculated to fit the number of items in your scroll and the dimensions of those items. You can override this by choosing your own dimensions in pixels. Example:

12. Arrows

Change the default arrow design to one of the other designs included in the graphics folder, or design your own!

To change the arrows, edit the image URL within the magicscroll.css file. This is the default CSS:

You can also edit the CSS to change the background color, padding, arrow dimensions and cursor.

These 4 arrow designs come with Magic Scroll™:

To make the arrows brighter or more subtle, adjust the opacity e.g.

13. Border

To add a border around your scroll, edit the MagicScroll style in magicscroll.css. For example:

14. Background

The default background color is transparent. To change this, edit the MagicScroll style in magicscroll.css. For example:

15. Direction

Change the direction of the scroll by setting the 'direction' parameter to top, right, bottom or left. For example:

16. Slider

To display a scroll bar below your images, set 'slider' to top, right, bottom or left. The default is 'false' (not shown). To show a slider underneath, do this:

17. API / Callbacks

Use the API to trigger AJAX actions when the user does things on the page or clicks something.

• MagicScroll.init() - find and start all scrolls on the page.
• MagicScroll.init(yourdiv) - find and start scroll with a particular div id.
• MagicScroll.stop() - stop all scrolls on the page.
• MagicScroll.stop(yourdiv) - stop a particular scroll by specifying its div id.
• MagicScroll.start(yourdiv) - start a particular scroll by specifying its div id.
• MagicScroll.refresh() - reload all scrolls on the page
• MagicScroll.refresh(yourdiv) - reload a particular scroll by specifying its div id.
• MagicScroll.pause(yourdiv) - pause automatic scrolling on a particular div.
• MagicScroll.play(yourdiv) - start automatic scrolling on a particular div.

Example:

18. Combinations

You can use Magic Scroll™ with our other tools. View some examples.

• Magic Zoom Plus™
• Magic Zoom™
• Magic Magnify Plus™
• Magic Magnify™
• Magic Thumb™
• Magic Touch™

First, create your scroll. Then insert a rel with a zoom-id the same as the id of the image you want to zoom. This example has 4 images, each with a small, medium and big size:

The example above will scroll the 4 small images with Magic Scroll™ and zoom the medium sized images with Magic Zoom Plus™. It is perfect if you have lots of thumbnails of a product and don't want them to take up lots of space on your page.

19. Multiple scrolls on page

You can place any number of scrolls on a web page. Each scroll can have different settings.

To apply the same parameters to all scrolls on your page, use MagicScroll.options. For example:

To apply different parameters to a particular scroll, give it a unique id e.g. MyStyle:

and then specify its parameters like in this example:

Get help

If you are stuck, use the wizard which will output the HTML you need.

If you are still stuck, please contact us and we'll help you.