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>

Simple and Super 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: Multiple slideshows</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>
        <!-- set slide show params -->
        <script type="text/javascript">
            MagicSlideshow.options = {
                'show-selectors': 'no',
                'speed': '6'
            }
            // special parameters for slider with id="slideshow#"
            MagicSlideshow.extraOptions.slideshow1 = {
                'effect': 'fade',
                'effect-next': 'fade',
                'effect-jump': 'fade',
                'container-position': 'right',
                'container-padding': '1',
                'text-position': 'top',
                'text-effect': 'slide',
                'direction': 'bottom'
            }
            MagicSlideshow.extraOptions.slideshow2 = {
                'speed': '3'
            }
        </script>
        <style type="text/css">
            #slideshow2 img.MagicSlideshowThumbnail {
                border: 2px solid transparent;
            }
            #slideshow2 img.MagicSlideshowThumbnail.highlight {
                border: 2px solid #696969;
            }
            #slideshow2 .MagicSlideshowArrow {
                background-image: url('magicslideshow/graphics/arrows05.png');
            }
            #slideshow1 {
                float: left;
                margin: 0 5px 5px 0;
            }
        </style>
        
    <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  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 class="active" 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>Multiple slideshows</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>Every slideshow on your page can have different parameters.</p>
        
      
        <!-- define Magic Slideshows -->

        <div class="MagicSlideshow" id="slideshow1">
            <a rel="images/sony-bravia.jpg"><img src="images/sony-bravia2.jpg" /></a>
            <a rel="images/sony-cybershot.jpg"><img src="images/sony-cybershot2.jpg" /></a>
            <a rel="images/sony-phone.jpg"><img src="images/sony-phone2.jpg" /></a>
            <a rel="images/sony-reader.jpg"><img src="images/sony-reader2.jpg" /></a>
            <a rel="images/sony-readerA.jpg"><img src="images/sony-readerA2.jpg" /></a>
            <a rel="images/sony-vaio.jpg"><img src="images/sony-vaio2.jpg" /></a>
        </div>

        <div class="MagicSlideshow" id="slideshow2">
            <img src="images/fruits_apples.jpg" />
            <img src="images/fruits_grapefruit.jpg" />
            <img src="images/fruits_lime.jpg" />
            <img src="images/fruits_raspberry.jpg" />
            <img src="images/fruits_strawberry.jpg" />
        </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: Multiple slideshows<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; <span style="color: #808080; font-style: italic;">&lt;!-- set slide show params --&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; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</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; MagicSlideshow.options = {</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; &nbsp; &nbsp; 'show-selectors': 'no',</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; &nbsp; &nbsp; 'speed': '6'</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; }</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; // special parameters for slider with id=&quot;slideshow#&quot;</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; MagicSlideshow.extraOptions.slideshow1 = {</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; &nbsp; &nbsp; 'effect': 'fade',</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; &nbsp; &nbsp; 'effect-next': 'fade',</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; &nbsp; &nbsp; 'effect-jump': 'fade',</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; &nbsp; &nbsp; 'container-position': 'right',</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; &nbsp; &nbsp; 'container-padding': '1',</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; &nbsp; &nbsp; 'text-position': 'top',</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; &nbsp; &nbsp; 'text-effect': 'slide',</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; &nbsp; &nbsp; 'direction': 'bottom'</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; }</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; MagicSlideshow.extraOptions.slideshow2 = {</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; &nbsp; &nbsp; 'speed': '3'</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; }</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;">script</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; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</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; #slideshow2 img.MagicSlideshowThumbnail {</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; &nbsp; &nbsp; border: 2px solid transparent;</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; }</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; #slideshow2 img.MagicSlideshowThumbnail.highlight {</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; &nbsp; &nbsp; border: 2px solid #696969;</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; }</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; #slideshow2 .MagicSlideshowArrow {</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; &nbsp; &nbsp; background-image: url('magicslideshow/graphics/arrows05.png');</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; }</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; #slideshow1 {</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; &nbsp; &nbsp; float: left;</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; &nbsp; &nbsp; margin: 0 5px 5px 0;</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; }</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;">style</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; </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;">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 Slideshows --&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;</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> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slideshow1&quot;</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-bravia.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</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: #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;">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: #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;">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: #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-reader.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</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: #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;">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: #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-vaio.jpg&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</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: #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;</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: #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> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slideshow2&quot;</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;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/fruits_apples.jpg&quot;</span> <span style="color: #66cc66;">/</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;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/fruits_grapefruit.jpg&quot;</span> <span style="color: #66cc66;">/</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;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/fruits_lime.jpg&quot;</span> <span style="color: #66cc66;">/</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;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/fruits_raspberry.jpg&quot;</span> <span style="color: #66cc66;">/</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;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/fruits_strawberry.jpg&quot;</span> <span style="color: #66cc66;">/</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>






