Как удалить заголовок или описание, Если пусто в jQuery Cycle2 Caption
В моем слайд-шоу некоторые слайды без подписей, но стиль, который я добавил, заставляет заголовки и описания появляться без текста, и, очевидно, это кажется странным.
Как я могу сделать плагин Caption, Чтобы не показывать заголовок / описание, если не найдено текста?
Вот код:
<div class="cs" data-cycle-caption-plugin=caption2>
<div class="cycle-overlay"></div>
<img src="images/bg.jpg" >
<img src="images/i1.jpg" data-cycle-title="Winter" data-cycle-desc="Awesome!!!" >
<img src="images/i2.jpg" >
</div>
А вот код JS:
$('.cs').cycle({
speed: 600,
manualSpeed: 6000
});
Я пошел дальше и отредактировал caption plugin for Cycle2; version: 20130306 и просто добавил этот код класса class="cap_title" в следующую строку:
overlayTemplate: '<div class="cap_title">{{title}}</div><div>{{desc}}</div>',
Тогда я попытался спрятаться. этот ".цикл-наложение", используя следующие события, но не удалось:
$( '.cs' ).on( 'cycle-next', function( event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
if($('.cap_title').html()==''){
$('.cap_title').hide();
$('.cycle-overlay').hide();
} else {
$('.cap_title').show();
}
});
2 ответов:
Фокус в том, что я изменяю шаблон на лету. Если title или description Не задано-шаблон устанавливается пустым".
$('.slideshow').cycle({ speed: 600, manualSpeed: 6000, }).on('cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) { if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title')) { slideOptionsHash.overlayTemplate = ''; } else { slideOptionsHash.overlayTemplate = '<div>{{title}}</div><div>{{desc}}</div>'; } });
Спасибо тебе, Кшиштоф! Это сработало и для меня тоже.
Полезное замечание для других: код Кшиштофа скроет наложение для всех слайдов, которые отсутствуютлибо заголовокили описание. Это сначала сбило меня с толку, потому что у меня было несколько слайдов с названием, но без описания. Я хотел, чтобы заголовки на этих слайдах отображались, а не скрывались. Чтобы получить этот результат, все, что мне нужно было сделать, это изменить "или" в операторе " if " на "и":
Оригинал Версия:
if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title'))Модификация:
Примечание: это действительно комментарий к ответу Кшиштофа Сафьяновского, а не отдельный ответ. У меня не хватает очков репутации, чтобы оставить комментарий ... Если бы кто-то с более высоким уровнем доступа мог изменить мой ответ на комментарий, я был бы благодарен. Спасибо!if (!currentSlideEl.getAttribute('data-cycle-desc') && !currentSlideEl.getAttribute('data-cycle-title'))
Comments