Magic Scroll. Dedicated to stunning images.

Show any number of images at one time.

  • Improve your store with eye-cathcing image slider.
  • Fit your all product images in one beautiful carousel.

Install | Download

Works on these pages:

    • Product details page
    • Manual install elsewhere
    All latest versions

Clean websites always develop trust in a customer, unlike sites that are cluttered or unwieldy.

Make a great first impression on your Volusion store, with a neat, organised image carousel to contain your product images. Magic Scroll can show an unlimited number of images, without your page getting out of control.

On the contrary, your page will look sophisticated on every device - desktops, tablets and mobiles too.

This Volusion image carousel extension can scroll images left/right (horizontal) or up/down (vertical). It can show one image or many images at a time. Perfect for product pages, you can also use Magic Scroll anywhere else on your Volusion website.

Take another step to become one of Volusion top performers - download the free version of Magic Scroll now!

Features you'll love...

  • Responsive
  • Fast
  • Built with SEO in mind
  • Image caching
  • Easy to customise
  • Auto image resizing
  • Scrollable thumbnails
  • Supports all templates
  • Watermarked images
  • On-demand loading
  • Regularly updated
  • jQuery compatible
  • One-off payment

Installation

  1. Download Magic Scroll (free and fully functional demo version).
  2. Upload Magic Scroll folder to Volusion website 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. Design template in Volusion admin In your Volusion admin panel, go to the Design > Template menu and click the Edit HTML link.
  4. Insert magic code in Volusion template

    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. Insert Magic Scroll images in Volusion

    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. Choose your own Volusion zoom settings 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>;
    }
    

Customer reviews

  Rating: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other Volusion extensions

Try our other great image effects!