mirror of
https://github.com/danpros/htmly.git
synced 2026-04-20 20:46:26 +05:30
Simple Image Gallery
Allows us to reuse previous uploaded images.
This commit is contained in:
danpros
parent
829d3d740d
commit
8020b606e2
7 changed files with 232 additions and 28 deletions
|
|
@ -9,6 +9,8 @@
|
|||
$('#insertImageDialog').modal('hide');
|
||||
$('#insertImageDialogURL').val('');
|
||||
$('#insertImageDialogFile').val('');
|
||||
$('#insertMediaDialogURL').val('');
|
||||
$('#insertMediaDialogFile').val('');
|
||||
};
|
||||
$('#insertImageDialogInsert').click( function() {
|
||||
callbackFunc( $('#insertImageDialogURL').val().length > 0 ? $('#insertImageDialogURL').val() : null );
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ if (file_exists($tagslang)) {
|
|||
file_put_contents($tagslang, print_r($tmp, true));
|
||||
}
|
||||
|
||||
$images = get_gallery();
|
||||
|
||||
?>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
|
||||
|
|
@ -193,12 +195,32 @@ $( function() {
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
</style>
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
.cover-container {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.cover-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 2px 2px;
|
||||
border-top-right-radius: 2px;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
vertical-align: top;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
|
||||
|
|
@ -207,6 +229,18 @@ $( function() {
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php if (!empty($images)) :?>
|
||||
<div class="form-group">
|
||||
<div class="row-fluid cover-container">
|
||||
<?php foreach ($images as $img):?>
|
||||
<div class="cover-item">
|
||||
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<?php endif;?>
|
||||
<div class="form-group">
|
||||
<label for="insertImageDialogURL">URL</label>
|
||||
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
|
||||
|
|
@ -223,10 +257,10 @@ $( function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php if ($type == 'is_image'):?>
|
||||
<div class="modal fade" id="insertMediaDialog" tabindex="-1" role="dialog" aria-labelledby="insertMediaDialogTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5>
|
||||
|
|
@ -235,6 +269,18 @@ $( function() {
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php if (!empty($images)) :?>
|
||||
<div class="form-group">
|
||||
<div class="row-fluid cover-container">
|
||||
<?php foreach ($images as $img):?>
|
||||
<div class="cover-item">
|
||||
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<?php endif;?>
|
||||
<div class="form-group">
|
||||
<label for="insertMediaDialogURL">URL</label>
|
||||
<input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
|
||||
|
|
@ -251,7 +297,8 @@ $( function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif;?>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -259,3 +306,9 @@ $( function() {
|
|||
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
|
||||
<script>
|
||||
$('.the-img').click(function(e) {
|
||||
$('#insertMediaDialogURL').val($(e.target).attr('src'));
|
||||
$('#insertImageDialogURL').val($(e.target).attr('src'));
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<?php if (!defined('HTMLY')) die('HTMLy'); ?>
|
||||
<?php $images = get_gallery(); ?>
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
|
||||
<script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
|
||||
<script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script>
|
||||
|
|
@ -56,12 +57,32 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
</style>
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
.cover-container {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.cover-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 2px 2px;
|
||||
border-top-right-radius: 2px;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
vertical-align: top;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
|
||||
|
|
@ -70,6 +91,18 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php if (!empty($images)) :?>
|
||||
<div class="form-group">
|
||||
<div class="row-fluid cover-container">
|
||||
<?php foreach ($images as $img):?>
|
||||
<div class="cover-item">
|
||||
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<?php endif;?>
|
||||
<div class="form-group">
|
||||
<label for="insertImageDialogURL">URL</label>
|
||||
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
|
||||
|
|
@ -90,4 +123,9 @@
|
|||
</div>
|
||||
<!-- Declare the base path. Important -->
|
||||
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
|
||||
<script>
|
||||
$('.the-img').click(function(e) {
|
||||
$('#insertImageDialogURL').val($(e.target).attr('src'));
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -74,6 +74,8 @@ if (file_exists($tagslang)) {
|
|||
file_put_contents($tagslang, print_r($tmp, true));
|
||||
}
|
||||
|
||||
$images = get_gallery();
|
||||
|
||||
?>
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
|
||||
<script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
|
||||
|
|
@ -248,12 +250,32 @@ $( function() {
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
</style>
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
.cover-container {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.cover-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 2px 2px;
|
||||
border-top-right-radius: 2px;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
vertical-align: top;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
|
||||
|
|
@ -262,6 +284,18 @@ $( function() {
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php if (!empty($images)) :?>
|
||||
<div class="form-group">
|
||||
<div class="row-fluid cover-container">
|
||||
<?php foreach ($images as $img):?>
|
||||
<div class="cover-item">
|
||||
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<?php endif;?>
|
||||
<div class="form-group">
|
||||
<label for="insertImageDialogURL">URL</label>
|
||||
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
|
||||
|
|
@ -279,9 +313,9 @@ $( function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($type == 'is_image'):?>
|
||||
<div class="modal fade" id="insertMediaDialog" tabindex="-1" role="dialog" aria-labelledby="insertMediaDialogTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5>
|
||||
|
|
@ -290,6 +324,18 @@ $( function() {
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php if (!empty($images)) :?>
|
||||
<div class="form-group">
|
||||
<div class="row-fluid cover-container">
|
||||
<?php foreach ($images as $img):?>
|
||||
<div class="cover-item">
|
||||
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<?php endif;?>
|
||||
<div class="form-group">
|
||||
<label for="insertMediaDialogURL">URL</label>
|
||||
<input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
|
||||
|
|
@ -306,9 +352,17 @@ $( function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif;?>
|
||||
|
||||
</div>
|
||||
<!-- Declare the base path. Important -->
|
||||
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
|
||||
<script>
|
||||
$('.the-img').click(function(e) {
|
||||
$('#insertMediaDialogURL').val($(e.target).attr('src'));
|
||||
$('#insertImageDialogURL').val($(e.target).attr('src'));
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ if ($type == 'is_frontpage') {
|
|||
}
|
||||
}
|
||||
|
||||
$images = get_gallery();
|
||||
|
||||
?>
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
|
||||
<script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
|
||||
|
|
@ -128,12 +130,32 @@ if ($type == 'is_frontpage') {
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
</style>
|
||||
<style>
|
||||
.wmd-prompt-background {z-index:10!important;}
|
||||
#wmd-preview img {max-width:100%;}
|
||||
.cover-container {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.cover-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 2px 2px;
|
||||
border-top-right-radius: 2px;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
vertical-align: top;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
|
||||
|
|
@ -142,6 +164,18 @@ if ($type == 'is_frontpage') {
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php if (!empty($images)) :?>
|
||||
<div class="form-group">
|
||||
<div class="row-fluid cover-container">
|
||||
<?php foreach ($images as $img):?>
|
||||
<div class="cover-item">
|
||||
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<?php endif;?>
|
||||
<div class="form-group">
|
||||
<label for="insertImageDialogURL">URL</label>
|
||||
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
|
||||
|
|
@ -163,3 +197,8 @@ if ($type == 'is_frontpage') {
|
|||
<!-- Declare the base path. Important -->
|
||||
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
|
||||
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
|
||||
<script>
|
||||
$('.the-img').click(function(e) {
|
||||
$('#insertImageDialogURL').val($(e.target).attr('src'));
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue