「ブログメイン」ウィジェット更新。

diff --git a/templates/_admin4/css/style.css b/templates/_admin4/css/style.css
index ce096ec..66307bb 100644 (file)
--- a/templates/_admin4/css/style.css
+++ b/templates/_admin4/css/style.css
@@ -274,6 +274,36 @@ background-color: #0081c2;
 }
 .modal-processing .modal-content .icon {
 }
+/*** 画像クロップ用ダイアログ ***/
+#crop_target {
+       max-height:400px;
+       max-width:400px;
+       height: auto!important;
+       width: auto!important;
+}
+.jcrop-holder #crop_preview {
+       display: block;
+       position: absolute;
+       z-index: 2000;
+       top: 5px;
+       right: -140px;
+       padding: 6px;
+       border: 1px rgba(0,0,0,.4) solid;
+       background-color: white;
+
+       -webkit-border-radius: 6px;
+       -moz-border-radius: 6px;
+       border-radius: 6px;
+
+       -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+       -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+       box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+}
+#crop_preview .preview-container {
+       width:100px;
+       height:100px;
+       overflow: hidden;
+}
 /****** 画面編集 ******/
 #layout_preview_title {
        margin-top:10px;

diff --git a/widgets/blog_main/include/template/admin_image.tmpl.html b/widgets/blog_main/include/template/admin_image.tmpl.html
index ae4b356..a94ee29 100644 (file)
--- a/widgets/blog_main/include/template/admin_image.tmpl.html
+++ b/widgets/blog_main/include/template/admin_image.tmpl.html
@@ -40,9 +40,9 @@ function initJcrop()
                originalh,
 
                // Grab some information about the preview pane
-               $preview = $('#preview-pane'),
-               $pcnt = $('#preview-pane .preview-container'),
-               $pimg = $('#preview-pane .preview-container img'),
+               $preview = $('#crop_preview'),
+               $pcnt = $('#crop_preview .preview-container'),
+               $pimg = $('#crop_preview .preview-container img'),
 
                xsize = $pcnt.width(),
                ysize = $pcnt.height();
@@ -53,9 +53,9 @@ function initJcrop()
                originalw = this.width;
                originalh = this.height;
        };
-       img.src = $("#target").attr("src");
+       img.src = $("#crop_target").attr("src");
 
-       $('#target').Jcrop({
+       $('#crop_target').Jcrop({
                /*                      keySupport: false,*/
                onChange: updatePreview,
                onSelect: updatePreview,
@@ -111,8 +111,8 @@ function createEyecatch(url)
        dialogText += '<input type="hidden" id="w" name="w" />';
        dialogText += '<input type="hidden" id="h" name="h" />';
        dialogText += '<p>画像から切り取る領域をマウスで選択してください</p>';
-       dialogText += '<img src="' + url + '" id="target" alt="selected image" />';
-       dialogText += '<div id="preview-pane" style="display:none;">';
+       dialogText += '<img src="' + url + '" id="crop_target" alt="selected image" />';
+       dialogText += '<div id="crop_preview" style="display:none;">';
        dialogText += '<div class="preview-container">';
        dialogText += '<img id="preview" src="' + url + '" class="jcrop-preview" alt="Preview" />';
        dialogText += '</div>';
@@ -193,45 +193,6 @@ $(function()
 });
 //]]>
 </script>
-<style type="text/css">
-#target {
-        max-height:400px;
-        max-width:400px;
-        height: auto!important;
-        width: auto!important;
-}
-/* Apply these styles only when #preview-pane has
-   been placed within the Jcrop widget */
-.jcrop-holder #preview-pane {
-  display: block;
-  position: absolute;
-  z-index: 2000;
-  top: 5px;
-  right: -140px;
-  padding: 6px;
-  border: 1px rgba(0,0,0,.4) solid;
-  background-color: white;
-
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-
-  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-}
-
-/* The Javascript code will set the aspect ratio of the crop
-   area based on the size of the thumbnail preview,
-   specified here */
-#preview-pane .preview-container {
-/*  width: 250px;
-  height: 170px;*/
-  width:100px;
-  height:100px;
-  overflow: hidden;
-}
-</style>
 <div class="m3config_container">
 <!-- m3:ErrorMessage -->
 <form method="post" name="main">