###前提・実現したいこと
フローティングメニューにトリムした画像を表示したいです。
「画像をアップロードして表示する親ページ」と「画像のトリム範囲を決める子ページ」があります。
親ページの方で画像を表示、スクロールに伴ってフローティングさせることはできました。
子ページを呼び出し、画像の範囲選択をして、親ページに戻って、スクロールでフローティングさせたいのですが、ここでうまくいかずに困っています。
トリムした画像が表示されるのですが、スクロールに伴ってトリムの位置がズレていってしまいます。。。
トリムした画像を固定したままフローティングさせたいのですが、どの値をどうすればいいのかがわかりません。
ご教授よろしくお願いします。
###発生している問題・エラーメッセージ
画像のトリム位置がズレていってしまう
###該当のソースコード
親ページ
css
1.parent { 2 display: table; 3} 4.left { 5 display: table-cell; 6 /* width: 15%; */ 7} 8.right { 9 display: table-cell; 10 /* width: 85%; */ 11} 12 13#thumb{ 14 overflow:hidden; 15 width:400px; 16 /* height:800px; */ 17 position: relative; 18} 19 20#floatMenu{ 21 /* 22 width: 210px; 23 height: 300px; 24 background-color:olive; 25 position: absolute; 26 top:100px; 27 left: : 10px; 28 padding: 20px; 29 */ 30 position: absolute; 31}
JavaScript
1var subwindow; 2// サブウィンドウを開く 3function openSubWindow(imgPath){ 4 var url = window.location.href; 5 url = url.substring(0, url.lastIndexOf('/')); 6 url += "/trimImg?imgPath="+imgPath; 7 subwindow = window.open(url); 8 return false; 9} 10 11var name = "#floatMenu"; 12var menuYloc = null; 13 14$(document).ready(function(){ 15 menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 16 $(window).scroll(function () { 17 offset = menuYloc+$(window).scrollTop()/2+"px"; 18 $(name).animate({top:offset},{duration:500,queue:false}); 19 }); 20});
php
1 echo "<div>"; 2 echo $this->Form->create(false, array('type' => 'file')); 3 echo $this->Form->input('Post.image', array( 4 'type' => 'file', 5 'label' => false 6 )); 7 $options = array( 8 'label' => __('upload'), 9 'name' => 'upload', 10 'value' => 'upload' 11 ); 12 echo $this->Form->end($options); 13 echo "</div>"; 14 echo "<div class='parent'>"; 15 echo "<div class='left'>"; 16 echo "<button id='trimImg_button' onclick='openSubWindow("".substr($imgPath, strrpos($imgPath, "/")+1)."")'>".__("画像のトリミング")."</button>"; 17 echo "<div id='thumb'>"; 18 echo "<div id='floatMenu'>"; 19 echo "<img src='".$imgPath."'>"; 20 echo "</div>"; 21 echo "</div>"; 22 echo "</div>"; 23 echo "<div class='right'>"; 24 echo $this->element('testForm'); 25 echo "</div>"; 26 echo "</div>";
子ページ
javascript
1$(function(){ 2 $('#jcrop_target').Jcrop({ 3 //aspectRatio: 1, 4 onSelect: showButton, 5 //onChange: showButton 6 maxSize: [400, 800] 7 }); 8}); 9 10function showButton(coords){ 11 var element = document.getElementById("button_set"); 12 if(element == null){ 13 var Botan = document.createElement("input"); 14 Botan.type = "button"; 15 Botan.value = "決定 "; 16 Botan.id = "button_set"; 17 //Botan.onclick = showPreview(coords); 18 Botan.addEventListener('click', showPreview(coords), true); 19 document.body.insertBefore(Botan, document.body.firstChild); 20 }else{ 21 //element.onclick = showPreview(coords); 22 element.removeEventListener('click', showPreview); 23 element.addEventListener('click', showPreview(coords), true); 24 } 25} 26 27function showPreview(coords){ 28 return function(ev) { 29 /* 30 window.opener.$("#thumb").css("width", coords.w+"px"); 31 window.opener.$("#thumb").css("height", coords.h+"px"); 32 */ 33 //window.opener.$("#thumb").css("width", "400px"); 34 //window.opener.$("#thumb").css("height", "800px"); 35 //window.opener.$("#thumb").show(); 36 37 window.opener.$("#floatMenu img").css("left", coords.x+"px"); 38 window.opener.$("#floatMenu img").css("top", coords.y+"px"); 39 //window.opener.$("#floatMenu img").css("width", "auto"); 40 //window.opener.$("#floatMenu img").css("height", "auto"); 41 window.opener.$("#floatMenu img").css("width", coords.w+"px"); 42 window.opener.$("#floatMenu img").css("height", coords.h+"px"); 43 window.opener.$("#floatMenu img").css("-webkit-transform", "translate(-"+coords.x+"px,-"+coords.y+"px)"); 44 window.opener.$("#floatMenu img").css("-ms-transform", "translate(-"+coords.x+"px,-"+coords.y+"px)"); 45 window.opener.$("#floatMenu img").css("transform", "translate(-"+coords.x+"px,-"+coords.y+"px)"); 46 window.opener.$("#floatMenu img").css("max-width", "none"); 47 window.opener.$("#floatMenu img").css("max-height", "none"); 48 window.opener.$("#floatMenu img").show(); 49 // 画面を閉じる 50 window.close(); 51 } 52}
html
1<img src="<?php echo $imgPath; ?>" id="jcrop_target"> 2
###試したこと
サンプルの値を試行錯誤はしてみました。ソース中のコメントアウトはその名残です。
CSSは最低限使える程度で、使いこなせていないので、勉強中でよくわかっていません。
###補足情報(言語/FW/ツール等のバージョンなど)
cakePHPを使っています。
画像のトリムにはJcropを使っています。
ソースの書き方もこれいいのか分からず、本当に申し訳ありません。
あなたの回答
tips
プレビュー