如何防止 jQuery Gallery 重叠？

发布于 2024-11-04 09:52:53 字数 5320 浏览 0 评论 0原文

我的 jQuery 图像库重叠，导致视图无法来回选择。谁能帮我解决这个问题吗？以下是页面 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 which has brought energy cost savings to numerous thermo formers and paint finishers, now has a well proven method of control - Gas Pulse System (GPS).
        <br/>The GPS unit is simple, cost effective and offers the option of multi zone configuration, permitting accurate and repeatable heating profiles for the catalytic heating system. Vulcan has pioneered Gas Pulse Technology, having installed many hundreds in both the finishing and thermo forming industries to control catalytic heaters. Typical gas industrial control valves, are totally unsuitable for controlling catalytic heaters. GPS has been proven to save gas consumption over 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 the GPS is via one of two operator control types. For systems with less than five control zones, a simple percentage timer may be used. For systems with a greater number of zones, a PLC based control with an intuitive operator interface, offers the customer the best solution for multi zone systems, with recipe storage, system diagnostics functions and global increase / decrease of any 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, to cycle the gas supply between flow rates of 100% and 20%. Longevity and reliability have been the hallmarks for this technology, and synchronizes very well with the mechanics of the flameless oxidation process within Vulcan's patented catalytic heaters. By alternating between the high and low flow rates, the entire depth of catalyst is used, ensuring an even heat distribution across entire heater face at all 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;
}

原文

My jQuery image gallery is overlapping, preventing the view from being able to select back and forth. Can anyone help me fix this issue? Here is a link to the 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 which has brought energy cost savings to numerous thermo formers and paint finishers, now has a well proven method of control - Gas Pulse System (GPS).
        <br/>The GPS unit is simple, cost effective and offers the option of multi zone configuration, permitting accurate and repeatable heating profiles for the catalytic heating system. Vulcan has pioneered Gas Pulse Technology, having installed many hundreds in both the finishing and thermo forming industries to control catalytic heaters. Typical gas industrial control valves, are totally unsuitable for controlling catalytic heaters. GPS has been proven to save gas consumption over 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 the GPS is via one of two operator control types. For systems with less than five control zones, a simple percentage timer may be used. For systems with a greater number of zones, a PLC based control with an intuitive operator interface, offers the customer the best solution for multi zone systems, with recipe storage, system diagnostics functions and global increase / decrease of any 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, to cycle the gas supply between flow rates of 100% and 20%. Longevity and reliability have been the hallmarks for this technology, and synchronizes very well with the mechanics of the flameless oxidation process within Vulcan's patented catalytic heaters. By alternating between the high and low flow rates, the entire depth of catalyst is used, ensuring an even heat distribution across entire heater face at all 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

z祗昰~ 2024-11-11 09:52:53

<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>

<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>

回复收藏 0 原文

~没有更多了~