2017-03-21 9 views
0

の次のページのエキスパンダーを隠します)、コードはここで動作していません:(私は2つの異なるスクリプトからコードを組み合わせたカルーセル

基本的に私の問題は、次のページへの "次へ"ボタンをクリックするとエキスパンダーが閉じることができないことです。問題。

私が望むのは、カルーセルの次のページにスクロールするときに、エキスパンダー/イメージプレビューが自動的に閉じるということです。私の説明が十分明確でないかどうか聞いて、あなたのうちの何人かが私に助言を提供できることを願ってください。ありがとう!

(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; } 
 
\t \t \t 
 
    .carousel-tabs { clear: both; } 
 
    .carousel-active-tab { color: red; } \t 
 
    .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"> 
 
\t \t <ul class="slidecontrols"> 
 
\t \t \t <li><a href="#sliderName" class="next">Next</a></li> 
 
\t \t \t <li><a href="#sliderName" class="prev">Prev</a></li> 
 
\t \t \t 
 
\t \t </ul> 
 
\t \t 
 
\t \t <ul class="slider" id="sliderName"> 
 
\t \t \t <li class="slide"> \t 
 
\t \t \t \t <ul class="gallery-items" style="width: 980px; margin: 0 auto;"> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li class="slide"> \t 
 
\t \t \t \t <ul class="gallery-items" style="width: 980px; margin: 0 auto;"> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div>

答えて

1

ない世界で最高の修正が、それは動作します。 next/prevがクリックされた場合は、「閉じる」ボタンをクリックしてください。 私はあなたに役立つことを願っています。

(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; } 
 
\t \t \t 
 
    .carousel-tabs { clear: both; } 
 
    .carousel-active-tab { color: red; } \t 
 
    .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"> 
 
\t \t <ul class="slidecontrols"> 
 
\t \t \t <li><a href="#sliderName" class="next" >Next</a></li> 
 
\t \t \t <li><a href="#sliderName" class="prev">Prev</a></li> 
 
\t \t \t 
 
\t \t </ul> 
 
\t \t 
 
\t \t <ul class="slider" id="sliderName"> 
 
\t \t \t <li class="slide"> \t 
 
\t \t \t \t <ul class="gallery-items" style="width: 980px; margin: 0 auto;"> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li class="slide"> \t 
 
\t \t \t \t <ul class="gallery-items" style="width: 980px; margin: 0 auto;"> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="gallery-item"> 
 
\t \t \t \t \t <div class="gallery-contents"> 
 
\t \t \t \t \t <div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="gallery-expander"> 
 
\t \t \t \t \t <div class="gallery-expander-contents"> 
 
\t \t \t \t \t \t <div class="gallery-trigger-close close">x</div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col"> 
 
\t \t \t \t \t \t <div class="title">Gallery Item</div> 
 
\t \t \t \t \t \t <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t \t \t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t \t \t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t \t \t \t \t \t \t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t \t \t \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t \t \t \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div>

+1

クール!少なくともあなたは私の問題を解決した、私はそれを行うこの方法について考えなければならない。どうもありがとうございます :) – Eelyn

関連する問題