无法在JS灯箱中更改布局
更新： https ： //jsfiddle.net/ymLd152e/
它不是100％干净地工作（不得不修改一些东西），但我认为它足以进行演示。
我找到了一个免费的javascript灯箱，并将其集成到我的网页中。 打开图像时看起来像这样：
几天后，我正试图将图片计数器和图像下的X移动到捕获所在的同一行。 但我在JS方面还不够好。
lighbox的HTML布局由JS和JQuery完成。 我找到了变量，但是当我将值从appendTo（包装器）更改为appendTo（图像）时 ，元素就会消失 – 在浏览器和检查器（FireBug）中显示的HTML中。
任何人都可以帮我弄清楚我在这里缺少什么吗？ 正如我所说，我已经研究了几天的剧本，并且理解了很多东西，但解决方案仍然是我。
这是脚本（对不起，如果它有点长 – 我只需要在正确的方向上轻推）：
/* 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 = $('').addClass('sl-overlay'), closeBtn = $('