Markup

An example of the markup with all possible attributes looks like this:
    <div id="slider" style="display: none">
        <div data-zoom="1.3" data-direction="top-left">
            <img src="images/slide1/1.png" data-distance="0.9" data-left="0" data-top="0" data-width="100" data-height="100"/>
            <img src="images/slide1/2.png" data-distance="0.6" data-left="0" data-top="0" data-width="100" data-height="100"/>
            <img src="images/slide1/3.png" data-distance="0.5" data-left="0" data-top="0" data-width="100" data-height="100"/>
            <img src="images/slide1/4.png" data-distance="0.4" data-left="10.5" data-top="0" data-width="80" data-height="100"/>
            <img src="images/slide1/5.png" data-distance="0.2" data-left="36" data-top="10" data-width="60" data-height="91" />
            <div class="slider-text-1" data-distance="0.0" data-left="12" data-top="-5" data-width="50" data-height="50">Some text</div>
            <div class='slider-text-2' data-distance="0.0" data-left="11" data-top="4" data-width="50" data-height="50">Another text</div>
        </div>
        <div data-zoom="1.3" data-direction="bottom-left">
            <img src="images/slide2/1.png" data-distance="0.7" data-left="0" data-top="0" data-width="100" data-height="100" />
            <img src="images/slide2/2.png" data-distance="0.4" data-left="29" data-top="10" data-width="28" data-height="77" />
            <img src="images/slide2/3.png" data-distance="0.1" data-left="49" data-top="0" data-width="51" data-height="100" />
        </div>
    </div>
# Markup

Markup
