my jquery image gallery overlapping, preventing view being able select , forth. can me fix issue? here link page http://www.etterengineering.com/sliderdemo.php.
html:
<script src="jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="includes/slidergallery.js"> </script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var container = $('div.slidergallery'); var ul = $('ul', container); var itemswidth = ul.innerwidth() - container.outerwidth(); $('.slider', container).slider({ min: 0, max: itemswidth, handle: '.handle', stop: function (event, ui) { ul.animate({'left' : ui.value * -1}, 500); }, slide: function (event, ui) { ul.css('left', ui.value * -1); } }); }; </script> <script type="text/javascript"> $(document).ready(function() { $('a.product').click(function() { var popid = $(this).attr('rel'); var popurl = $(this).attr('href'); $('#' + popid).fadein('slow').css({ 'width': number( popwidth ) }).prepend(); }); }); </script> </head> <body> <div id="wrapper"> <div id="plc-operator-interface" class="popup_block_parts"> <h3>plc operator interface</h3> <p>flameless catalytic heating has brought energy cost savings numerous thermo formers , paint finishers, has proven method of control - gas pulse system (gps). <br/>the gps unit simple, cost effective , offers option of multi zone configuration, permitting accurate , repeatable heating profiles catalytic heating system. vulcan has pioneered gas pulse technology, having installed many hundreds in both finishing , thermo forming industries control catalytic heaters. typical gas industrial control valves, totally unsuitable controlling catalytic heaters. gps has been proven save gas consumption on other industry control valves.</p> <div id="fullsize"><img border="0" src="parts_by_man_ok_by_jon/vulcan/plc-operator-interface-2.gif" alt="gas booster approvals"/></div> </div> <div id="vert-oven" class="popup_block_parts"> <h3>catalytic oven applications</h3> <p>control of gps via 1 of 2 operator control types. systems less 5 control zones, simple percentage timer may used. systems greater number of zones, plc based control intuitive operator interface, offers customer best solution multi zone systems, recipe storage, system diagnostics functions , global increase / decrease of heating profile.</p> <div id="fullsize"><img border="0" src="parts_by_man_ok_by_jon/vulcan/vert-oven-lg.gif" alt="gas booster approvals"/></div> </div> <div id="gas-pulse" class="popup_block_parts"> <h3>gas pulse</h3> <p>gas pulse technology uses electrically actuated solenoid valves, cycle gas supply between flow rates of 100% , 20%. longevity , reliability have been hallmarks technology, , synchronizes mechanics of flameless oxidation process within vulcan's patented catalytic heaters. alternating between high , low flow rates, entire depth of catalyst used, ensuring heat distribution across entire heater face @ percentage settings.</p> <div id="fullsize"><img border="0" src="parts_by_man_ok_by_jon/vulcan/gaspulse_sm.gif" alt="gas booster approvals"/></div> </div> <div class="slidergallery"> <ul> <li><a href="#?w=400" rel="plc-operator-interface" class="product"><img src="parts_by_man_ok_by_jon/vulcan/thumbnails/plc-operator-interface-2_thumbnail.gif" border="0" /></a></li> <li><a href="#?w=400" rel="vert-oven" class="product"><img src="parts_by_man_ok_by_jon/vulcan/thumbnails/vert-oven-lg_thumbnail.gif" border="0"/></a></li> <li><a href="#?w=400" rel="gas-pulse" class="product"><img src="parts_by_man_ok_by_jon/vulcan/thumbnails/gaspulse_sm_thumbnail.gif" border="0"/></a></li> </ul> <div class="slider"> <div class="handle"></div> </div> </div> </div> </body> </html> css:
.popup_block_parts { display: none; background: transparent; height:300px; padding: 20px; float: left; font-size: .95em; position: absolute; top: 520px; left:680px; z-index: 99998; } #plc-operator-interface{ top:50px; position:absolute; z-index:5; } #vert-oven{ top:50px; position:absolute; z-index:5;} #gas-pulse{ top:50px; position:absolute; z-index:5;} #fullsize { position:relative; width:25px; height:238px; top:5px; left:5px; padding:2px; z-index:10; }
<script type="text/javascript"> $(document).ready(function() { $('a.product').click(function() { var popid = $(this).attr('rel'); var popurl = $(this).attr('href'); $('.popup_block_parts').each(function(){ $(this).hide(); }); $('#' + popid).fadein('slow').css({ 'width': number( popwidth ) }).prepend(); }); }); </script> 
Comments
Post a Comment