title: Propagation of Script
body: <p>I probably should not be attempting this, but I have gotten so far and I don't want to give up now. I want to create my own Lightbox type script. I can create an absolute div with the class ligthbox and it covers the page. Then I create a img that is fixed and it animates when loading. The I also have nav arrows to move through the photos.  All works accept when I click on the arrows it creates new close X and arrows. I don't understand because the is done through the animation function which is not attached to the arrow function.</p>
  
  <p>I have added event.stopPropagation(); to the arrow function and the animate function but that did not work. </p>
  
  <p>The function that initiates everything.</p>
  
  <pre><code>jQuery(".marks-lightbox img").click( function() {
  
    var Img = jQuery(this),
        cImg = Img.attr("src"),
        allImg = jQuery(".marks-lightbox img");
  
    //finding the current img from the available images
  
    for(i=0; i &lt; allImg.length; i++) {
  
      if( jQuery(allImg[i]).attr("src") == Img.attr("src") ) {
  
        lbImgCurrent = i;
  
      }
    }
  
    makeLightBox() 
  
  });
  
  
  function makeLightBox() {
  
      var bodyHeight = jQuery("body").height(),
          lightbox = jQuery("&lt;div&gt;").addClass("lightbox").css({"width":"100vw","height":bodyHeight}),
          scrollTop = 72,
          lbContainer = jQuery("&lt;div&gt;").addClass("lbContainer"),
          lbImg = jQuery(".marks-lightbox img"),
          imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src"),
          lbClose = jQuery("&lt;span&gt;").addClass("lb-close").text("X");
  
      jQuery("body").prepend(lightbox);
  
      lbContainer.appendTo(".lightbox");
  
      jQuery('&lt;img src="'+ imgSRC +'"&gt;').load(function() {
  
        jQuery(this).appendTo(".lbContainer").css("display","none").addClass("lb-image");
  
        var w = jQuery(".lb-image").width(),
            h = jQuery(".lb-image").height(),
            lbw = lightbox.width(),
            margin = (lbw - w) /2;
  
        jQuery(this).appendTo(".lightbox").css({"position":"fixed","display":"block","width":0,"height": 0}).animate({"top":scrollTop,"width":w,"height":h,"margin-left":margin, "margin-right":margin},1000,function(event){
  
          var lbimg = jQuery(this),
              lbH = lbimg.height() + 63,
              lbLeft = lbimg.offset().left,
              lbW = lbimg.width(),
              larrow = jQuery("&lt;div&gt;&lt;&lt;/div&gt;").addClass("left-arrow-lb lb-arrow"),
              rarrow = jQuery("&lt;div&gt;&gt;&lt;/div&gt;").addClass("right-arrow-lb lb-arrow");
  
          larrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+18});
  
          rarrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+lbW-90});;
  
          lbClose.appendTo(".lightbox").css({"position":"fixed","top": lbH,"left": lbLeft+lbW - 18});
  
        });
      });
  }
  </code></pre>
  
  <p>Here is the click function</p>
  
  <pre><code>jQuery("body").on("click",".left-arrow-lb", function() {
      console.log(jQuery(this));
      var lbImgLength = jQuery(".marks-lightbox img").length,
          lbImg = jQuery(".marks-lightbox img");
  
      lbImgCurrent = (lbImgCurrent &lt; 1 ) ? lbImgLength : lbImgCurrent -1;
  
      var imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src");
      console.log(imgSRC);
      jQuery(".lb-image").attr("src",imgSRC);
  
  });
  </code></pre>
  
  <p>Every click creates a load new img scr and animates the photo (unexpectedly) and creates new arrows and close x.</p>