blueimp / Bootstrap-Image-Gallery扩展错误：this.container.children不是函数

Question

我需要你的帮助。

我有一个使用灯箱的WORKING blueimp画廊。我想添加此处显示的扩展名： https://blueimp.github.io/Bootstrap-Image-Gallery/

想法是在点击缩略图（图像周围的白色模态）时实现额外的设计。

由于blueimp画廊已经在工作，对我来说应该是一个简单的改变，但是我收到了一个错误。这出现在萤火虫上：

TypeError: this.container.children is not a function
http://www.smile-fnd/js/blueimp-gallery/bootstrap-image-gallery.min.js
Line 1

...)return d.call(this,a,b,c);var e=this,f=this.container.children(".modal"),g=f.cl...

具体而言，错误发生在f=this.container....

我相信我已经按照文档进行操作，所以我不明白为什么会失败。 请再次注意，blueimp图库在没有扩展名的情况下工作正常。如果我注释掉包含bootstrap-image-gallery.min.js一切都很好，但当然没有我想要的设计。

以下是我的代码的一部分：

<!-- Include the Gallery stylesheet in the head section of your webpage -->
<?php 
    //CAKEPHP - The links are fine
    echo $this->Html->css('bootstrap/bootstrap.min');
	echo $this->Html->css('blueimp-gallery/css/blueimp-gallery.min');
	echo $this->Html->css('blueimp-gallery/css/bootstrap-image-gallery.min');

    echo $this->Html->script('jquery/jquery-2.1.3.min.js');
	echo $this->Html->script('jquery/jquery-migrate-1.2.1.min.js');
	//Bootstrap
	echo $this->Html->script('bootstrap/bootstrap.min');
?>

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Collapsible Panel for the Images -->
<div class="panel-group" id="accordion" style="margin: 50px 0px 20px 0px;">
	<div class="panel panel-default">
			<div class="panel-heading arrowIcon">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="form-step"> <!-- collapsed -->
						Photos 
						<?php if($count >= GLOBAL_MAX_IMAGES) { ?>
						<small class="text-danger"> - Maximum number of uploaded images reached!</small>
						<?php } ?>
					</a>
				</h4>
			</div>
			<div id="collapseOne" class="panel-collapse collapse in"> <!-- remove "in" to collapse -->
			<div class="panel-body">
				
				<!-- Create a list of links to image files, optionally with enclosed thumbnails and add them to the body of your webpage, before including the Gallery script: -->
				<div id="galleryLinks">
				<?php
					if (file_exists(WWW_ROOT.$path)) {
						//Scan Given Directory for Images
						$first_exam_dir = new Folder(WWW_ROOT.$path);
						$images = $first_exam_dir->find('.*\.(jpg|jpeg|png|gif)');
			
						if(!empty($images)) {
							foreach($images as $file) {
								//Exclude Thumbnails
								if( preg_match('#^(?!'.GLOBAL_THUMB_SUFFIX.').#', $file) ) {
									//Generate Gallery Links
									echo '<a href="'.$this->webroot.$path.$file.'" title="'.$file.'" data-gallery>';
									//If Thumbnail exists
									if( file_exists($path.GLOBAL_THUMB_SUFFIX.$file) ) { 
										echo '<img style="margin-bottom: 5px; margin-right:5px;" class="img-thumbnail" src="'.$this->webroot.$path.GLOBAL_THUMB_SUFFIX.$file.'" alt="'.$file.'">';
									}
									else {
										echo $file;
									}
									echo '</a>';
								}
							}
						}
					}
					else {
						echo '<span class="text-danger">WARNING! The directory for images does not exist!'
						.'<br />Please edit this record once before you upload any images (Just click Edit -> Save). By doing so the directory will be created automatically.</span>';
					}
				?>
				</div>
				
			</div>
		</div>
	</div>
</div>

<!-- Include the Gallery script at the bottom of the body of your webpage: -->
<?php 
    //CAKEPHP - the links are fine
	echo $this->Html->script('blueimp-gallery/blueimp-gallery.min');
	echo $this->Html->script('blueimp-gallery/bootstrap-image-gallery.min');
?>

<!-- Add the following JavaScript code after including the Gallery script, to display the images in the Gallery lightbox on click of the links: -->
<script>
$(document).ready(function () {
	
	document.getElementById('galleryLinks').onclick = function (event) {
		event = event || window.event;
		target = event.target || event.srcElement,
		link = target.src ? target.parentNode : target,
		options = {index: link, event: event},
		links = this.getElementsByTagName('a');
		blueimp.Gallery(links, options);
	};
  });
	

这里也是截图！

Answer 1

编辑JS文件并尝试下一个更改：

this.container

通过

$(this.container)

或

jQuery(this.container)

Answer 2

我遇到了同样的问题。修复很容易使用：

blueimp-gallery/jquery.blueimp-gallery.min.js

而不是：

blueimp-gallery/blueimp-gallery.min.js

可能的原因：如果你在项目中使用jQuery，你也应该使用这个插件的jQuery版本。

Answer 3

有同样的问题。 您可以通过更改

来解决

this.container.children

通过

this.container.find

然后你会在

上看到一个新错误

f.clone

所以改变它

$(f).clone

它对我有用！