在轮播的下一页隐藏扩展器
Hide the expander on the next page of carousel
我组合了两个不同脚本的代码，如下所示：
动态轮播：https://responsivedesign.is/resources/javascript-jquery/dynamic-carousel/
展开图片预览：http://www.jqueryscript.net/gallery/Thumbnail-Grid-with-Expanding-Image-Preview-Using-jQuery.html
我想实际使用此代码 (https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/)，但代码在这里不起作用:(
基本上我的问题是当我点击 "Next" 按钮进入下一页时扩展器无法关闭。您可以尝试下面的代码，您会看到我的问题所在。
所以我想要的是 expander/image 滚动到轮播的下一页时预览会自动关闭。如果我的解释不够清楚，请问，希望你们中的一些人能给我一些建议。谢谢！
(function(global, $){
$('.gallery-items').imagelistexpander({
prefix: "gallery-"
});
})(this, jQuery)
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false,
speed: 1000 // ms.
});
});
ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
.events {
font: normal 11px/1.4 arial, helvetica, sans-serif;
}
.gallery-items { font-size: 0; }
.gallery-item {
display: inline-block;
vertical-align: top;
-webkit-transition: height 500ms ease;
-o-transition: height 500ms ease;
transition: height 500ms ease;
}
.gallery-expander {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 500ms ease;
-o-transition: max-height 500ms ease;
transition: max-height 500ms ease;
}
.gallery-contents { position: relative; }
.gallery-contents:after {
display: block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
width: 0;
height: 0;
content: '';
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-style: solid;
border-bottom-width: 0px;
-webkit-transition: border-bottom-width 500ms ease;
-o-transition: border-bottom-width 500ms ease;
transition: border-bottom-width 500ms ease;
}
.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }
body {
font-family: 'Nanum Barun Gothic';
font-weight: 200;
color: #555;
}
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}
.gallery-item .thumbnail {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.gallery-item .thumbnail > img {
position: absolute;
}
.gallery-item .title {
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
}
.gallery-contents:after { border-bottom-color: #F6F3ED; }
.gallery-expander { background: #F6F3ED; }
.gallery-expander-contents {
margin: 0 auto;
width: 1000px;
padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {
.gallery-expander-contents { width: 100%; }
}
.gallery-expander-contents:after {
clear: both;
display: table;
content: '';
}
.gallery-expander-contents > div.col {
float: left;
width: 480px;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col {
float: none;
padding: 25px 20px 0;
width: auto;
}
}
.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}
.gallery-expander-contents div.close {
position: absolute;
top: 10px;
right: 20px;
}
.gallery-expander-contents div.title {
font-weight: 500;
color: #D28A3C;
}
.gallery-expander-contents div.contents {
margin-top: 10px;
border-top: 1px solid #BCB098;
border-bottom: 1px solid #BCB098;
padding: 10px 0;
font-size: 14px;
line-height: 24px;
color: #797262;
}
.gallery-expander-contents div.image > img {
width: 100%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/11407514532/jquery-imagelistexpander.js"></script>
<script src="http://yourjavascript.com/43702110263/plugin.js"></script>
<div class="slidewrap" data-autorotate="5000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next">Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
这不是世界上最好的修复方法，但它确实有效。
如果 next/prev 被点击，"click the "关闭“按钮”
希望对你有用。
(function(global, $){
$('.gallery-items').imagelistexpander({
prefix: "gallery-"
});
})(this, jQuery)
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false,
speed: 1000 // ms.
});
});
$(".next").click(function(){
$(".close").click();
});
$(".prev").click(function(){
$(".close").click();
});
ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
.events {
font: normal 11px/1.4 arial, helvetica, sans-serif;
}
.gallery-items { font-size: 0; }
.gallery-item {
display: inline-block;
vertical-align: top;
-webkit-transition: height 500ms ease;
-o-transition: height 500ms ease;
transition: height 500ms ease;
}
.gallery-expander {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 500ms ease;
-o-transition: max-height 500ms ease;
transition: max-height 500ms ease;
}
.gallery-contents { position: relative; }
.gallery-contents:after {
display: block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
width: 0;
height: 0;
content: '';
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-style: solid;
border-bottom-width: 0px;
-webkit-transition: border-bottom-width 500ms ease;
-o-transition: border-bottom-width 500ms ease;
transition: border-bottom-width 500ms ease;
}
.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }
body {
font-family: 'Nanum Barun Gothic';
font-weight: 200;
color: #555;
}
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}
.gallery-item .thumbnail {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.gallery-item .thumbnail > img {
position: absolute;
}
.gallery-item .title {
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
}
.gallery-contents:after { border-bottom-color: #F6F3ED; }
.gallery-expander { background: #F6F3ED; }
.gallery-expander-contents {
margin: 0 auto;
width: 1000px;
padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {
.gallery-expander-contents { width: 100%; }
}
.gallery-expander-contents:after {
clear: both;
display: table;
content: '';
}
.gallery-expander-contents > div.col {
float: left;
width: 480px;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col {
float: none;
padding: 25px 20px 0;
width: auto;
}
}
.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}
.gallery-expander-contents div.close {
position: absolute;
top: 10px;
right: 20px;
}
.gallery-expander-contents div.title {
font-weight: 500;
color: #D28A3C;
}
.gallery-expander-contents div.contents {
margin-top: 10px;
border-top: 1px solid #BCB098;
border-bottom: 1px solid #BCB098;
padding: 10px 0;
font-size: 14px;
line-height: 24px;
color: #797262;
}
.gallery-expander-contents div.image > img {
width: 100%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/11407514532/jquery-imagelistexpander.js"></script>
<script src="http://yourjavascript.com/43702110263/plugin.js"></script>
<div class="slidewrap" data-autorotate="5000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next" >Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
我组合了两个不同脚本的代码，如下所示：
动态轮播：https://responsivedesign.is/resources/javascript-jquery/dynamic-carousel/ 展开图片预览：http://www.jqueryscript.net/gallery/Thumbnail-Grid-with-Expanding-Image-Preview-Using-jQuery.html
我想实际使用此代码 (https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/)，但代码在这里不起作用:(
基本上我的问题是当我点击 "Next" 按钮进入下一页时扩展器无法关闭。您可以尝试下面的代码，您会看到我的问题所在。
所以我想要的是 expander/image 滚动到轮播的下一页时预览会自动关闭。如果我的解释不够清楚，请问，希望你们中的一些人能给我一些建议。谢谢！
(function(global, $){
$('.gallery-items').imagelistexpander({
prefix: "gallery-"
});
})(this, jQuery)
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false,
speed: 1000 // ms.
});
});
ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
.events {
font: normal 11px/1.4 arial, helvetica, sans-serif;
}
.gallery-items { font-size: 0; }
.gallery-item {
display: inline-block;
vertical-align: top;
-webkit-transition: height 500ms ease;
-o-transition: height 500ms ease;
transition: height 500ms ease;
}
.gallery-expander {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 500ms ease;
-o-transition: max-height 500ms ease;
transition: max-height 500ms ease;
}
.gallery-contents { position: relative; }
.gallery-contents:after {
display: block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
width: 0;
height: 0;
content: '';
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-style: solid;
border-bottom-width: 0px;
-webkit-transition: border-bottom-width 500ms ease;
-o-transition: border-bottom-width 500ms ease;
transition: border-bottom-width 500ms ease;
}
.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }
body {
font-family: 'Nanum Barun Gothic';
font-weight: 200;
color: #555;
}
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}
.gallery-item .thumbnail {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.gallery-item .thumbnail > img {
position: absolute;
}
.gallery-item .title {
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
}
.gallery-contents:after { border-bottom-color: #F6F3ED; }
.gallery-expander { background: #F6F3ED; }
.gallery-expander-contents {
margin: 0 auto;
width: 1000px;
padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {
.gallery-expander-contents { width: 100%; }
}
.gallery-expander-contents:after {
clear: both;
display: table;
content: '';
}
.gallery-expander-contents > div.col {
float: left;
width: 480px;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col {
float: none;
padding: 25px 20px 0;
width: auto;
}
}
.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}
.gallery-expander-contents div.close {
position: absolute;
top: 10px;
right: 20px;
}
.gallery-expander-contents div.title {
font-weight: 500;
color: #D28A3C;
}
.gallery-expander-contents div.contents {
margin-top: 10px;
border-top: 1px solid #BCB098;
border-bottom: 1px solid #BCB098;
padding: 10px 0;
font-size: 14px;
line-height: 24px;
color: #797262;
}
.gallery-expander-contents div.image > img {
width: 100%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/11407514532/jquery-imagelistexpander.js"></script>
<script src="http://yourjavascript.com/43702110263/plugin.js"></script>
<div class="slidewrap" data-autorotate="5000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next">Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
这不是世界上最好的修复方法，但它确实有效。 如果 next/prev 被点击，"click the "关闭“按钮” 希望对你有用。
(function(global, $){
$('.gallery-items').imagelistexpander({
prefix: "gallery-"
});
})(this, jQuery)
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false,
speed: 1000 // ms.
});
});
$(".next").click(function(){
$(".close").click();
});
$(".prev").click(function(){
$(".close").click();
});
ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
.events {
font: normal 11px/1.4 arial, helvetica, sans-serif;
}
.gallery-items { font-size: 0; }
.gallery-item {
display: inline-block;
vertical-align: top;
-webkit-transition: height 500ms ease;
-o-transition: height 500ms ease;
transition: height 500ms ease;
}
.gallery-expander {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 500ms ease;
-o-transition: max-height 500ms ease;
transition: max-height 500ms ease;
}
.gallery-contents { position: relative; }
.gallery-contents:after {
display: block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
width: 0;
height: 0;
content: '';
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-style: solid;
border-bottom-width: 0px;
-webkit-transition: border-bottom-width 500ms ease;
-o-transition: border-bottom-width 500ms ease;
transition: border-bottom-width 500ms ease;
}
.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }
body {
font-family: 'Nanum Barun Gothic';
font-weight: 200;
color: #555;
}
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}
.gallery-item .thumbnail {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.gallery-item .thumbnail > img {
position: absolute;
}
.gallery-item .title {
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
}
.gallery-contents:after { border-bottom-color: #F6F3ED; }
.gallery-expander { background: #F6F3ED; }
.gallery-expander-contents {
margin: 0 auto;
width: 1000px;
padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {
.gallery-expander-contents { width: 100%; }
}
.gallery-expander-contents:after {
clear: both;
display: table;
content: '';
}
.gallery-expander-contents > div.col {
float: left;
width: 480px;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col {
float: none;
padding: 25px 20px 0;
width: auto;
}
}
.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}
.gallery-expander-contents div.close {
position: absolute;
top: 10px;
right: 20px;
}
.gallery-expander-contents div.title {
font-weight: 500;
color: #D28A3C;
}
.gallery-expander-contents div.contents {
margin-top: 10px;
border-top: 1px solid #BCB098;
border-bottom: 1px solid #BCB098;
padding: 10px 0;
font-size: 14px;
line-height: 24px;
color: #797262;
}
.gallery-expander-contents div.image > img {
width: 100%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/11407514532/jquery-imagelistexpander.js"></script>
<script src="http://yourjavascript.com/43702110263/plugin.js"></script>
<div class="slidewrap" data-autorotate="5000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next" >Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>