Magic Scroll for Volusion

Installation

1. Download Magic Scroll (free and fully functional demo version).

2. 

   

   Unzip the file on your computer and FTP the magicscroll folder to the root of your website (on your server), keeping the file and folder structure intact.

3. 

   

   In your Volusion admin panel, go to the Design > Template menu and click the Edit HTML link.

4. 

   

   Insert the following lines before the </head> tag:

   <link href="/v/magicscroll/magicscroll.css" rel="stylesheet" media="screen">
   <script src="/v/magicscroll/magicscroll.js"></script>
   

5. Using FTP, create an 'images' folder inside the 'magicscroll' folder. Then upload your carousel images to the new 'images' folder.

6. 

   

   Go to: Admin > Design > Site Content > ID 2 > Default.asp > Article Body > HTML view. Enter HTML code below. Remember to reference your carousel images located on your server:

    <div class="MagicScroll">
    <img src="/v/magicscroll/images/example1.jpg">
    <img src="/v/magicscroll/images/example2.jpg">
    <img src="/v/magicscroll/images/example3.jpg">
    <img src="/v/magicscroll/images/example4.jpg">
    <img src="/v/magicscroll/images/example5.jpg">
    <img src="/v/magicscroll/images/example6.jpg">
    </div>

   Note: Please don't use the Visual Editor for editing content which contains Magic Scroll code as editor may break Magic Scroll HTML code.

7. Now your images should scroll!
8. You can customize your carousel (link to pages, speed, add text + more) using HTML code from the Magic Scroll™ integration page.
9. Buy Magic Scroll To upgrade the Magic Scroll trial (which removes the red text shown on every image), buy a Magic Scroll license. Then overwrite the demo magicscroll.js file with the one from your license.

Customization

Easily change your Magic Scroll design, layout and styling like so:
1. Go to the Magic Scroll settings wizard.
2. Choose the settings you want and click Apply settings.

3. 

   

   Click Global Settings and then click Copy to clipboard.
4. Paste the code into your Volusion page before the </head> tag.
5. That's it!

Uninstallation

Thanks for trying Magic Scroll on your Volusion site! What did you hope Magic Scroll could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

1. In your Volusion admin panel, go to Admin > Design > Site Content > ID 2 > Default.asp > Article Body > HTML view. Delete HTML code below which references your slideshow images located on your server:

    <div class="MagicScroll">
    <img src="/v/magicscroll/images/example1.jpg">
    <img src="/v/magicscroll/images/example2.jpg">
    <img src="/v/magicscroll/images/example3.jpg">
    <img src="/v/magicscroll/images/example4.jpg">
    <img src="/v/magicscroll/images/example5.jpg">
    <img src="/v/magicscroll/images/example6.jpg">
    </div>

2. Go to: Design > Template menu and click the Edit HTML link.

3. Delete the following lines from before the </head> tag:

   <link href="/v/magicscroll/magicscroll.css" rel="stylesheet" media="screen">
   <script src="/v/magicscroll/magicscroll.js"></script>
   

4. Delete the magicscroll folder from the root of your web server.
5. Magic Scroll is now uninstalled.

FAQ

1. Can I change background colour of carousel?

   Yes! By default, the Carousel & Cover-Flow modes use a grey/black background colour. You can change the Hex Colour to anything you want. With over 16,000 hex colours available, you'll be spoilt for choice. Simply add the CSS code you need to the Magic Scroll CSS file.

   Carousel background

   .MagicScroll[data-mode="carousel"] {
       background-color: <your-colour>;
   }

   Cover-flow background

   .MagicScroll[data-mode="cover-flow"] {
       background-color: <your-colour>;
   }

Other Volusion extensions

Try our other great image effects!

Magic Zoom

Magic Zoom Plus

Magic Thumb

Magic Slideshow