質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1917閲覧

フローティングメニューにトリムした画像を表示したい

yue_ohashi

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/11 15:27

###前提・実現したいこと
フローティングメニューにトリムした画像を表示したいです。

「画像をアップロードして表示する親ページ」と「画像のトリム範囲を決める子ページ」があります。
親ページの方で画像を表示、スクロールに伴ってフローティングさせることはできました。
子ページを呼び出し、画像の範囲選択をして、親ページに戻って、スクロールでフローティングさせたいのですが、ここでうまくいかずに困っています。
トリムした画像が表示されるのですが、スクロールに伴ってトリムの位置がズレていってしまいます。。。
トリムした画像を固定したままフローティングさせたいのですが、どの値をどうすればいいのかがわかりません。
ご教授よろしくお願いします。

###発生している問題・エラーメッセージ

画像のトリム位置がズレていってしまう

###該当のソースコード
親ページ

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(&quot;".substr($imgPath, strrpos($imgPath, "/")+1)."&quot;)'>".__("画像のトリミング")."</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を使っています。
ソースの書き方もこれいいのか分からず、本当に申し訳ありません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問