Карусель JQuery - получить положение элемента - PullRequest
Новая
       11

Карусель JQuery - получить положение элемента

0 голосов
/ 28 октября 2011

Я использую плагин карусели JQuery ( simplyscroll ) и пытаюсь определить положение каждого изображения при нажатии. Однако из-за того, как позиционирование изображения обрабатывается для получения эффекта карусели, я получаю минус левую позицию и, похоже, не могу выработать какую-либо формулу для получения истинной левой позиции.

Есть ли какое-нибудь решение, которое я могу сделать? Мне в основном нужно сказать, что если изображение находится как минимум на полпути (overflow:hidden) внутри контейнера (слева направо), тогда разрешите щелчок.

Надеюсь, кто-нибудь может помочь?

EDIT

Одна вещь, которую я не упомянул, это то, что у меня есть карта изображений на изображениях карусели. Это потому, что изображения в конечном итоге станут фотографиями людей, и я хочу, чтобы они были кликабельными, а не окружение / фон изображения.

Ниже приведен код, который у меня есть. Если вы получите указатель курсора, то это на карте изображения. Если вы нажмете на изображение, которое уже было один раз, левая позиция станет отрицательным числом. Однако, если вы щелкнете по изображению вне карты изображений (попробуйте в левом нижнем углу), вы увидите, что левая позиция верна! 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://logicbox.net/jquery/simplyscroll/jquery.simplyscroll-1.0.4.min.js"></script>

<style type="text/css" media="screen"> 
html, body{
   margin:0;
   padding:0;
}

#quirksFix{
   text-align: center;
}

#container{
   width: 1024px; 
   height: 768px;
   margin: 0 auto -60px;
   padding:0;
   overflow:hidden;
   border:1px solid #000;
   position:relative;
}    

.simply-scroll { /* Customisable base class for style override DIV */
    width: 100%;
    height: 600px;
    margin-bottom: 0;
}

.simply-scroll .simply-scroll-clip{
    width: 100%;
    height: 600px;
}

.custom { /* Applied to container DIV */
    width: 100%;
    height: 600px;
}

.custom .simply-scroll-clip { /* Applied to clip DIV */
    width: 100%;
    height: 600px;
}

/* Existing styles */
#scroller .section {
    float:left;
    width: 268px;
    height: 530px;
}

#scroller .feature-headline {
    height:530px;
    margin:0;
}

#scroller .feature-headline img {
    border:0;
}

/* Container DIV - automatically generated */
.simply-scroll-container { 
    position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#debug{
   position:absolute;
   top:200px;
   left:0;
   width:200px;
   background-color:#fff;
}
</style>


<script type="text/javascript">
$(document).ready(function() {

 var test = new $.simplyScroll($("#scroller")[0],{
      className: 'custom',
      autoMode: 'loop',
      pauseOnHover: false
   });

   $(".imagemap").click(function(e) {
      var headline = $(this).parent();
      var headlineImg = headline.children('img');
      var theImg = $(headlineImg).attr('class');
      $('#debug').html('ImageMap Left Position: '+$('.'+theImg).position().left);
   });

   $(".test1, .test2, .test3, .test4, .test5").click(function(e) {
      $('#debug').html('Image Left Position: '+$(this).position().left);
   });

});
</script>
</head>

<body>

<div id="quirksFix">
   <div id="container">
      <div id="scroller">
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" usemap="#map1" class="test1" width="268" /><map name="map1" class="imagemap"><area shape="poly" coords="108,524,157,343,263,176,264,131,196,4,74,4,45,60,57,118,57,115,92,225,48,342,3,351,19,471" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" usemap="#map2" class="test2" width="268" /><map name="map2" class="imagemap"><area shape="poly" coords="263,27,91,515,3,513,3,362,25,3,262,4" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_VPJWVQRW_tb.jpg" usemap="#map3" class="test3" width="268" /><map name="map3" class="imagemap"><area shape="poly" coords="148,11,226,55,257,141,228,233,202,289,221,489,161,522,130,375,75,320,66,51,102,20" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080514_B1YJ08B6_tb.jpg" usemap="#map4" class="test4" width="268" /><map name="map4" class="imagemap"><area shape="poly" coords="189,468,118,446,114,285,124,218,84,126,17,104,3,50,0,3,215,4,212,78,151,140,162,164,186,155,207,168,209,209,265,297,260,350,199,308,203,454" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_38CG51J2_tb.jpg" usemap="#map5" class="test5" width="268" /><map name="map5" class="imagemap"><area shape="poly" coords="189,468,118,446,114,285,124,218,84,126,17,104,3,50,0,3,215,4,212,78,151,140,162,164,186,155,207,168,209,209,265,297,260,350,199,308,203,454" href="#" /></map>
               </div>
            </div>
         </div>
      </div>

      <div id="debug">Click on an image</div>

   </div>
</div>

</body>
</html>

Странная вещь здесь, когда я нажимаю на карту изображения, я выбираю родителя, а затем изображение, поэтому я не могу понять, почему это не дает мне такое же значение, как нажатие на само изображение.

Надеюсь, я объяснил это ясно. дайте мне знать, если вам нужно больше информации.

...