5e67612e9b
- Added YAML file for the HTML template code for the modal to work - Added CSS and JS code for modal to look and function properly - Updated code to take comments into account. - Simplified HTML template and expanded JS to set up image modal on load. - Added preliminary drag script. - Converted jQuery UI draggable to Draggabilly
42 lines
1.3 KiB
Plaintext
42 lines
1.3 KiB
Plaintext
<div class="wrapper-modal wrapper-modal-image">
|
|
<section class="image-link">
|
|
<%= smallHTML%>
|
|
<a href="#" class="modal-ui-icon action-fullscreen" role="button">
|
|
<span class="label">
|
|
<i class="icon-fullscreen icon-large"></i> <%= gettext("Fullscreen") %>
|
|
</span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="image-modal">
|
|
<section class="image-content">
|
|
<div class="image-wrapper">
|
|
<img alt="<%= largeALT %>, <%= gettext('Large') %>" src="<%= largeSRC %>" />
|
|
</div>
|
|
|
|
<a href="#" class="modal-ui-icon action-close" role="button">
|
|
<span class="label">
|
|
<i class="icon-remove icon-large"></i> <%= gettext("Close") %>
|
|
</span>
|
|
</a>
|
|
|
|
<ul class="image-controls">
|
|
<li class="image-control">
|
|
<a href="#" class="modal-ui-icon action-zoom-in" role="button">
|
|
<span class="label">
|
|
<i class="icon-zoom-in icon-large"></i> <%= gettext("Zoom In") %>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="image-control">
|
|
<a href="#" class="modal-ui-icon action-zoom-out is-disabled" role="button">
|
|
<span class="label">
|
|
<i class="icon-zoom-out icon-large"></i> <%= gettext("Zoom Out") %>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
</div> |