Location: PHPKode > scripts > Magic Zoom > magiczoom-trial/wizard.html
<!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>Settings wizard</title>
	
        <script type="text/javascript">
            function camelize(str) {
                return str.replace(/-\D/g, function(m) {
                    return m.charAt(1).toUpperCase();
                });
            }

            function applyNewZoomSettings(){
                var newParams = Array();
                magicJS.$A($mjs('zoom-params').getElementsByTagName("INPUT")).forEach(function(el){
                    if(el.type == 'checkbox'){
                        if(MagicZoom.defaults[camelize(el.name)] != el.checked){
                            newParams.push(el.name+': '+el.checked);
                        }
                    } else if(MagicZoom.defaults[camelize(el.name)] != el.value){
                        newParams.push(el.name+': '+el.value);
                    }
                });
                magicJS.$A($mjs('zoom-params').getElementsByTagName("SELECT")).forEach(function(el){
                    if(MagicZoom.defaults[camelize(el.name)] != el.value){
                        newParams.push(el.name+': '+el.value);
                    }
                });

                document.getElementById('zoom').rel = newParams.join('; ');
                changeContent(newParams.join('; '));

                MagicZoom.refresh();
            }
            function changeContent(str) {
                txt = $mjs('_code_').innerHTML;
                txt = txt.replace(RegExp('rel(.+?)=</span><span(.+?)>"[^"]*"</span>'), 'rel$1=</span><span$2>"' + str + '"</span>');
                $mjs('_code_').innerHTML = txt;
            }
        </script>
        <style type="text/css">
            input {
                width: 94px;
            }
            .apply-btn { text-align: left; margin: 80px 0 0 20px; }
            .apply-btn button { font-size: 1.8em; width: 100px; }
            .apply-btn p { font-size: 1.1em; }
            p.mz-demo { text-align: center; }
        </style>
        <!-- link to magiczoom.css file -->
        <link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
        <!-- link to magiczoom.js file -->
        <script src="magiczoom/magiczoom.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.1em; font-weight: normal; color:#555;}
        h3.pad { margin: 2em 0 1em; }
        h4 {font-size: 1em; 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;}
        abbr {border-bottom: 1px dotted #000; cursor: help;}
		.leftcol {background:#EDF6CA; padding: 20px; height: 100%}
		.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 {font-size:12px; line-height:18px; margin:10px 0; display:block; padding:3px; border:1px solid #aaa;}
		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;}
        table.params {background:#aaa; margin-bottom: 20px; font-size: 0.9em; border: 1px solid #999;}
        .params th {background:#eee; padding:4px 8px 4px 16px;}
        .params td {background:#fff; padding:4px 8px 4px 16px; vertical-align:top; text-alilgn: left; border-bottom: 1px #f0f0f0 solid; }
        .params .sline, .params .sline td {background:#eee;}
        .params td.name { font-weight: bold; }
        .params td .new { color: red; font-weight: bold;}
		.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} 

        ul.carts { list-style:none; margin:0 0 0 0; padding:0; }
        ul.carts li { display:block; margin: 0 10px 0 0; float:left;}
        ul.carts li a { border:2px solid #FFFFFF; display:block; line-height:0; font-size:0; }
        ul.carts li a:hover { border:2px solid #93be1c; }
        ul.carts li a span { border:4px solid #FFFFFF; border-right-width:6px; border-left-width:6px; display:block; width:80px; height:20px; text-indent:-5000px; background-image:url(images/platforms.jpg); line-height:0; font-size:0; }

        .we span { background-position:0 -617px; }
        .eb span { background-position:0 -597px; }
        .vm span { background-position:0 -20px; }
        .xt span { background-position:0 -40px; }
        .oc span { background-position:0 -60px; }
        .xc span { background-position:0 -80px; }
        .wp span { background-position:0 -100px; }
        .gl span { background-position:0 -120px; }
        .dp span { background-position:0 -140px; }
        .zc span { background-position:0 -160px; }
        .ma span { background-position:0 -180px; }
        .ns span { background-position:0 -200px; }
        .cc span { background-position:0 -220px; }
        .cl span { background-position:0 -240px; }
        .wy span { background-position:0 -260px; }
        .cs span { background-position:0 -280px; }
        .et span { background-position:0 -300px; }
        .ox span { background-position:0 -320px; }
        .om span { background-position:0 -340px; }
        .ps span { background-position:0 -360px; }
        .rs span { background-position:0 -997px; }
        .asp span { background-position:0 -897px; }
        .blv span { background-position:0 -917px; }
        .ltc span { background-position:0 -937px; }
        .mmr span { background-position:0 -957px; }
        .sf span { background-position:0 -977px; }
        .op span { background-position:0 -637px; }
        .vt span { background-position:0 -657px; }
        .dp5 span { background-position:0 -677px; }
        .dp6 span { background-position:0 -697px; }
        .dp7 span { background-position:0 -717px; }
        .jm1 span { background-position:0 -737px; }
        .jm15 span { background-position:0 -757px; }
        .jm16 span { background-position:0 -817px; }
        .oc2 span { background-position:0 -777px; }
        .oc3 span { background-position:0 -797px; }
        .gl2 span { background-position:0 -857px; }
        .gl3 span { background-position:0 -877px; }
        .av span { background-position:0 -837px; }
	--></style>
</head>
<body>
<table class="mtbl">
<tr>
    <td class="leftcol">
		<div class="nav">
			<h2>Magic Zoom&#8482;</h2>
			<ul>
				<li><a  href="index.html">Overview</a></li>
                <li><a  href="parameters.html">Parameters</a></li>
                <li><a class="active" href="wizard.html">Settings wizard</a></li>
			</ul>
		</div>
		<div class="nav">
			<h2>Examples</h2>
			<ul>
				<li><a  href="example1.html">Default parameters</a></li>
				<li><a  href="example2.html">Dimensions</a></li>
                <li><a  href="example3.html">Multiple images</a></li>
				<li><a  href="example4.html">Zoom positions</a></li>
				<li><a  href="example5.html">Zoom alignment</a></li>
				<li><a  href="example6.html">Zoom fade/smoothing</a></li>
				<li><a  href="example7.html">Opacity</a></li>
                <li><a  href="example14.html">Hint</a></li>
                <li><a  href="example15.html">Title</a></li>
				<li><a  href="example8.html">CSS styling</a></li>
                <li><a  href="example9.html">Entire image</a></li>
                <li><a  href="example12.html">Activate/Initialize</a></li>
                <li><a  href="example10.html">Drag mode</a></li>
                <li><a  href="example17.html">Disable zoom</a></li>
                <li><a  href="example16.html">Right click</a></li>
                <li><a  href="example11.html">Global options</a></li>
                <li><a  href="example13.html">Magic Zoom&#8482; API</a></li>
			</ul>
		</div>
	</td>
	<td class="rTd">
		<h1>Settings wizard</h1>
		<p class="buttons"><a href="http://www.magictoolbox.com/buy/magiczoom/">Buy now&nbsp;&nbsp;&pound;29</a> <a href="http://www.magictoolbox.com/support/">Get support</a></p>
        
	    
        <h4>Choose your settings then click Apply.</h4>
        
        <table style="font-size: 12px" id="zoom-params">
            <tr>
                <td>
                    <fieldset>
                        <legend>User experience</legend>
                        <table>
                            <tr><td>Opacity, 0-100:</td><td><input type="text" name="opacity" value="50"/></td></tr>
                            <tr><td>Opacity reverse:</td><td><input type="checkbox" name="opacity-reverse" value="true"/></td></tr>
                            <tr><td>Smoothing:</td><td><input type="checkbox" name="smoothing" checked="true" onclick="$mjs('smoothing-speed').disabled = !this.checked;" value="true"/></td></tr>
                            <tr><td>Smoothing speed, 0-100:</td><td><input type="text" name="smoothing-speed" id="smoothing-speed" value="40"/></td></tr>
                            <tr><td>FPS:</td><td><input type="text" name="fps" value="25"/></td></tr>
                            <tr><td>Zoom window effect:</td><td>
                                <select name="zoom-window-effect">
                                    <option value="shadow">shadow</option>
                                    <option value="glow">glow</option>
                                    <option value="false">false</option>
                                </select>
                                </td></tr>
                            <tr><td>Show title:</td><td>
                                <select name="show-title">
                                    <option value="top">top</option>
                                    <option value="bottom">bottom</option>
                                    <option value="false">false</option>
                                </select>
                                </td></tr>
                            <tr><td>Hint:</td><td><select name="hint" id="hint">
                                <option value="true">Yes</option>
                                <option value="false">No</option>
                            </select></td></tr>
                            <tr><td>Hint text:</td><td><input type="text" name="hint-text" id="hint-text"  value="Zoom"/></td></tr>
                            <tr><td>Hint position:</td><td><select name="hint-position" id="hint-position">
                                <option value="tl">top left (tl)</option>
                                <option value="tr">top right (tr)</option>
                                <option value="tc">top center (tc)</option>
                                <option value="bl">bottom left (bl)</option>
                                <option value="br">bottom right (br)</option>
                                <option value="bc">bottom center (bc)</option>
                            </select></td></tr>
                            <tr><td>Hint opacity, 0-100:</td><td><input type="text" name="hint-opacity" value="75" id="hint-opacity" /></td></tr>
                            <tr><td>Zoom fade:</td><td><input type="checkbox" name="zoom-fade" value="true" checked="checked" onclick="$mjs('zoom-fade-in').disabled = !this.checked; $mjs('zoom-fade-out').disabled = !this.checked;"/></td></tr>
                            <tr><td>Zoom fade-in speed, ms:</td><td><input type="text" name="zoom-fade-in-speed" id="zoom-fade-in" value="400"/></td></tr>
                            <tr><td>Zoom fade-out speed, ms:</td><td><input type="text" name="zoom-fade-out-speed" id="zoom-fade-out" value="200"/></td></tr>
                            <tr><td>Show right-click menu on the image:</td><td><input type="checkbox" name="right-click" id="right-click" value="true"/></td></tr>
                        </table>
                    </fieldset>
                    <fieldset>
                        <legend>Geometry</legend>
                        <table>
                            <tr><td>Zoom width, px:</td><td><input type="text" name="zoom-width" value="300"/></td></tr>
                            <tr><td>Zoom height, px:</td><td><input type="text" name="zoom-height" value="300"/></td></tr>
                            <tr><td>Zoom distance, px:</td><td><input type="text" name="zoom-distance" value="15"/></td></tr>
                            <tr><td>Zoom position:</td><td>
                                <select name="zoom-position">
                                    <option value="right">right</option>
                                    <option value="left">left</option>
                                    <option value="top">top</option>
                                    <option value="bottom">bottom</option>
                                    <option value="inner">inner</option>
                                </select>
                                </td></tr>
                            <tr><td>Zoom align:</td><td>
                                <select name="zoom-align">
                                    <option value="top">top</option>
                                    <option value="right">right</option>
                                    <option value="left">left</option>
                                    <option value="bottom">bottom</option>
                                    <option value="center">center</option>
                                </select>
                                </td></tr>
                        </table>
                    </fieldset>
                </td>
                <td valign="top">
                    <fieldset>
                        <legend>Zoom mode</legend>
                        <table>
                            <tr><td>Drag mode:</td><td><input type="checkbox" name="drag-mode" onclick="$mjs('move-on-click').disabled = !this.checked; $mjs('preserve-position').disabled = !this.checked; $mjs('x').disabled = !this.checked; $mjs('y').disabled = !this.checked;" value="true"/></td></tr>
                            <tr><td>Move on click:</td><td><input type="checkbox" name="move-on-click" id="move-on-click" checked="checked" disabled="true" value="true"/></td></tr>
                            <tr><td>Preserve position:</td><td><input type="checkbox" name="preserve-position" id="preserve-position" disabled="true" value="true"/></td></tr>
                            <tr><td>x, px:</td><td><input type="text" name="x" id="x" disabled="true" value="-1"/></td></tr>
                            <tr><td>y, px:</td><td><input type="text" name="y" id="y" disabled="true" value="-1"/></td></tr>
                            <tr><td>Click to activate:</td><td><input type="checkbox" name="click-to-activate" value="true"/></td></tr>
                            <tr><td>Click to deactivate:</td><td><input type="checkbox" name="click-to-deactivate" value="true"/></td></tr>
                            <tr><td>Entire image:</td><td><input type="checkbox" name="entire-image" value="true"/></td></tr>
                            <tr><td>Selectors change:</td><td>
                                <select name="selectors-change" onchange="$mjs('selectors-mouseover-delay').disabled = !(this.value == 'mouseover');">
                                    <option value="click">click</option>
                                    <option value="mouseover">mouseover</option>
                                </select>
                                </td></tr>
                            <tr><td>Selectors mouseover delay, ms:</td><td><input type="text" name="selectors-mouseover-delay" id="selectors-mouseover-delay" disabled="true" value="60"/></td></tr>
                            <tr><td>Selectors effect:</td><td>
                                    <select name="selectors-effect" onchange="$mjs('selectors-effect-speed').disabled = (this.value == 'false');">
                                    <option value="dissolve">dissolve</option>
                                    <option value="fade">fade</option>
                                    <option value="pounce">pounce</option>
                                    <option value="false">false</option>
                                </select>
                                </td></tr>
                            <tr><td>Selectors effect speed, ms:</td><td><input type="text" name="selectors-effect-speed" id="selectors-effect-speed" value="400"/></td></tr>
                            <tr><td>Disable zoom effect:</td><td><select name="disable-zoom" id="disable-zoom">
                                <option value="false">No</option>
                                <option value="true">Yes</option>
                            </select></td></tr>
                        </table>
                    </fieldset>

                    <br/>
                    <div class="apply-btn">
                        <h4><button onclick="applyNewZoomSettings();">Apply</button></h4>
                        <p>Your customised zoom and HTML are below.</p>
                    </div>
                </td>
            </tr>
        </table>
        <p class="mz-demo">
                
<!-- Define Magic Zoom -->
<a href="images/r1-red-3.jpg" class="MagicZoom" rel="" id="zoom" title="Red Yamaha YZF-R1"><img src="images/r1-red-2.jpg"/></a><br/>

<!-- Selector with standard title -->
<a href="images/r1-red-3.jpg" rel="zoom-id:zoom;" rev="images/r1-red-2.jpg" title="Red Yamaha YZF-R1"><img src="images/r1-red-1.jpg"/></a>
<!-- Selector with different title and resized zoom window -->
<a href="images/r1-black-3.jpg" rel="zoom-id:zoom;zoom-width:600px;zoom-height:200px;" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
<!-- Selector without title and with inverted opacity -->
<a href="images/r1-blue-3.jpg" rel="zoom-id:zoom;opacity-reverse:true;show-title:false;" rev="images/r1-blue-2.jpg"><img src="images/r1-blue-1.jpg"/></a>
                
        </p>

		

        <h2>Here's the code:</h2>
        <div id="_code_">
		<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: #808080; font-style: italic;">&lt;!-- Define Magic Zoom --&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: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-red-3.jpg&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;MagicZoom&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;zoom&quot;</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Red Yamaha YZF-R1&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/r1-red-2.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;&lt;<span style="color: #000000; font-weight: bold;">br</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;</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: #808080; font-style: italic;">&lt;!-- Selector with standard title --&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;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-red-3.jpg&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;zoom-id:zoom;&quot;</span> <span style="color: #000066;">rev</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-red-2.jpg&quot;</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Red Yamaha YZF-R1&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/r1-red-1.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;"><span style="color: #808080; font-style: italic;">&lt;!-- Selector with different title and resized zoom window --&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: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-black-3.jpg&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;zoom-id:zoom;zoom-width:600px;zoom-height:200px;&quot;</span> <span style="color: #000066;">rev</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-black-2.jpg&quot;</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Black Yamaha YZF-R1&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/r1-black-1.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;"><span style="color: #808080; font-style: italic;">&lt;!-- Selector without title and with inverted opacity --&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: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-blue-3.jpg&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;zoom-id:zoom;opacity-reverse:true;show-title:false;&quot;</span> <span style="color: #000066;">rev</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/r1-blue-2.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/r1-blue-1.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>
</ol></div>
        </div>
	</td>
</tr></table></body></html>
Return current item: Magic Zoom