Как остановить событие при создании галереи изображений?

Question

Я использую на методе, чтобы прикрепить «Клик» событие на кнопку, чтобы переключить галерею ...

$(document).ready(function() { 
     $('.galleryContainer').hide(); 

     $('.myButtons').on("click", function(e) { 
     $('.galleryContainer').toggle(400); 
     e.stopPropagation(); 
     return false; 
     }); 
    }); 

Проблема заключается в том, что это осуществление функциональность галереи (т.е. нажав на иконку галерея вызывает тумблерную функцию ...)

Любая помощь будет оценена!

<div class="container"> 
<div class="alpha sixteen columns omega"> 
<h2>Engagements</h2> 
    <div id="myWorkEngagements" class="scale-with-grid"></div> 
    <a href="#" class="myButtons ">press me</a>            

     <p class="coreParagraph"> 
     Skeleton is built on three core principles: 
    </p> 

    <ul class="galleryContainer gallery"> 
      <li><a href="images/weddingImages/full/001.jpg" rel="external"><img src="images/weddingImages/thumb/001.jpg" alt="Image 001" class="myButtons"></a> 
     </li> 
     <li> 
      <a href="images/weddingImages/full/002.jpg" rel="external"><img src="images/weddingImages/thumb/002.jpg" alt="Image 002" class="myButtons"></a> 
     </li> 
    </ul> 
</div><!-- eight columns --> 

Answer 1

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

Попробуйте назначить другой класс к изображениям как myButtons2

Код:

<div class="container"> 
    <div class="alpha sixteen columns omega"> 
     <h2>Engagements</h2> 

     <div id="myWorkEngagements" class="scale-with-grid"></div> <a href="#" class="myButtons ">press me</a> 
     <p class="coreParagraph">Skeleton is built on three core principles:</p> 
     <ul class="galleryContainer gallery"> 
      <li><a href="images/weddingImages/full/001.jpg" rel="external"><img src="images/weddingImages/thumb/001.jpg" alt="Image 001" class="myButtons2"></a> 

      </li> 
      <li> <a href="images/weddingImages/full/002.jpg" rel="external"><img src="images/weddingImages/thumb/002.jpg" alt="Image 002" class="myButtons2"></a> 

      </li> 
     </ul> 
    </div> 
    <!-- eight columns --> 

Демо: http://jsfiddle.net/IrvinDominin/856FL/