CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Jim41Mavs
Jim41Mavs

Reputation: 572

jQuery Image Slider Cover Image Positioning Issue

I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.

HTML:

 <div class="con">
     <img src="warming1.jpg" class="imageOne">
     <div class="coverImage"></div>
     <div class="handle"></div>
     <script type="text/javascript">
         $(".handle").draggable({
             axis: "x",
             containment: "parent",
             drag: function () {
                 var position = $(this).position();
                 var positionExtra = position.left + 6;
                 $(".coverImage").width(positionExtra + "px");
             }
         });
     </script>
 </div>

CSS:

.con {
    top:2140px;
    left:10px;
    width: 280px;
    height: 230px;
    border: 2px solid;
    position: absolute;
    z-index:1
}

.con img {
    height: 100%;
    position: absolute;
}

.coverImage {
    position: absolute;
    background: url("warming2.jpg");
    background-size: auto 100%;
    width: 100%;
    height: 100%;
}

.handle {
    width: 0px;
    height: 100%;
    border-left: 12px solid #fff;
    position: absolute;
    left: 50%;
}

.handle:after {
    content: "DRAG";
    display: block;
    width: 60px;
    height: 60px;
    border: 2px solid #eee;
    border-radius: 50%;
    color: #999;
    line-height: 60px;
    font-weight: 300;
    text-align: center;
    background: #fff;
    position: absolute;
    left: -36px; top: 0; bottom: 0;
    margin: auto;
}

Upvotes: 2

Views: 115

Answers (1)

Andrue Anderson
Andrue Anderson

Reputation: 659

Positioning Picture 1 within the Element containing the border:

  1. Obtain width of element with the border
  2. Obtain width of 2nd picture
  3. Set pic1.width = borderElement.width - pic2.width
  4. Position pic1 at borderElement.right - pic1.width

Upvotes: 1

Related Questions