Search code examples
javascriptjqueryonclickcarouselshadowbox

Image within a div, both have onclick events, can I reverse the bubble?

I have an image carousel and shadowbox. I want the user to be able to srcoll through the images, and when they click on the focused one, it opens in shadowbox. Currently the html is something to this extent:

<div class="slides">
  <div>
    <a href="#" onclick="javascript:ShadowboxRun(some parameters); return false;">
       <img src="img.jpg">
    </a>
  </div>
  <div>
    <a href="#" onclick="javascript:ShadowboxRun(some parameters); return false;">
       <img src="img2.jpg">
    </a>
  </div>
</div>

I've figured out that I belive the route of all my issues has to do with bubbling. Correct me if I'm wrong, but I believe that the onclick fires before the carousel. What would my best practice be for this?

Thank you

Edit: Forgot to put the main issue. When the user clicked on slide 2 of the carousel it moves the slide and opens the shadowbox with one click. I want the user to be able to click on the slide have it move, and if they click on it again, it opens a shadowbox.

edit2: Fixed my mistake in the original copy of the code

edit3: uploaded my newest version, so here's the link http://hdguitarlesson.com/HDLessonsBeta/ if it helps. Any help is greatly appreciated. I've been racking my brain for hours

Solution

  • you can use the onClick() command through jquery on anything so you can simply add a class or id to that image and click that instead.