Я нашел 2 замечательных плагина jquery в «Magnific Popup» и специальную функцию стапеля «Adaptive Thumbnail Pile Effect с автоматической группировкой», и я подумал, что с обоими вместе я мог бы сделать довольно крутое (отзывчивое) портфолио с изменением размера лайтбокса.
Но, к сожалению, они не работают вместе, как я ожидал, как вы можете увидеть здесь.
Когда вы нажимаете на верхнюю картинку и открываете одну из двух появившихся, она будет отображаться в лайтбоксе, но без кнопки закрытия и заголовка под изображением. Таким образом, вы должны вернуться с помощью кнопки «браузер-назад» (не очень хорошо).
Когда вы нажимаете на одну из маленьких картинок внизу «без функции стапеля», картинка открывается с помощью кнопки закрытия и заголовка из «великолепного всплывающего окна». Так что здесь великолепное всплывающее окно работает нормально. Теперь я не понял, почему кнопка закрытия/заголовок magnific-popup не появляется с фотографиями функции сшивания вверху.
Поскольку я не профессионал JS, я могу только догадываться, что между двумя js-скриптами может быть конфликт, поэтому я попытался добавить "jQuery.noConflict();" но это было просто предположение, и это не решило проблему.
Надеюсь, у кого-то есть идея.
Это материал JS в заголовке HTML:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Modernizr -->
<script src="js/modernizr.custom.63321.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- external Stapel JS file -->
<script type="text/javascript" src="js/jquery.stapel.js"></script>
<!-- internal Stapel JS -->
<script type="text/javascript">
jQuery.noConflict();
$(function() {
var $grid = $( '#tp-grid' ),
$name = $( '#name' ),
$close = $( '#close' ),
$loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
stapel = $grid.stapel( {
onLoad : function() {
$loader.remove();
},
onBeforeOpen : function( pileName ) {
$name.html( pileName );
},
onAfterOpen : function( pileName ) {
$close.show();
}
} );
$close.on( 'click', function() {
$close.hide();
$name.empty();
stapel.closePile();
} );
} );
</script>
Это JS для magnific-popup перед закрытием тега body:
<script type="text/javascript">
$(document).ready(function() {
$('.popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
Magnific-popup вызывается class="popup" в ссылках (здесь отлично работает):
<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75">
</a>
<a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" title="Der Titel"> <img src="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" height="75" width="75"></a>
..и с этими картинками это не работает:
<ul id="tp-grid" class="tp-grid">
<li data-pile="Logo">
<a class="popup" href="http://www.marvin-online.de/test/images/print/large/visitenkartendesign-erbengemeinschaft.jpg">
<span class="tp-info"><span>Logo 1</span></span>
<img src="http://www.marvin-online.de/test/images/print/thumbs/visitenkartendesign-erbengemeinschaft.jpg" />
</a>
</li>
<li data-pile="Logo">
<a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg">
<span class="tp-info"><span>Logo 2</span></span>
<img src="http://www.marvin-online.de/test/images/print/thumbs/logo-safework-1.jpg" />
</a>
</li>
</ul>