MagicScroll.stop(#id) - stop scroller by #id.Without parameters, start all scrollers on the page. MagicScroll.start(#id) - start scroller by #id.You can use the Magic Scroll API methods to scroll your items dynamically: To start it manually set autostart parameter to false. Magic Scroll starts automatically when page is loaded by default. Simply add the following code to the bottom of the magicscroll.css file: Carousel background This can be quickly changed to any colour to fit your web design. BackgroundĬhange the background colour for Carousel and Cover-flow to fit perfectly with your web design.īy default the colour displays as a dark grey background. 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. The example above will scroll the 4 small images with Magic Scroll and zoom the medium sized images with Magic Zoom Plus. This example has 4 images, each with a small, medium and big size: Then insert a data-zoom-id attribute with a value of the id of the image you want to zoom. You can use Magic Scroll with our other apps like Magic Zoom Plus, Magic Zoom or Magic Thumb.įirst, create your scroll. Magic Thumb - enlarge your images to full-screen. Magic Slideshow - watch a whole series of images. Magic Zoom - hover to zoom into your images. Magic Scroll - effortlessly scroll through products. Magic Zoom Plus - hover to zoom, click for expanded view. Here is a scroll of 9 images, each linking to a URL: If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.Ĭreate a div with a class of MagicScroll and put whatever you want to scroll inside it. Reference the CSS and JS files before the of your page. Unzip the file on your computer and FTP the magicscroll folder to your website directory (on your server), keeping the file and folder structure intact.
0 kommentar(er)
