jQuery Fancybox и управление размером каркаса изображения
Вопрос
Я знаю, что я могу использовать параметры рамы и кадров для управления размером кадра для контента встроенного и iframe, но что я могу сделать для ручного управления размером кадра при отображении изображений?
Моя проблема в том, что у меня есть изображения, которые я хочу отобразить в Fancybox, которые чрезвычайно горизонтальны и не очень вертикально; Fancybox масштабирует его, так что Lightbox действительно широкая и не очень высокая, а это значит, что вы вообще не можете увидеть изображение.
Я хотел бы, чтобы изображение прокручило горизонтали в лайтбоксе. (И нет, я не могу изменить изображения).
Какие-нибудь мысли?
Решение
В итоге я просто взломал Fancybox и добавил еще один вариант, чтобы сделать то, что я хотел. Вот суть:
if (opts.imgManSize) {
_set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',opts.imgWidth,imagePreloader.height+20);
} else {
_set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',width,height);
}
...
if (opts.imgManSize) {
$("#fancy_content").css('overflow','auto');
}
...
if (opts.imgManSize) {
$('#fancy_img').css('width','auto');
}
...
$.fn.fancybox.defaults = {
...
imgManSize:false,
imgWidth:425,
imgHeight:355,
...
}
Работает как шарм.
Другие советы
Вы можете просто приспособиться к размеру размер по размеру изображения путем изменения CSS.
Чтобы перезаписать ширину и объявления высоты, которые создает плагин, добавьте:
#fancybox-inner {
width: auto!important;
height: auto!important;
}
#fancybox-wrap{
width: auto!important;
height: auto!important;
}
и удалить position:absolute
на #fancybox-inner
У меня была эта проблема, и я написал какой -то код, чтобы решить это для внедрения новых видеороликов Vimeo iframe'd, основанного на существующем фрагменте, который я нашел. Это позволит вам добавить параметры URL для ширины и высоты на Fancybox Base Base. Если вы не добавите их, по умолчанию откроет iframe с высотой 90% и 90%.
(function($){
$(function(){
// Fancybox: IFRAME
var fancybox_iframe = $('.fancybox-iframe');
if (fancybox_iframe.length > 0){
fancybox_iframe.each(function(index){
// Inline frame width param
if( $(this).attr('href').match(/width=[0-9]+/i) ){
var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
} else {
var fWidth = '90%';
}
// Inline frame height param
if( $(this).attr('href').match(/height=[0-9]+/i) ){
var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
} else {
var fHeight = '90%';
}
if(window.console&&window.console.log) {
console.log('fWidth #'+index+': '+fWidth);
console.log('fHeight #'+index+': '+fHeight);
}
$(this).fancybox({
'titlePosition' : 'inside',
'type' : 'iframe',
'autoScale' : true,
'padding' : '10',
'width' : fWidth,
'height' : fHeight,
'centerOnScroll' : true
});
});
}
});
})(jQuery);
Чтобы использовать это, вы бы использовали следующее:
<a href="http://player.vimeo.com/video/16429685?color=ffffff&width=800&height=450" class="fancybox-iframe" title="Citizen Schools 101">Inline Vimeo Video</a>
Надеюсь, это кому -то поможет!
Оберните изображение в Div (если оно встроено) или на странице, если вы используете нагрузку AJAX. Затем установите стиль на Div на ширину ваших iframs и установите атрибут переполнения CSS на переполнение: прокрутка;