Thursday, 5 January 2012

Two side image slide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Magic Slideshow: Default</title>
   
        <!-- link to magicslideshow.css file -->     
        <link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>     
        <!-- link to magicslideshow.js file -->
        <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
       
    <style type="text/css"><!--
        body {background:#fff; margin:0; padding:0; font-size: 100%;}
        body, td {font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; line-height: 1.5em;}
        h1 {font-size:1.5em; font-weight:normal; color:#555;}
        h2 {font-size:1.3em; font-weight:normal; color:#555;}
        h2.caption {margin: 2.5em 0 0;}
        h3 {font-size:1.2em; font-weight:normal; color:#555;}
        a {outline: none;}
        table {margin:0; padding:0; border-collapse: collapse;}
        th {background:#CCC; text-align: left; padding: 2px 4px; font-weight: normal;}
        td {vertical-align: top; border: 1px;}
        img {border:0;}
        .leftcol {background:#EDF6CA; padding: 20px;}
        .nav {width: 180px;}
        .nav h2 {background: #658F11; margin:10px 0 0 0; padding: 3px 3px 5px 10px; font-size: 0.9em; color:#FFF;}
        .nav ul {list-style-type: none; padding: 0 0 10px 0; margin:0 0 20px; background:#99CC33;}
        .nav li a {text-decoration: none; display: block; padding: 3px 3px 3px 10px; margin: 0; font-size: 0.9em; color:#FFF; zoom: 1;}
        .nav li a:hover {background: #B5DF61;}
        .active {font-weight: bold;}
        .arrow {text-align: right;}
        .menuTd a {color:#fff; font-weight:bold;}
        code, .code {font-size:12px; line-height:18px; margin:10px 0; display:block; padding:3px; border:1px solid #aaa;}
        code {padding: 3px 10px;}
        span.r {color:red;}
        span.g {color:green;}
        span.b {color:blue;}
        table.tbl {background:#aaa; margin-bottom: 20px; font-size: 0.9em; border: 1px solid #999;}
        caption {text-align: left; padding: 4px 12px; background: #999; color: #fff; font-size: 1.1em; margin: 0 0 0 -1px;}
        caption a {color: #fff; padding: 2px;}
        caption a:hover {background:#FFF; color: #999;}
        .tbl th {background:#eee; padding:4px 8px 4px 16px;}
        .tbl td {background:#fff; padding:4px 8px 4px 16px; vertical-align:top; border-bottom: 1px #999 solid;}
        .tbl .tr1 td {background:#fff;}
        .tbl .tr2 td {background:#f2f2f2;}
        .mtbl {width:100%; height:100%;}
        .rTd {padding:20px; width:100%;}
        div.exmpl {margin:0 0 5px 0; font-weight:bold;}
        .html4strict {border:1px solid #AAAAAA; display:block; font-size:12px; line-height:18px; margin:10px 0pt; padding:3px;}
        .html4strict .de1, .html4strict .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
        .html4strict {font-family:monospace;}
        .html4strict .imp {font-weight: bold; color: red;}
        .html4strict li, .html4strict .li1 {font-weight: normal; vertical-align:top;}
        .html4strict .ln {width:1px; text-align:right; margin:0; padding:0 2px; vertical-align:top;}
        .html4strict .li2 {font-weight: bold; vertical-align:top;}
        .html4strict .kw2 {color: #000000; font-weight: bold;}
        .html4strict .kw3 {color: #000066;}
        .html4strict .es0 {color: #000099; font-weight: bold;}
        .html4strict .br0 {color: #66cc66;}
        .html4strict .sy0 {color: #66cc66;}
        .html4strict .st0 {color: #ff0000;}
        .html4strict .nu0 {color: #cc66cc;}
        .html4strict .sc-1 {color: #808080; font-style: italic;}
        .html4strict .sc0 {color: #00bbdd;}
        .html4strict .sc1 {color: #ddbb00;}
        .html4strict .sc2 {color: #009900;}
        .html4strict .ln-xtra, .html4strict li.ln-xtra, .html4strict div.ln-xtra {background-color: #ffc;}
        .html4strict span.xtra {display:block;}
        p.buttons {float: right; margin: -40px 0px 10px 0} 
        p.buttons a { 
                background: #FA9C0F; padding: 4px 10px 4px 12px; 
                margin-right: 6px; font-size: 1em; color:#fff; text-decoration: none; 
                line-height: 1em;outline: none; border: 1px solid #CF7E00
        } 
        p.buttons a:hover {background: #FFBA4F} 
    --></style>
</head>
<body>
<table class="mtbl">
<tr>
    <td class="leftcol">
        <div class="nav">
            <h2>Magic Slideshow&#8482;</h2>
            <ul>
                <li><a  href="index.html">Overview</a></li>
                <li><a  href="parameters.html">Parameters</a></li>
                <li><a  href="installation.html">Installation</a></li>
            </ul>
        </div>
        <div class="nav">
            <h2>Examples</h2>
            <ul>
                <li><a class="active" href="example1.html">Default</a></li>
                <li><a  href="example2.html">Different sizes</a></li>
                <li><a  href="example3.html">No thumbnails</a></li>
                <li><a  href="example4.html">Tiny thumbnails</a></li>
                <li><a  href="example5.html">Fast and vertical</a></li>
                <li><a  href="example6.html">Thumbnails inside</a></li>
                <li><a  href="example7.html">Multiple slideshows</a></li>
                <li><a  href="example8.html">Arrows</a></li>
                <li><a  href="example9.html">API examples</a></li>
                <!--<li><a  href="example-thumb.html">Magic Thumb</a></li>-->
            </ul>
        </div>
    </td>
    <td class="rTd">
        <h1>Default</h1>
        <p class="buttons"><a href="http://www.magictoolbox.com/buy/magicslideshow/">Buy now&nbsp;&nbsp;&pound;19</a> <a href="http://www.magictoolbox.com/support/">Get support</a></p>
        <p>The standard settings without any customisations.</p>
       
       
        <!-- define Magic Slideshow -->
        <div class="MagicSlideshow">
            <a rel="images/sony-bravia.jpg"><img title="Bravia TV" src="images/sony-bravia2.jpg" /><span>Descriptive text can go here.</span></a>
            <a rel="images/sony-cybershot.jpg"><img title="Cybershot camera" src="images/sony-cybershot2.jpg" /><span>Write as much text here as you like.</span></a>
            <a rel="images/sony-phone.jpg"><img title="PDA phone" src="images/sony-phone2.jpg" /><span>You can use HTML such as <b>bold</b>, <i>italic</i> and [a href="http://magictoolbox.com/magicslideshow/"]links[/a].</span></a>
            <a rel="images/sony-reader.jpg"><img title="Ebook reader" src="images/sony-reader2.jpg" /><span>Control the style of this text with CSS.</span></a>
            <a rel="images/sony-readerA.jpg"><img title="Ebook reader in case" src="images/sony-readerA2.jpg" /><span>You can have one or two sets of text, or none at all.</span></a>
            <a rel="images/sony-vaio.jpg"><img title="Vaio laptop" src="images/sony-vaio2.jpg" /><span>Try the [a href="example2.html"]other[/a] [a href="example3.html"]slideshow[/a] [a href="example4.html"]examples[/a] for more ideas.</span></a>
        </div>
       
        <div style="clear:both;height:0;font-size:0;line-height:0;"></div>
        <div class="html4strict" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Magic Slideshow: Default<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; </div></li>
<li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">&lt;!-- link to magicslideshow.css file --&gt;</span> &nbsp; &nbsp; &nbsp;</div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;magicslideshow/magicslideshow.css&quot;</span> <span style="color: #000066;">media</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;screen&quot;</span><span style="color: #66cc66;">/</span>&gt;</span> &nbsp; &nbsp; &nbsp;</div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">&lt;!-- link to magicslideshow.js file --&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;magicslideshow/magicslideshow.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; </div></li>
<li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; </div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">&lt;!-- define Magic Slideshow --&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;MagicSlideshow&quot;</span>&gt;</span></div></li>
<li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-bravia.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Bravia TV&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-bravia2.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>Descriptive text can go here.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-cybershot.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Cybershot camera&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-cybershot2.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>Write as much text here as you like.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-phone.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;PDA phone&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-phone2.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>You can use HTML such as <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">b</span>&gt;</span>bold<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">b</span>&gt;</span>, <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">i</span>&gt;</span>italic<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">i</span>&gt;</span> and [a href=&quot;http://magictoolbox.com/magicslideshow/&quot;]links[/a].<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-reader.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Ebook reader&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-reader2.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>Control the style of this text with CSS.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-readerA.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Ebook reader in case&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-readerA2.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>You can have one or two sets of text, or none at all.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></div></li>
<li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-vaio.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Vaio laptop&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sony-vaio2.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>Try the [a href=&quot;example2.html&quot;]other[/a] [a href=&quot;example3.html&quot;]slideshow[/a] [a href=&quot;example4.html&quot;]examples[/a] for more ideas.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; &nbsp; &nbsp; </div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></div></li>
<li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div></li>
</ol></div>
    </td>
</tr></table></body></html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)