Ticket #10896: imagemenusample.html

File imagemenusample.html, 9.7 KB (added by abua, 7 years ago)

Sample page

Line 
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Image Menu Sample</title>
5    <meta charset="utf-8">
6    <style type="text/css">
7        .block
8        {
9            display: block;
10            height: 100%;
11            width: 60%;
12            position: relative;
13        }
14        .block .block-overlay
15        {
16            display: block;
17            height: 100%;
18            left: 0;
19            position: absolute;
20            top: 0;
21            width: 100%;
22            z-index: 2;
23        }
24        .block:hover .block-overlay
25        {
26            border: 2px solid #626262;
27            border-radius: 2px;
28            left: -2px;
29            top: -2px;
30            display: block;
31            box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
32        }
33        .block .block-overlay .nav-right
34        {
35            position: absolute;
36            right: -2px;
37            top: 0px;
38        }
39       
40        .block .block-overlay a
41        {
42            background: none repeat scroll 0 0 #2D2D2D;
43            border-radius: 0 0 0 0 !important;
44            cursor: pointer;
45            display: none;
46            float: left;
47            height: 30px;
48            margin-right: 2px;
49            opacity: 0.75;
50            position: relative;
51            width: 44px;
52            z-index: 2;
53        }
54        .block:hover .block-overlay a
55        {
56            display: block;
57        }
58        .block .block-overlay a:hover
59        {
60            background-color: #2d2d2d;
61            opacity: 1;
62            filter: alpha(opacity=100);
63        }
64        .block .block-overlay a span
65        {
66            width: 20px;
67            height: 20px;
68            display: block;
69            float: left;
70            margin: 5px 12px;
71        }
72       
73        .subimage-block
74        {
75            height: 100%;
76            left: 0;
77            position: absolute;
78            top: 0;
79            width: 100%;
80        }
81       
82       
83        .subimage-block .subimage-block-overlay
84        {
85            background: none repeat scroll 0 0 #000000;
86            height: 100%;
87            left: 0;
88            opacity: 0;
89            position: absolute;
90            top: 0;
91            width: 100%;
92        }
93       
94        .subimage-block:hover .action-list
95        {
96            display: block !important;
97        }
98       
99        .subimage-block .action-list:hover, .subimage-block .action-list.active
100        {
101            background-color: #2D2D2D;
102            display: block;
103            opacity: 1;
104        }
105        .subimage-block .action-list
106        {
107            background: none repeat scroll 0 0 #2D2D2D;
108            border-radius: 3px 3px 3px 3px;
109            cursor: pointer;
110            display: none;
111            float: left;
112            height: 30px;
113            left: 2px;
114            margin-right: 4px;
115            opacity: 0.75;
116            position: absolute;
117            top: 6px;
118            width: 44px;
119        }
120       
121       
122        .subimage-block .action-list div.setting
123        {
124            background: url("images/icon-settings.png") repeat scroll 0 0 transparent;
125            display: block;
126            float: left;
127            height: 20px;
128            margin: 5px 12px;
129            width: 20px;
130        }
131       
132       
133        .eb-content-mail .block .subimage-block ul
134        {
135            list-style-type: none;
136            padding-left: 0;
137            z-index: 3;
138        }
139       
140        .subimage-block .action-list.active ul
141        {
142            display: block;
143        }
144        .subimage-block .action-list ul
145        {
146            background: none repeat scroll 0 0 #FFFFFF;
147            border-color: #BABABA #ACACAC #999999;
148            border-style: solid;
149            border-width: 1px;
150            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
151            display: none;
152            left: 0;
153            min-width: 160px;
154            padding: 8px 0;
155            position: absolute;
156            top: 100%;
157            width: auto;
158        }
159       
160       
161        .subimage-block .action-list ul > li
162        {
163            height: 27px;
164            position: relative;
165            text-align: left;
166            width: auto;
167            list-style-type: none;
168        }
169       
170       
171        .subimage-block .action-list ul > li > a
172        {
173            -moz-box-sizing: border-box;
174            color: #484848;
175            display: block;
176            font-family: Arial,Helvetica,sans-serif;
177            font-size: 13px;
178            height: 27px;
179            line-height: 27px;
180            padding: 0 20px 0 30px;
181            position: relative;
182            text-decoration: none;
183            white-space: nowrap;
184            width: 100%;
185        }
186    </style>
187
188    <script src="../ckeditor.js"></script>
189    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
190    <script type="text/javascript">
191        $(document).ready(function () {
192            $('.trigger-block-edit1').live("click", function (e) {
193                try {
194                    e.stopPropagation();
195
196                    // Get block & element
197                    var block = $(this).closest('.block');
198                    var element = block.find('.block-content');
199                    // Set inline editing on this element
200                    var elementId = element.attr("id");
201                    element.attr("contenteditable", "true");
202                    //editor.config.extraPlugins = 'Media';
203                    var editor = CKEDITOR.inline(elementId);
204                    editor.on("blur", function () { return false; });
205
206                    // Hide block overlay
207                    $(this).parent().parent().hide();
208                    block.addClass("selected");
209
210                    element.focus();
211                }
212                catch (ex) { alert(ex.message); }
213            });
214
215            // action-list button
216            $('.action-list').live("click", function (e) {
217                e.stopPropagation();
218                $(this).toggleClass('active');
219            });
220            $('.subimage-block').live("click", function (e) {
221                e.stopPropagation();
222                $('.action-list').removeClass('active');
223                $(this).addClass('active');
224            });
225            $(document).click(function () {
226                $('.subimage-block').removeClass('active');
227                $('.action-list').removeClass('active');
228            });
229        });
230    </script>
231</head>
232<body>
233    <center>
234        <h1 style="margin-top: 50px;">
235            Sample image with menu</h1>
236        <br />
237        <br />
238        <div style="display: block;" class="block">
239            <div class="block-overlay trigger-block-drag">
240                <nav class="nav-right"><a class="act trigger-block-edit1"><span class="edit">Edit</span></a></nav>
241            </div>
242            <table width="100%" cellspacing="0" cellpadding="0">
243                <tbody>
244                    <tr>
245                        <td style="padding: 20px;">
246                            <div class="block-content block-image" style="color: rgb(66, 66, 66); font-family: sans-serif;
247                                font-size: 12px; font-weight: 400; font-style: normal; text-align: left; line-height: 1.25;"
248                                id="dynamicDiv1">
249                                <div class="image-caption-wrap">
250                                    <div contenteditable="false" style="position: relative;" class="image-block-wrap">
251                                        <div contenteditable="false" class="subimage-block">
252                                            <div class="subimage-block-overlay">
253                                                &nbsp;</div>
254                                            <div class="action-list">
255                                                <div class="setting">
256                                                    &nbsp;</div>
257                                                <ul>
258                                                    <li><a href="#">Change</a></li>
259                                                    <li><a href="#">Delete</a></li>
260                                                    <li><a href="#" class="checkable">Edge to Edge</a></li>
261                                                    <li><a href="#">Default Size</a></li>
262                                                    <li><a href="#">Add / Edit Link</a></li>
263                                                </ul>
264                                            </div>
265                                        </div>
266                                        <div contenteditable="false" class="image-container">
267                                            <img contenteditable="false" src="http://blogs.ubc.ca/CourseBlogSample01/wp-content/themes/thesis/rotator/sample-1.jpg"
268                                                default-size="420§315" class="image-preview"></div>
269                                    </div>
270                                    <div style="clear: both;" class="caption-wrap bottom-caption">
271                                        <div style="padding-top: 20px;" class="caption">
272                                            <p>
273                                                This is bottom caption for the above image. This is editable area.</p>
274                                        </div>
275                                    </div>
276                                </div>
277                            </div>
278                        </td>
279                    </tr>
280                </tbody>
281            </table>
282        </div>
283    </center>
284</body>
285</html>
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy