jQuery 갤러리가 중복되지 않게하려면 어떻게해야합니까?

-1

내 jQuery 이미지 갤러리가 겹쳐져서보기가 앞뒤로 선택할 수 없게됩니다. 누구든지이 문제를 해결할 수 있습니까? 다음은 http://www.etterengineering.com/sliderDEMO.php 페이지에 대한 링크입니다.jQuery 갤러리가 중복되지 않게하려면 어떻게해야합니까?

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

출처

2011-04-29 Stephanie

내가 페이지를 검토 한 결과,하지만 난 문제가 표시되지 않습니다. 정확히 무엇이 잘못되었는지, 어떻게 보는지에 대해 더 명확하게 표현할 수 있습니까? – KatieK

제품을 클릭하면 더 큰 이미지와 설명이 올바르게 표시됩니다. 예를 들어 이미지가 서로 겹치는 문제는 세 번째 이미지를 클릭 한 다음 첫 번째 이미지를 클릭하십시오. 첫 번째는 세 번째 아래에 나타납니다. 시청자가 어떤 순서로든 클릭 할 수 있기를 바랍니다. 항상 제품 사진과 설명을 맨 위에 표시하도록하십시오. – Stephanie

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

출처

2011-04-29 15:29:13 Tomas

대단히 감사합니다. 완벽하게 작동했습니다. 나는 그것이 숨김 함수라는 것을 알았고, 나는 그것을 정확하게 실행할 수 없었습니다. jQuery를 처음 접했습니다. – Stephanie

도와 드리겠습니다 :) – Tomas

jQuery 갤러리가 중복되지 않게하려면 어떻게해야합니까?

답변

관련 문제