안녕하세요.

워드프레스에 빠져있는 1인 입니다.

 

현재 수준은 워드프레스 관련 서적 1권(650페이지) 가량 정독한 수준입니다.

쉬운 수준의 홈페이지는 빌드업 플러그인을 이용하여 만들수 있는 정도입니다.

 

새로운 워드프레스 홈페이지를 만들고 있는데..갤러리 관련 문제에 머리를 끍고 있습니다.

테마나 유료 갤러리 플러그인 또는 라이트박스 플러그인을 사용하고 있습니다.

 

질문사항은 아래와 같습니다.

화면 해상도 이내의 사이즈(예/1920*1080 픽셀) 이미지는 라이트박스로 표현이 될때 정상적으로 표현이 됩니다.

하지만 그 이상의 사이즈(예/1000*20000 픽셀) 이미지는 라이트박스로 표현이 될때 세로 픽셀때문에 작게 표현이 되네요.

 

결과적으로, 이 문제를 해결할 수 있는 다양한 방법을 알고 싶습니다.

제가 원하는 결과물은 라이트박스의 표현시 원본 이미지의 해상도를 그대로 표현하였으면 합니다.

 

현재 사용중인 라이트박스 플러그인은

LC Lightbox – Documentation

입니다.

해당 플러그인 php 파일의 옵션변수는 아래와 같습니다.

==================================================================================================

