/**
* Render gallery metabox
*
* @since 1.0
*/
function easy_image_gallery_metabox()
{
global $post;
?>
<div id="gallery_images_container">
<ul class="gallery_images">
<?php
$image_gallery = get_post_meta($post->ID, '_easy_image_gallery', true);
$attachments = array_filter(explode(',', $image_gallery));
if ($attachments) {
foreach ($attachments as $attachment_id) {
echo '<li class="image attachment details" data-attachment_id="' . $attachment_id . '"><div class="attachment-preview"><div class="thumbnail">
' . wp_get_attachment_image($attachment_id, 'thumbnail') . '</div>
<a href="#" class="delete check" title="' . __('Remove image', 'easy-image-gallery') . '"><div class="media-modal-icon"></div></a>
</div></li>';
}
}
?>
</ul>
<input type="hidden" id="image_gallery" name="image_gallery" value="<?php
echo esc_attr($image_gallery);
?>
" />
<?php
wp_nonce_field('easy_image_gallery', 'easy_image_gallery');
?>
</div>
<p class="add_gallery_images hide-if-no-js">
<a href="#"><?php
_e('Add gallery images', 'easy-image-gallery');
?>
</a>
</p>
<?php
// options don't exist yet, set to checked by default
if (!get_post_meta(get_the_ID(), '_easy_image_gallery_link_images', true)) {
$checked = ' checked="checked"';
} else {
$checked = easy_image_gallery_has_linked_images() ? checked(get_post_meta(get_the_ID(), '_easy_image_gallery_link_images', true), 'on', false) : '';
}
?>
<p>
<label for="easy_image_gallery_link_images">
<input type="checkbox" id="easy_image_gallery_link_images" value="on" name="easy_image_gallery_link_images"<?php
echo $checked;
?>
/> <?php
_e('Link images to larger sizes', 'easy-image-gallery');
?>
</label>
</p>
<?php
/**
* Props to WooCommerce for the following JS code
*/
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Uploading files
var image_gallery_frame;
var $image_gallery_ids = $('#image_gallery');
var $gallery_images = $('#gallery_images_container ul.gallery_images');
jQuery('.add_gallery_images').on( 'click', 'a', function( event ) {
var $el = $(this);
var attachment_ids = $image_gallery_ids.val();
event.preventDefault();
// If the media frame already exists, reopen it.
if ( image_gallery_frame ) {
image_gallery_frame.open();
return;
}
// Create the media frame.
image_gallery_frame = wp.media.frames.downloadable_file = wp.media({
// Set the title of the modal.
title: '<?php
_e('Add Images to Gallery', 'easy-image-gallery');
?>
',
button: {
text: '<?php
_e('Add to gallery', 'easy-image-gallery');
?>
',
},
multiple: true
});
// When an image is selected, run a callback.
image_gallery_frame.on( 'select', function() {
var selection = image_gallery_frame.state().get('selection');
selection.map( function( attachment ) {
attachment = attachment.toJSON();
if ( attachment.id ) {
attachment_ids = attachment_ids ? attachment_ids + "," + attachment.id : attachment.id;
$gallery_images.append('\
<li class="image attachment details" data-attachment_id="' + attachment.id + '">\
<div class="attachment-preview">\
<div class="thumbnail">\
<img src="' + attachment.url + '" />\
</div>\
<a href="#" class="delete check" title="<?php
_e('Remove image', 'easy-image-gallery');
?>
"><div class="media-modal-icon"></div></a>\
</div>\
</li>');
}
} );
$image_gallery_ids.val( attachment_ids );
});
// Finally, open the modal.
image_gallery_frame.open();
});
// Image ordering
$gallery_images.sortable({
items: 'li.image',
cursor: 'move',
scrollSensitivity:40,
forcePlaceholderSize: true,
forceHelperSize: false,
helper: 'clone',
opacity: 0.65,
placeholder: 'eig-metabox-sortable-placeholder',
start:function(event,ui){
ui.item.css('background-color','#f6f6f6');
},
stop:function(event,ui){
ui.item.removeAttr('style');
},
update: function(event, ui) {
var attachment_ids = '';
$('#gallery_images_container ul li.image').css('cursor','default').each(function() {
var attachment_id = jQuery(this).attr( 'data-attachment_id' );
attachment_ids = attachment_ids + attachment_id + ',';
});
$image_gallery_ids.val( attachment_ids );
}
});
// Remove images
$('#gallery_images_container').on( 'click', 'a.delete', function() {
$(this).closest('li.image').remove();
var attachment_ids = '';
$('#gallery_images_container ul li.image').css('cursor','default').each(function() {
var attachment_id = jQuery(this).attr( 'data-attachment_id' );
attachment_ids = attachment_ids + attachment_id + ',';
});
$image_gallery_ids.val( attachment_ids );
return false;
} );
});
</script>
<?php
}
/**
* Output gallery
*
* @since 1.0
*/
function easy_image_gallery()
{
$attachment_ids = easy_image_gallery_get_image_ids();
global $post;
if ($attachment_ids) {
?>
<?php
$has_gallery_images = get_post_meta(get_the_ID(), '_easy_image_gallery', true);
if (!$has_gallery_images) {
return;
}
// convert string into array
$has_gallery_images = explode(',', get_post_meta(get_the_ID(), '_easy_image_gallery', true));
// clean the array (remove empty values)
$has_gallery_images = array_filter($has_gallery_images);
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'feature');
$image_title = esc_attr(get_the_title(get_post_thumbnail_id($post->ID)));
// css classes array
$classes = array();
// thumbnail count
$classes[] = $has_gallery_images ? 'thumbnails-' . easy_image_gallery_count_images() : '';
// linked images
$classes[] = easy_image_gallery_has_linked_images() ? 'linked' : '';
$classes = implode(' ', $classes);
ob_start();
?>
<ul class="image-gallery <?php
echo $classes;
?>
">
<?php
foreach ($attachment_ids as $attachment_id) {
$classes = array('popup');
// get original image
$image_link = wp_get_attachment_image_src($attachment_id, apply_filters('easy_image_gallery_linked_image_size', 'large'));
$image_link = $image_link[0];
$image = wp_get_attachment_image($attachment_id, apply_filters('easy_image_gallery_thumbnail_image_size', 'thumbnail'), '', array('alt' => trim(strip_tags(get_post_meta($attachment_id, '_wp_attachment_image_alt', true)))));
$image_caption = get_post($attachment_id)->post_excerpt ? get_post($attachment_id)->post_excerpt : '';
$image_class = esc_attr(implode(' ', $classes));
$lightbox = easy_image_gallery_get_lightbox();
$rel = easy_image_gallery_count_images() > 1 ? 'rel="' . $lightbox . '[group]"' : 'rel="' . $lightbox . '"';
if (easy_image_gallery_has_linked_images()) {
$html = sprintf('<li><a %s href="%s" class="%s" title="%s"><i class="icon-view"></i><span class="overlay"></span>%s</a></li>', $rel, $image_link, $image_class, $image_caption, $image);
} else {
$html = sprintf('<li>%s</li>', $image);
}
echo apply_filters('easy_image_gallery_html', $html, $rel, $image_link, $image_class, $image_caption, $image, $attachment_id, $post->ID);
}
?>
</ul>
<?php
$gallery = ob_get_clean();
return apply_filters('easy_image_gallery', $gallery);
?>
<?php
}
}
/**
* JS
*
* @since 1.0
*/
function easy_image_gallery_js()
{
if (!easy_image_gallery_allowed_post_type() || !easy_image_gallery_is_gallery()) {
return;
}
if (is_singular() && easy_image_gallery_has_linked_images()) {
?>
<?php
$lightbox = easy_image_gallery_get_lightbox();
switch ($lightbox) {
case 'prettyphoto':
ob_start();
?>
<script>
jQuery(document).ready(function() {
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
social_tools : false,
show_title : false
});
});
</script>
<?php
$js = ob_get_clean();
echo apply_filters('easy_image_gallery_prettyphoto_js', $js);
?>
<?php
break;
case 'fancybox':
ob_start();
?>
<script>
jQuery(document).ready(function() {
jQuery("a.popup").attr('rel', 'fancybox').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 200,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
<?php
$js = ob_get_clean();
echo apply_filters('easy_image_gallery_fancybox_js', $js);
?>
<?php
break;
default:
break;
}
// allow developers to add/modify JS
do_action('easy_image_gallery_js', $lightbox);
?>
<?php
}
?>
<?php
}