Dont worry friends codeings are like that but it runs nice.use this

How to Solve magento v1.3 errors

Hi Friends,
     
  • first check that is version is 1.3 and 1.3 series
  • all that version faces same problem
  • To rectify those problem use the following code
1. The fatal error toString at first:

open
lib/Varien/Object.php (line 484)

change this line


public function ___toString(array $arrAttributes = array(), $valueSeparator=’,’)

to


public function __invoke(array $arrAttributes = array(), $valueSeparator=’,’)

As next I disable the deprecated messages.
This error messages are only a advice that this string is not allowed in php6!
So at this time we don’t need this deprecated messages (we using php 5.3).


2. Disable the DEPRECATED messages in Fronend and download manager
open

index.php

change


error_reporting(E_ALL | E_STRICT);

to
error_reporting(E_ALL & E_STRICT & ~E_DEPRECATED);

open

downloader/Maged/Pear.php

change


error_reporting(E_ALL & ~E_NOTICE);

to


error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);

open

lib/Varien/Pear.php

change


error_reporting(E_ALL & ~E_NOTICE);

to


error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
 
 
  • check now in front end and also in backend 
  • incase any error comes in back end use this following code
Open the file lib/Varien/Object.php, and do the following change:

Look for the line:

public function ___toString(array $arrAttributes = array(), $valueSeparator=’,’)

Change it to:

public function __invoke(array $arrAttributes = array(), $valueSeparator=’,’)

Now, go to the file: app\code\core\Mage\Core\Controller\Request\Http.php and change:

Look for the line:

$host = split(‘:’, $_SERVER['HTTP_HOST']);
Change it to:

$host = explode(‘:’, $_SERVER['HTTP_HOST']);

Also, go to app\code\core\Mage\Catalog\Model\Category\Attribute\Backend\Sortby.php and change:

Look for the line:

$object->setData($attributeCode, split(‘,’, $data));

Replace With:

$object->setData($attributeCode, explode(‘,’, $data));

Finally, open the file: app\code\core\Mage\Admin\Model\User.php and change:
Look for the line:

$nodePath = ‘adminhtml/menu/’ . join(‘/children/’, split(‘/’, $startupPage)) . ‘/action’;

Replace With:

$nodePath = ‘adminhtml/menu/’ . join(‘/children/’, explode(‘/’, $startupPage)) . ‘/action’;

That’s it, you Magento environment should run again.
 
 
 
 

Wednesday, 4 January 2012

Add some texts in the customer registration mail

While sending mails to customers. I need to add some texts in the customer registration mail. And i need to change the logo in customers mail

 Changes in the magento - >apps - > local - > en-us-template - >email 
then change in the
<a href="{{store url=""}}"><img src="{{skin url="" _area='frontend'}}" alt="{{var store.getFrontendName()}}" style="margin-bottom:10px;" border="0"/></a>
Or
Reff : http://www.magentocommerce.com/boards/viewthread/15411/
 ___________________________________________________________________________________




