サイズ変更可能なdraggerを使ってdivを作成しようとしています

Question

私はすでにこれについての例があると確信していますが、私はそれを見つけることができず、何を探すべきか正確にはわかりません。

http://imgur.com/a/hHNkZ

私は上記の赤で囲んだボタンからサイズ変更可能なdiv要素を作成しようとしています。

このdivの背後にある写真は滑らかなスライダー（http://kenwheeler.github.io/slick/）から来ています。

<div class="slider-for"> 
       <img src="images/product0.jpg" alt=""> 
       <img src="images/product1.jpg" alt=""> 
       <img src="images/product2.jpg" alt=""> 
       <img src="images/product3.jpg" alt=""> 
      </div> 

私は上記の幅0divを作ってから、スライダーで、おそらくjsで幅を増やすことを考えていました。

この部門では、その特定の製品のレシピを載せたいと思います。私は4枚の写真を持っているので、内容は写真によって変わってきます。 （静的コンテンツではないので）

これはPHPで行う必要がありますか？

Answer 1

私はこれがあなたに役立つだろうと思う：

https://jsfiddle.net/u0Ljnttg/1/

十分その少し複雑な、まだ。ただ、SOのために:)

： JS：

var links = document.getElementById("imageLinks"); 
links.onmousedown = function(e) { 
    var theSrc = e.target.dataset.src; 
    if (theSrc) { 
    str = "url(\"" + theSrc + "\");"; 
    //Sorry for using this: 
    document.getElementById("imageBack").setAttribute("style", "background-image:" + str) 
    } 
} 


var resizer = document.getElementById("content-resize"); 
resizer.onmousedown = resizableStart; 

function resizableStart(e) { 
    var elem = document.getElementById("content"); 
    elem.originalW = elem.clientWidth; 
    this.onmousemove = resizableCheck; 
    this.onmouseup = this.onmouseout = resizableEnd; 
} 

function resizableCheck(e) { 
    var elem = document.getElementById("content"); 
    if (elem.clientWidth === elem.originalW) { 
    elem.originalX = e.clientX; 
    this.onmousemove = resizableMove; 
    } 
} 

function resizableMove(e) { 
    var elem = document.getElementById("content"); 
    var newW = elem.originalW - e.clientX + elem.originalX; 
    if (newW < elem.originalW) { 
    elem.style.width = newW + 'px'; 
    } 
} 

function resizableEnd() { 
    this.onmousemove = this.onmouseout = this.onmouseup = null; 
} 

HTML：

<div class='container'> 
    <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')"> 

    <div class='content' id="content"> 
     <div id="imageLinks"> 
     <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a> 
     <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a> 
     <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a> 
     <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a> 
     </div> 
     <span id="content-resize"></span> 
    </div> 
    </div> 
</div> 

CSS：いいえ、これはクライアント側スクリプトのためのタスクが

html, 
body { 
    min-height: 100% !important; 
    height: 100%; 
} 

.container { 
    width: 100%; 
    min-height: 100%; 
    height: 100%; 
} 

.images { 
    width: 100%; 
    min-height: 100% !important; 
    height: 100%; 
} 

#content { 
    min-height: 100% !important; 
    height: 100%; 
    /*Change this to change width*/ 
    width: 70%; 
    resize: horizontal; 
    float: right; 
    position: relative; 
    background: white; 
} 

div { 
    border: 1px solid black; 
} 

span { 
    border: 1px solid black; 
    border-radius: 50%; 
    position: absolute; 
    top: calc(50% - 20px); 
    left: -10px; 
    cursor: pointer; 
    height: 40px; 
    width: 40px; 
    display: inline-block; 
    background: white; 
}