Javascript Can'；不要更改JS lightbox中的布局
更新：Javascript Can'；不要更改JS lightbox中的布局,javascript,jquery,Javascript,Jquery,更新： 它不能100%干净地工作（必须修改一些东西），但我认为它足够好，可以演示 我找到了一个免费的javascript lightbox，并将其集成到我的网页中。当图像打开时，看起来是这样的： 几天来，我一直试图将图片计数器和图像下的X移动到拍摄的同一行。但是我的JS不够好 lighbox的HTML布局由JS和JQuery完成。我已经找到了变量，但是当我将值从appendTo（包装器）更改为appendTo（图像）时，元素就消失了——在浏览器和检查器（FireBug）中显示的HTML中 有
它不能100%干净地工作（必须修改一些东西），但我认为它足够好，可以演示
我找到了一个免费的javascript lightbox，并将其集成到我的网页中。当图像打开时，看起来是这样的： 几天来，我一直试图将图片计数器和图像下的X移动到拍摄的同一行。但是我的JS不够好 lighbox的HTML布局由JS和JQuery完成。我已经找到了变量，但是当我将值从appendTo（包装器）更改为appendTo（图像）时，元素就消失了——在浏览器和检查器（FireBug）中显示的HTML中 有谁能帮我弄个线索，看看我遗漏了什么？正如我所说的，我已经研究了几天的脚本，了解了很多东西，但解决方案仍然没有找到 这是脚本（抱歉，如果有点长-我只需要朝正确的方向轻推一下）：
/*
安德烈·里纳斯，www.andreknierim.de
可根据麻省理工学院许可证使用
*/
;
（函数（$，窗口，文档，未定义）{
"严格使用",；
$.fn.simpleLightbox=函数（选项）{
变量选项=$.extend({
对,，
斯宾纳：没错，
导航：是的，
导航文本：['&lsaquo；'，'&rsaquo；']，
标题：对，
字幕延迟：0，
字幕选择者：“img”，
字幕类型：“attr”，
标题数据：“标题”，
标题位置：'外部'，
接近：是的，
closeText:“×”，
swipeClose:没错，
展台：是的，
fileExt:false，
动画幻灯片：没错，
动画速度：100，
预加载：正确，
启用键盘：正确，
循环：false，
雷尔：错，
docClose:是的，
泳衣耐洗度：50，
类名：“简单灯箱”，
宽度比：0.85，
高度比：0.9，
禁用右键单击：false，
disableScroll:正确，
alertError:true，
alertErrorMessage:'未找到图像，将加载下一个图像'，
additionalHtml:false，
历史：真的
}，选项）；
//全局变量
var touchDevice=（“窗口中的”ontouchstart“），
pointerEnabled=window.navigator.pointerEnabled | | window.navigator.msPointerEnabled，
触摸=功能（事件）{
如果（触摸设备）返回true；
如果（！pointerEnabled | | typeof event=='undefined'| | typeof event.pointerType=='undefined'）返回false；
if（typeof event.MSPOINTER\u TYPE\u MOUSE！=“未定义”）{
if（event.MSPOINTER\u TYPE\u MOUSE！=event.pointerType）返回true；
}否则{
if（event.pointerType！=“mouse”）返回true；
}
返回false；
},
swipeDiff=0，
swipeYDiff=0，
curImg=$（），
transPrefix=函数（）{
var s=document.body | | document.documentElement；
s=s.风格；
如果（s.WebkitTransition==''）返回“-webkit-”；
if（s.MozTransition==''）返回'-moz-'；
如果（s.OTransition==''）返回'-o-'；
如果（s.transition==''）返回“”；
返回false；
},
打开=错误，
已加载=[]，
getRelated=函数（rel，jqObj）{
var$related=$（jqObj.selector）.filter（函数（）{
返回（$（this.attr（'rel'）==rel）；
});
返回$related；
},
objects=（options.rel&&options.rel！==false）？getRelated（options.rel，this）：this，
transPrefix=transPrefix（），
globalScrollbarwidth=0，
CanTransmissions=（transPrefix！==假）？真：假，
supportsPushState=（“pushState”在历史记录中），
historyhasChanged=错误，
historyUpdateTimeout，
winLoc=窗口位置，
getHash=函数（）{
返回winLoc.hash.substring（1）；
},
initialHash=getHash（），
updateHash=函数（）{
var hash=getHash（），
newHash='pid='+（索引+1）；
var newURL=winLoc.href.split（'#'）[0]+'#'+newHash；
如果（supportsPushState）{
历史记录[historyhasChanged？'replaceState'：'pushState']（''，document.title，newURL）；
}否则{
如果（历史已更改）{
winLoc.replace（newURL）；
}否则{
winLoc.hash=newHash；
}
}
historyhasChanged=真；
},
resetHash=函数（）{
如果（supportsPushState）{
history.pushState（“”，document.title，winLoc.pathname+winLoc.search）；
}否则{
winLoc.hash=''；
}
clearTimeout（historyUpdateTimeout）；
},
updateURL=函数（）{
如果（！historyhasChanged）{
updateHash（）；//第一次
}否则{
historyUpdateTimeout=setTimeout（updateHash，800）；
}
},
前缀='simpleb'，
overlay=$（''）.addClass（'sl-overlay'），
closeBtn=$（''）.addClass（'sl-close'）.html（options.closeText），
微调器=$（''）.addClass（'sl-spinner'）.html（''），
nav=$（''）.addClass（'sl-navigation'）.html（''+options.navText[0]+''+options.navText[1]+''），
计数器=$（''）.addClass（'sl-
/*
By André Rinas, www.andreknieriem.de
Available for use under the MIT License
*/
;
(function($, window, document, undefined) {
'use strict';
$.fn.simpleLightbox = function(options) {
var options = $.extend({
overlay: true,
spinner: true,
nav: true,
navText: ['‹', '›'],
captions: true,
captionDelay: 0,
captionSelector: 'img',
captionType: 'attr',
captionsData: 'title',
captionPosition: 'outside',
close: true,
closeText: '×',
swipeClose: true,
showCounter: true,
fileExt: false,
animationSlide: true,
animationSpeed: 100,
preloading: true,
enableKeyboard: true,
loop: false,
rel: false,
docClose: true,
swipeTolerance: 50,
className: 'simple-lightbox',
widthRatio: 0.85,
heightRatio: 0.9,
disableRightClick: false,
disableScroll: true,
alertError: true,
alertErrorMessage: 'Image not found, next image will be loaded',
additionalHtml: false,
history: true
}, options);
// global variables
var touchDevice = ('ontouchstart' in window),
pointerEnabled = window.navigator.pointerEnabled || window.navigator.msPointerEnabled,
touched = function(event) {
if (touchDevice) return true;
if (!pointerEnabled || typeof event === 'undefined' || typeof event.pointerType === 'undefined') return false;
if (typeof event.MSPOINTER_TYPE_MOUSE !== 'undefined') {
if (event.MSPOINTER_TYPE_MOUSE != event.pointerType) return true;
} else {
if (event.pointerType != 'mouse') return true;
}
return false;
},
swipeDiff = 0,
swipeYDiff = 0,
curImg = $(),
transPrefix = function() {
var s = document.body || document.documentElement;
s = s.style;
if (s.WebkitTransition === '') return '-webkit-';
if (s.MozTransition === '') return '-moz-';
if (s.OTransition === '') return '-o-';
if (s.transition === '') return '';
return false;
},
opened = false,
loaded = [],
getRelated = function(rel, jqObj) {
var $related = $(jqObj.selector).filter(function() {
return ($(this).attr('rel') === rel);
});
return $related;
},
objects = (options.rel && options.rel !== false) ? getRelated(options.rel, this) : this,
transPrefix = transPrefix(),
globalScrollbarwidth = 0,
canTransisions = (transPrefix !== false) ? true : false,
supportsPushState = ('pushState' in history),
historyhasChanged = false,
historyUpdateTimeout,
winLoc = window.location,
getHash = function() {
return winLoc.hash.substring(1);
},
initialHash = getHash(),
updateHash = function() {
var hash = getHash(),
newHash = 'pid=' + (index + 1);
var newURL = winLoc.href.split('#')[0] + '#' + newHash;
if (supportsPushState) {
history[historyhasChanged ? 'replaceState' : 'pushState']('', document.title, newURL);
} else {
if (historyhasChanged) {
winLoc.replace(newURL);
} else {
winLoc.hash = newHash;
}
}
historyhasChanged = true;
},
resetHash = function() {
if (supportsPushState) {
history.pushState('', document.title, winLoc.pathname + winLoc.search);
} else {
winLoc.hash = '';
}
clearTimeout(historyUpdateTimeout);
},
updateURL = function() {
if (!historyhasChanged) {
updateHash(); // first time
} else {
historyUpdateTimeout = setTimeout(updateHash, 800);
}
},
prefix = 'simplelb',
overlay = $('<div>').addClass('sl-overlay'),
closeBtn = $('<button>').addClass('sl-close').html(options.closeText),
spinner = $('<div>').addClass('sl-spinner').html('<div></div>'),
nav = $('<div>').addClass('sl-navigation').html('<button class="sl-prev">' + options.navText[0] + '</button><button class="sl-next">' + options.navText[1] + '</button>'),
counter = $('<div>').addClass('sl-counter').html('<span class="sl-current"></span>/<span class="sl-total"></span>'),
animating = false,
index = 0,
caption = $('<div>').addClass('sl-caption pos-' + options.captionPosition),
image = $('<div>').addClass('sl-image'),
wrapper = $('<div>').addClass('sl-wrapper').addClass(options.className),
isValidLink = function(element) {
if (!options.fileExt) return true;
return $(element).prop('tagName').toLowerCase() == 'a' && (new RegExp('\.(' + options.fileExt + ')$', 'i')).test($(element).attr('href'));
},
setup = function() {
if (options.close) closeBtn.appendTo(wrapper);
if (options.showCounter) {
if (objects.length > 1) {
counter.appendTo(wrapper);
counter.find('.sl-total').text(objects.length);
}
}
if (options.nav) nav.appendTo(wrapper);
if (options.spinner) spinner.appendTo(wrapper);
},
openImage = function(elem) {
elem.trigger($.Event('show.simplelightbox'));
if (options.disableScroll) globalScrollbarwidth = handleScrollbar('hide');
wrapper.appendTo('body');
image.appendTo(wrapper);
if (options.overlay) overlay.appendTo($('body'));
animating = true;
index = objects.index(elem);
curImg = $('<img/>')
.hide()
.attr('src', elem.attr('href'));
if (loaded.indexOf(elem.attr('href')) == -1) {
loaded.push(elem.attr('href'));
}
image.html('').attr('style', '');
curImg.appendTo(image);
addEvents();
overlay.fadeIn('fast');
$('.sl-close').fadeIn('fast');
spinner.show();
nav.fadeIn('fast');
$('.sl-wrapper .sl-counter .sl-current').text(index + 1);
counter.fadeIn('fast');
adjustImage();
if (options.preloading) preload();
setTimeout(function() {
elem.trigger($.Event('shown.simplelightbox'));
}, options.animationSpeed);
},
adjustImage = function(dir) {
if (!curImg.length) return;
var tmpImage = new Image(),
windowWidth = $(window).width() * options.widthRatio,
windowHeight = $(window).height() * options.heightRatio;
tmpImage.src = curImg.attr('src');
$(tmpImage).bind('error', function(ev) {
//no image was found
objects.eq(index).trigger($.Event('error.simplelightbox'));
animating = false;
opened = true;
spinner.hide();
if (options.alertError) {
alert(options.alertErrorMessage);
}
if (dir == 1 || dir == -1) {
loadImage(dir);
} else {
loadImage(1);
}
return;
});
tmpImage.onload = function() {
if (typeof dir !== 'undefined') {
objects.eq(index)
.trigger($.Event('changed.simplelightbox'))
.trigger($.Event((dir === 1 ? 'nextDone' : 'prevDone') + '.simplelightbox'));
}
// history
if (options.history) {
updateURL();
}
if (loaded.indexOf(curImg.attr('src')) == -1) {
loaded.push(curImg.attr('src'));
}
var imageWidth = tmpImage.width,
imageHeight = tmpImage.height;
if (imageWidth > windowWidth || imageHeight > windowHeight) {
var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight;
imageWidth /= ratio;
imageHeight /= ratio;
}
$('.sl-image').css({
'top': ($(window).height() - imageHeight) / 2 + 'px',
'left': ($(window).width() - imageWidth - globalScrollbarwidth) / 2 + 'px'
});
spinner.hide();
curImg
.css({
'width': imageWidth + 'px',
'height': imageHeight + 'px'
})
.fadeIn('fast');
opened = true;
var cSel = (options.captionSelector == 'self') ? objects.eq(index) : objects.eq(index).find(options.captionSelector);
var captionText;
if (options.captionType == 'data') {
captionText = cSel.data(options.captionsData);
} else if (options.captionType == 'text') {
captionText = cSel.html();
} else {
captionText = cSel.prop(options.captionsData);
}
if (!options.loop) {
if (index === 0) {
$('.sl-prev').hide();
}
if (index >= objects.length - 1) {
$('.sl-next').hide();
}
if (index > 0) {
$('.sl-prev').show();
}
if (index < objects.length - 1) {
$('.sl-next').show();
}
}
if (objects.length == 1) $('.sl-prev, .sl-next').hide();
if (dir == 1 || dir == -1) {
var css = {
'opacity': 1.0
};
if (options.animationSlide) {
if (canTransisions) {
slide(0, 100 * dir + 'px');
setTimeout(function() {
slide(options.animationSpeed / 1000, 0 + 'px'), 50
});
} else {
css.left = parseInt($('.sl-image').css('left')) + 100 * dir + 'px';
}
}
$('.sl-image').animate(css, options.animationSpeed, function() {
animating = false;
setCaption(captionText);
});
} else {
animating = false;
setCaption(captionText);
}
if (options.additionalHtml && $('.sl-additional-html').length === 0) {
$('<div>').html(options.additionalHtml).addClass('sl-additional-html').appendTo($('.sl-image'));
}
};
},
setCaption = function(captiontext) {
if (captiontext !== '' && typeof captiontext !== "undefined" && options.captions) {
caption.html(captiontext).hide().appendTo($('.sl-image')).delay(options.captionDelay).fadeIn('fast');
}
},
slide = function(speed, pos) {
var styles = {};
styles[transPrefix + 'transform'] = 'translateX(' + pos + ')';
styles[transPrefix + 'transition'] = transPrefix + 'transform ' + speed + 's linear';
$('.sl-image').css(styles);
},
addEvents = function() {
// resize/responsive
$(window).on('resize.' + prefix, adjustImage);
// close lightbox on close btn
$(document).on('click.' + prefix + ' touchstart.' + prefix, '.sl-close', function(e) {
e.preventDefault();
if (opened) {
close();
}
});
if (options.history) {
setTimeout(function() {
$(window).on('hashchange.' + prefix, function() {
if (opened) {
if (getHash() === initialHash) {
close();
return;
}
}
});
}, 40);
}
// nav-buttons
nav.on('click.' + prefix, 'button', function(e) {
e.preventDefault();
swipeDiff = 0;
loadImage($(this).hasClass('sl-next') ? 1 : -1);
});
// touchcontrols
var swipeStart = 0,
swipeEnd = 0,
swipeYStart = 0,
swipeYEnd = 0,
mousedown = false,
imageLeft = 0;
image
.on('touchstart.' + prefix + ' mousedown.' + prefix, function(e) {
if (mousedown) return true;
if (canTransisions) imageLeft = parseInt(image.css('left'));
mousedown = true;
swipeStart = e.originalEvent.pageX || e.originalEvent.touches[0].pageX;
swipeYStart = e.originalEvent.pageY || e.originalEvent.touches[0].pageY;
return false;
})
.on('touchmove.' + prefix + ' mousemove.' + prefix + ' pointermove MSPointerMove', function(e) {
if (!mousedown) return true;
e.preventDefault();
swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[0].pageX;
swipeYEnd = e.originalEvent.pageY || e.originalEvent.touches[0].pageY;
swipeDiff = swipeStart - swipeEnd;
swipeYDiff = swipeYStart - swipeYEnd;
if (options.animationSlide) {
if (canTransisions) slide(0, -swipeDiff + 'px');
else image.css('left', imageLeft - swipeDiff + 'px');
}
})
.on('touchend.' + prefix + ' mouseup.' + prefix + ' touchcancel.' + prefix + ' mouseleave.' + prefix + ' pointerup pointercancel MSPointerUp MSPointerCancel', function(e) {
if (mousedown) {
mousedown = false;
var possibleDir = true;
if (!options.loop) {
if (index === 0 && swipeDiff < 0) {
possibleDir = false;
}
if (index >= objects.length - 1 && swipeDiff > 0) {
possibleDir = false;
}
}
if (Math.abs(swipeDiff) > options.swipeTolerance && possibleDir) {
loadImage(swipeDiff > 0 ? 1 : -1);
} else if (options.animationSlide) {
if (canTransisions) slide(options.animationSpeed / 1000, 0 + 'px');
else image.animate({
'left': imageLeft + 'px'
}, options.animationSpeed / 2);
}
if (options.swipeClose && Math.abs(swipeYDiff) > 50 && Math.abs(swipeDiff) < options.swipeTolerance) {
close();
}
}
});
},
removeEvents = function() {
nav.off('click', 'button');
$(document).off('click.' + prefix, '.sl-close');
$(window).off('resize.' + prefix);
$(window).off('hashchange.' + prefix);
},
preload = function() {
var next = (index + 1 < 0) ? objects.length - 1 : (index + 1 >= objects.length - 1) ? 0 : index + 1,
prev = (index - 1 < 0) ? objects.length - 1 : (index - 1 >= objects.length - 1) ? 0 : index - 1;
$('<img />').attr('src', objects.eq(next).attr('href')).on('load', function() {
if (loaded.indexOf($(this).attr('src')) == -1) {
loaded.push($(this).attr('src'));
}
objects.eq(index).trigger($.Event('nextImageLoaded.simplelightbox'));
});
$('<img />').attr('src', objects.eq(prev).attr('href')).on('load', function() {
if (loaded.indexOf($(this).attr('src')) == -1) {
loaded.push($(this).attr('src'));
}
objects.eq(index).trigger($.Event('prevImageLoaded.simplelightbox'));
});
},
loadImage = function(dir) {
objects.eq(index)
.trigger($.Event('change.simplelightbox'))
.trigger($.Event((dir === 1 ? 'next' : 'prev') + '.simplelightbox'));
var newIndex = index + dir;
if (animating || (newIndex < 0 || newIndex >= objects.length) && options.loop === false) return;
index = (newIndex < 0) ? objects.length - 1 : (newIndex > objects.length - 1) ? 0 : newIndex;
$('.sl-wrapper .sl-counter .sl-current').text(index + 1);
var css = {
'opacity': 0
};
if (options.animationSlide) {
if (canTransisions) slide(options.animationSpeed / 1000, (-100 * dir) - swipeDiff + 'px');
else css.left = parseInt($('.sl-image').css('left')) + -100 * dir + 'px';
}
$('.sl-image').animate(css, options.animationSpeed, function() {
setTimeout(function() {
// fadeout old image
var elem = objects.eq(index);
curImg
.attr('src', elem.attr('href'));
if (loaded.indexOf(elem.attr('href')) == -1) {
spinner.show();
}
$('.sl-caption').remove();
adjustImage(dir);
if (options.preloading) preload();
}, 100);
});
},
close = function() {
if (animating) return;
var elem = objects.eq(index),
triggered = false;
elem.trigger($.Event('close.simplelightbox'));
if (options.history) {
resetHash();
}
$('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter').fadeOut('fast', function() {
if (options.disableScroll) handleScrollbar('show');
$('.sl-wrapper, .sl-overlay').remove();
removeEvents();
if (!triggered) elem.trigger($.Event('closed.simplelightbox'));
triggered = true;
});
curImg = $();
opened = false;
animating = false;
},
handleScrollbar = function(type) {
var scrollbarWidth = 0;
if (type == 'hide') {
var fullWindowWidth = window.innerWidth;
if (!fullWindowWidth) {
var documentElementRect = document.documentElement.getBoundingClientRect();
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
}
if (document.body.clientWidth < fullWindowWidth) {
var scrollDiv = document.createElement('div'),
padding = parseInt($('body').css('padding-right'), 10);
scrollDiv.className = 'sl-scrollbar-measure';
$('body').append(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
$(document.body)[0].removeChild(scrollDiv);
$('body').data('padding', padding);
if (scrollbarWidth > 0) {
$('body').addClass('hidden-scroll').css({
'padding-right': padding + scrollbarWidth
});
}
}
} else {
$('body').removeClass('hidden-scroll').css({
'padding-right': $('body').data('padding')
});
}
return scrollbarWidth;
};
// events
setup();
// open lightbox
objects.on('click.' + prefix, function(e) {
if (isValidLink(this)) {
e.preventDefault();
if (animating) return false;
openImage($(this));
}
});
// close on click on doc
$(document).on('click.' + prefix + ' touchstart.' + prefix, function(e) {
if (opened) {
if ((options.docClose && $(e.target).closest('.sl-image').length === 0 && $(e.target).closest('.sl-navigation').length === 0)) {
close();
}
}
});
// disable rightclick
if (options.disableRightClick) {
$(document).on('contextmenu', '.sl-image img', function(e) {
return false;
});
}
// keyboard-control
if (options.enableKeyboard) {
$(document).on('keyup.' + prefix, function(e) {
e.preventDefault();
swipeDiff = 0;
// keyboard control only if lightbox is open
if (opened) {
var key = e.keyCode;
if (key == 27) {
close();
}
if (key == 37 || e.keyCode == 39) {
loadImage(e.keyCode == 39 ? 1 : -1);
}
}
});
}
// Public methods
this.open = function(elem) {
elem = elem || $(this[0]);
openImage(elem);
};
this.next = function() {
loadImage(1);
};
this.prev = function() {
loadImage(-1);
};
this.close = function() {
close();
};
this.destroy = function() {
$(document).unbind('click.' + prefix).unbind('keyup.' + prefix);
close();
$('.sl-overlay, .sl-wrapper').remove();
this.off('click');
};
this.refresh = function() {
this.destroy();
$(this.selector).simpleLightbox(options);
};
return this;
};
})(jQuery, window, document);
/* line 54, ../sass/simplelightbox.scss */
.sl-wrapper .sl-close {
display: none;
position: fixed;
right: 30px;
bottom: 30px;
z-index: 1015;
margin-top: -14px;
margin-right: -14px;
height: 44px;
width: 44px;
line-height: 44px;
font-family: Arial, Baskerville, monospace;
color: rgb(218,218,218);
font-size: 2.6rem;
}
/* line 70, ../sass/simplelightbox.scss */
.sl-wrapper .sl-counter {
display: none;
position: fixed;
bottom: 30px;
left: 30px;
z-index: 1015;
color: rgb(222,222,222);
font-size: 0.9rem;
}