I need to create my own email template. And need to send my custom email template to customer while registering as user.



Reff : www.magento.cc/how-to-change-the-magento-email-templates.html



How to avoid URL problem in magento

How to avoid URL problem in magento
  • First delete the local.xml in app -> etc
  • if it not work properly goto
  • phpmyadmin -> Database name -> core_config_data -> change the secure and unsecure value 
  • it will change

Monday, 2 January 2012

Add Custom Tabs to the Magento Product Admin

In Magento eCommerce, it is possible to add new attributes to product models and edit the values for these attributes on the Product edit page. This is fine if we only want to add standard data (attributes) to a product, but what if we wanted to do something a little different?
This article explains how to build a simple custom Magento extension that will add a new tab to the product edit page and provide a facility for processing that data when the user hits the Save button.


Move mini-cart in the sidebar to the header (or anywhere) in Magento

How to move the cart sidebar into the header area. You can use this technique to move it anywhere. This is not the only way to do this, but it is a useful one.

1) Copy the the block for the cart side bar:

//design/frontend/default/default/layout/checkout.xml
<block type="checkout/cart_sidebar" name="cart_sidebar"
template="checkout/cart/sidebar.phtml"/>

//there is also this full code in my version 1.1.3
<block type="checkout/cart_sidebar" name="cart_sidebar" 
template="checkout/cart/sidebar.phtml" before="-">
<action method="addItemRender"><type>simple</type>
<block>checkout/cart_item_renderer</block><template>
checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>grouped</type>
<block>checkout/cart_item_renderer_grouped</block>
<template>checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>configurable</type>
<block>checkout/cart_item_renderer_configurable</block>
<template>checkout/cart/sidebar/default.phtml</template></action>
</block>

2) Open up app\design\frontend\default\default\layout\page.xml
(assuming you are using the default design or didn’t create a new page.xml file in your own templates)
Find the code :

<block type="page/html_header" name="header" as="header"> //near line 58 
 
Within that block, you will see other sub-blocks.

Paste your new block in there. Add the “as” attribute and set it to
“topcart” — final result: 

<block type="page/html_header" name="header" as="header">
<block type="page/template_links" name="top.links" as="topLinks"/>
<block type="page/switch" name="store_language" as="store_language" 
template="page/switch/languages.phtml"/>
<block type="core/text_list" name="top.menu" as="topMenu"/>
<!--new block -->
<block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" 
template="checkout/cart/sidebar.phtml"/>
</block> 
 
 3) Finally, go into app\design\frontend\default\default\template\page\html\
header.phtml 
(again, assuming your using default theme) and add the code:
 
//place this where ever you want the cart to show up.
<?php echo $this->getChildHtml('topcart'); ?> 
  
Quick update:
Removing the cart in a CMS page would also be handy to know:
In the Update Layout XML area, use:

You might have to wrap this in <reference name=”right”>
(name changing dependent on your design)
 
<action method="unsetChild"><name>cart_sidebar</name></action> 
 
 That’s it! 
 
 
 
 

How to trim customer login password in magento (or) Avoid white space in magento customer login page

Goto -> app/design/frontend/default/User_Theme/template/customer/form/login.phtml


add the following javascript


<script type="text/javascript">

// Removes leading whitespaces
function LTrim( testUrl)
{       
          var re = /\s*((\S+\s*)*)/;
          return testUrl.replace(re, "$1");
         
}
// Removes ending whitespaces
 
function RTrim( testUrl)
{       
          var re = /((\s*\S+)*)\s*/;
          return testUrl.replace(re, "$1");      
}
 
 
// Removes leading and ending whitespaces
function trim()
{

    document.getElementById('pass').value = LTrim(RTrim(document.getElementById('pass').value));
    return true;
}
</script>



and call that function in that form page




<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form" onsubmit="javascript:trim();">

using this  we can avoid password white space in leading and ending of the password give in customer login page in magento