// show lightbox
gg_throw_lb = function(gall_obj, rel, clicked_index, no_deeplink) {
if(!Object.keys(gall_obj).length) {return false;}

if(jQuery(‘#gg_lb_gall’).length) {jQuery(‘#gg_lb_gall’).empty();}
else {jQuery(‘body’).append(”);}

<?php
switch($lightbox) :
case ‘lcweb’ : default : // LCwb lightbox ?>

<?php
if(!get_option(‘gg_lb_thumbs_full_img’)) {
$tm_url = (get_option(‘gg_use_timthumb’)) ? “‘”.GG_TT_URL .’?src=%URL%&w=%W%&h=%H%&q=80′.”‘” : “‘”.GG_EWPT_URL .’?src=%URL%&w=%W%&h=%H%&q=80′.”‘”;
} else {
$tm_url = ‘false’;
}

// comments object
switch(get_option(‘gg_lb_lcl_comments’)) {

case ‘disqus’ :
$comm_obj = “{
type : ‘disqus’,
shortname : ‘”. get_option(‘gg_lcl_disqus_shortname’, ”) .”‘
}”;
break;

case ‘fb’ :
$style = (get_option(‘gg_lb_lcl_style’, ‘minimal’) == ‘light’) ? ‘light’ : ‘dark’;
$comm_obj = “{
type : ‘facebook’,
style : ‘”. $style .”‘
}”;
break;

default :
$comm_obj = ‘false’;
break;
}
?>

if(typeof(gg_no_lb) != ‘undefined’) {
return false;
}

var sel_img = [];
jQuery.each(Object.keys(gall_obj), function(i, v) {
var obj = gall_obj[v];
var o = {
src : obj.img,
title : obj.title,
txt : obj.descr,
author : obj.author,
canonical_url : (<?php echo $comm_obj ?>) ? “<?php echo site_url().’?lcl_canon=’ ?>” + encodeURIComponent(obj.img) : false
};
sel_img.push(o);
})

var lcl_obj = lc_lightbox(sel_img, {
deeplink : (typeof(no_deeplink) == ‘undefined’) ? <?php echo (get_option(‘gg_lb_deeplink’)) ? ‘true’ : ‘false’; ?> : false,
img_zoom : <?php echo (get_option(‘gg_lb_zoom’)) ? ‘true’ : ‘false’; ?>,
global_type : ‘image’,
wrap_class : ‘<?php echo get_option(‘gg_lb_lcl_openclose’, ‘lcl_zoomin_oc’) ?>’,

slideshow : true,
open_close_time : <?php echo (int)get_option(‘gg_lb_oc_time’, 500) ?>,
animation_time : <?php echo (int)get_option(‘gg_lb_time’, 400) ?>,
slideshow_time : <?php echo (int)get_option(‘gg_lb_ss_time’, 4000) ?>,
autoplay : <?php echo (!get_option(‘gg_lb_slideshow’)) ? ‘false’ : ‘true’; ?>,
counter : <?php echo (get_option(‘gg_lb_counter’)) ? ‘true’ : ‘false’; ?>,
progressbar : <?php echo (get_option(‘gg_lb_progressbar’)) ? ‘true’ : ‘false’; ?>,

max_width : ‘<?php echo get_option(‘gg_lb_max_w’) ?>%’,
max_height : ‘<?php echo get_option(‘gg_lb_max_h’) ?>%’,
ol_opacity : <?php echo ((int)get_option(‘gg_lb_opacity’) / 100) ?>,
ol_color : ‘<?php echo get_option(‘gg_lb_ol_color’, ‘#111′) ?>’,
ol_pattern : <?php echo (get_option(‘gg_lb_ol_pattern’, ‘none’) == ‘none’) ? ‘false’ : “‘”. str_replace(‘pattern-‘, ”, get_option(‘gg_lb_ol_pattern’)) .”‘”; ?>,
border_w : <?php echo (int)get_option(‘gg_lb_border_w’) ?>,
border_col : ‘<?php echo get_option(‘gg_lb_border_col’, ‘#666′) ?>’,
padding : <?php echo (int)get_option(‘gg_lb_padding’) ?>,
radius : <?php echo (int)get_option(‘gg_lb_radius’) ?>,

shadow : <?php echo (get_option(‘gg_lb_use_shadow’)) ? ‘true’ : ‘false’; ?>,
remove_scrollbar: false,
skin : ‘<?php echo get_option(‘gg_lb_lcl_style’, ‘minimal’) ?>’,

data_position : ‘<?php echo get_option(‘gg_lcl_txt_pos’, ‘under’) ?>’,
cmd_position : ‘<?php echo get_option(‘gg_lb_cmd_pos’, ‘inner’) ?>’,
ins_close_pos : ‘<?php echo (get_option(‘gg_lb_corner_close’)) ? ‘corner’ : ‘normal’; ?>’,
nav_btn_pos : ‘<?php echo (get_option(‘gg_lb_middle_nav_pos’)) ? ‘middle’ : ‘normal’; ?>’,

txt_hidden : <?php echo (int)get_option(‘gg_lb_txt_treshold’, 500) ?>,

thumbs_nav : <?php echo (!get_option(‘gg_lb_thumbs’)) ? ‘false’ : ‘true’; ?>,
tn_hidden : <?php echo (int)get_option(‘gg_lb_tn_treshold’, 500) ?>,
thumbs_w : <?php echo (int)get_option(‘gg_lb_thumb_w’, 110) ?>,
thumbs_h : <?php echo (int)get_option(‘gg_lb_thumb_h’, 110) ?>,
thumbs_maker_url: <?php echo $tm_url ?>,

fullscreen : <?php echo (!get_option(‘gg_lb_fullscreen’)) ? ‘false’ : ‘true’; ?>,
fs_only : <?php echo (int)get_option(‘gg_lb_fs_treshold’, 500) ?>,

socials : <?php echo (!get_option(‘gg_lb_socials’)) ? ‘false’ : ‘true’; ?>,
fb_direct_share : <?php echo (!get_option(‘gg_lb_lcl_direct_fb’)) ? ‘false’ : ‘true’; ?>,

comments : <?php echo $comm_obj ?>,
download : <?php echo (!get_option(‘gg_lb_download’)) ? ‘false’ : ‘true’; ?>,
rclick_prevent : <?php echo (get_option(‘gg_disable_rclick’)) ? ‘true’ : ‘false’; ?>,

<?php if(get_option(‘gg_lb_download’)) : ?>
html_is_ready : function() {
jQuery.each(this.vars.elems, function(i,v) {
v.download = v.src;
});
}
<?php endif; ?>
});

if(typeof(lcl_gg_prepare) == ‘undefined’ || !lcl_gg_prepare || typeof(no_deeplink) != ‘undefined’) {
lcl_open(lcl_obj, clicked_index);
}
else {
if(typeof(lcl_gg_nulling_prepare) != ‘undefined’) {clearTimeout(lcl_gg_nulling_prepare);}
lcl_gg_nulling_prepare = setTimeout(function() {
lcl_gg_prepare = false;
}, 150);
}

==========================================================================

 

 

플러그인 제작사가 제공하는 옵션 내역은 아래와 같습니다.

==========================================================================

Option Name	Data Type	Dscription	Default value
gallery	(bool)	whether to display multiple elements singularly or as a gallery	true
gallery_hook	(string|bool)	attribute used to group elements – use false to create a gallery with all fetched elements	rel
live_elements	(bool)	tracks DOM changes to dynamically alterate fetched elements (only if lightbox is initialized with a selector)	true
preload_all	(bool)	whether to preload all images on document ready	false
global_type<i class=”fa fa-star” title=”option not included in LITE version”>	(string|bool)	Forces elements type globally. Can be overrided by in-element attribute. Supported types: image – video – youtube – vimeo – dailymotion – html – iframe	false
deeplink<i class=”fa fa-star” title=”option not included in LITE version”>	(bool)	whether to create browser history and an unique URL for every element	false
img_zoom<i class=”fa fa-star” title=”option not included in LITE version”>	(bool)	whether to enable images zooming system	false
comments<i class=”fa fa-star” title=”option not included in LITE version”>	(bool|object)	whether to enable element comments system. Please check the related chapter to know how to setup specific object keys	false
src_attr	(string)	attribute containing element’s source	href (to be used on links)
title_attr	(string)	attribute containing element’s title. Is possible to specify an inner selector with this syntax: “> .selector” or “> span”	title
txt_attr	(string)	attribute containing element’s description. Is possible to specify an inner selector with this syntax: “> .selector” or “> span”	data-lcl-txt
author_attr	(string)	attribute containing element’s author. Is possible to specify an inner selector with this syntax: “> .selector” or “> span”	data-lcl-author
slideshow	(bool)	whether to enable slideshow system	true
open_close_time	(int)	animation duration for lightbox opening and closing (in milliseconds)	500
ol_time_diff	(int)	overlay’s animation advance (on opening) and delay (on close) to window (in milliseconds)	100
fading_time	(int)	elements fading animation duration (in milliseconds)	150
animation_time	(int)	sizing animation duration (in milliseconds)	300
slideshow_time	(int)	slideshow interval duration (in milliseconds)	6000
autoplay	(bool)	whether to autoplay slideshow	false
counter	(bool)	whether to display elements counter	false
progressbar	(bool)	whether to display a progressbar when slideshow runs	true
carousel	(bool)	whether to create a non-stop pagination cycling elements	true
max_width	(int|string)	lightbox maximum width. Use a responsive percent value or an integer for static pixel value	93%
max_height	(int|string)	lightbox maximum height. Use a responsive percent value or an integer for static pixel value	93%
wrap_padding	(string)	sets lightbox wrapping padding. Useful to maintain spaces using px max-sizes. Use a CSS value
ol_opacity	(float)	lightbox overlay’s opacity	0.7
ol_color	(string)	lightbox overlay’s color	#111
ol_pattern	(string|bool)	lightbox overlay’s pattern. Use pattern’s name (check available ones into IMG folder) or false	false
border_w	(int)	Lightbox border’s width (in pixels)	0
border_col	(string)	Lightbox border’s color	#ddd
padding	(int)	Lightbox contents padding (in pixels)	0
radius	(int)	Lightbox borders radius (in pixels)	0
shadow	(bool)	whether to apply a shadow around lightbox window	true
remove_scrollbar	(bool)	whether to hide page’s vertical scroller on lightbox opening	true
wrap_class	(string)	Custom classes added to wrapper. Useful for customizations
skin	(string)	Skin applied to lightbox. Skin’s CSS must be already included in the page. Skin name will be used to create a wapper’s class: for “light” will create lcl_light class. Read more about skins in the related chapter	light
data_position	(string)	Specifies where elements data will be shown. Available modes are:over (over element) under (under element) rside (on right side) lside (on left side) Please note lightbox uses a smart system automatically switching to “over” as soon element becomes too small because of long texts or tiny window.	over
cmd_position	(string)	Declare where commands have to be shown: available options are inner or outer. This can be forced to “outer” on an element basis using a specific attribute. Check “initialization” chapter to know more.Please note lightbox will automatically switch to “outer” if inner commands are too wide for the represented element	inner
ins_close_pos	(string)	Set closing button’s position. Available options: normal, corner (only for inner commands)	normal
nav_btn_pos	(string)	Set arrows and play/pause position. Available options: normal, middle	normal
txt_hidden	(int|bool)	Whether to hide texts on lightbox opening:false = texts are always shown integer number = minimum treshold to keep texts. Is related browser’s smaller side in pixels	500
show_title	(bool)	whether to display titles	true
show_descr	(bool)	whether to display descriptions	true
show_author	(bool)	whether to display authors	true
thumbs_nav	(bool)	enables thumbnails navigation (requires elements poster or images)	true
tn_icons	(bool)	prints type icons on thumbs if element types are mixed	true
tn_hidden	(int|bool)	whether to hide thumbs navigation on lightbox opening:false = texts are always shown integer number = minimum treshold to keep texts. Is related browser’s smaller side in pixels	500
thumbs_w	(int)	thumbnails width (in pixels)	110
thumbs_h	(int)	thumbnails height (in pixels)	110
thumb_attr	(bool|string)	element’s attribute name containing thumbnail’s URL. Use false to use thumbs maker system (see next option)	false
thumbs_maker_url	(bool|string)	here you can insert a common URL including specific placeholders to create thumbnails on the fly (for example with Timthumb). Use false to ignore this. Here’s a demo URL containing detected placeholders:http://www.mysite.com/humbs_maker.php?src=%URL%&w=%W%&h=%H%	false
fullscreen	(bool)	Whether to allow fullscreen mode	true
fs_img_behavior	(string)	Fullscreen image behavior:fit – image will be completely visible (eventually leaving spaces on edges) fill – image will always fill the screen (a portion could be eventually hidden) smart – LC Lightbox uses “fit” mode and switches to “fill” only if image’s aspect ratio is similar to available space	fit
fs_only	(int|bool)	whether to use only fullscreen mode lightbox opening (useful for mobile devices):false = lightbox will be normally opened integer number = minimum treshold to normally open lightbox. Is related browser’s smaller side in pixels	500
browser_fs_mode	(bool)	whether to use browser fullscreen mode or not	true
socials	(bool)	whether to show social share button	true
fb_direct_share	(bool|string)	whether to use direct FB contents share: use a Facebook App ID or false. Remember to add Facebook SDK in your website as explained in Comments section	false
txt_toggle_cmd	(bool)	whether to show element’s text toggle button	true
download	(bool)	whether to show element’s file download button	false
touchswipe	(bool)	enables touch interactions (requires AlloyFinger)	true
mousewheel	(bool)	enables elements navigation with mousewheel	true
modal	(bool)	enables modal mode (no lightbox closing on overlay click)	false
rclick_prevent	(bool)	whether to avoid right click on lightbox elements	false

 

 

 

실현 가능한 다른 플러그인이나 방법을 알고 있으신 분들의 도움 부탁드립니다.

감사합니다.