/o//commerce-media/accounts/-1/images/18389687?download=true
Upcoming Events
Analytics and Optimization
Image
',
size: "full-screen",
onOpen: () => {
const modalContainer = document.querySelector('.modal-content');
if (modalContainer) {
modalContainer.classList.add('custom-gallery-modal');
}
const modalImage = document.querySelector('[data-role="modal-image"]');
const modalNext = document.querySelector('[data-role="modal-next"]');
const modalPrev = document.querySelector('[data-role="modal-prev"]');
const indexDisplay = document.getElementById('modal-index-display');
function updateModalImage(index) {
const img = images[index];
modalImage.src = img.src;
modalImage.alt = img.alt;
modalNext.disabled = index === images.length - 1;
modalPrev.disabled = index === 0;
if (indexDisplay) {
indexDisplay.textContent = (index + 1) + ' 的 ' + images.length;
}
}
modalNext.addEventListener('click', () => {
if (current < images.length - 1) {
current++;
updateModalImage(current);
}
});
modalPrev.addEventListener('click', () => {
if (current > 0) {
current--;
updateModalImage(current);
}
});
updateModalImage(current);
}
});
}
function main() {
loadImages();
setupNavigationButtons();
setupModalTriggers();
updateMainImage(0);
}
main();
})();
![]()
.carousel-container img {
cursor: pointer;
object-fit: contain;
}
.custom-gallery-modal button:disabled {
cursor: default;
opacity: 0.4;
pointer-events: none;
}
.custom-gallery-modal {
background-color: #282934 !important;
border-bottom: none;
color: white !important;
}
.custom-gallery-modal .liferay-modal-body {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.custom-gallery-modal .close {
color: white !important;
margin-right: 16px !important;
}
.lexicon-icon-overwide .lexicon-icon {
height: 2em;
margin: 0px !important;
}
.custom-gallery-modal{
height: 80% !important;
}
.main-image-wrapper {
align-items: center;
display:flex;
justify-content: center;
position: relative;
width: 902px;
height: 454px;
}
.main-image-wrapper img {
border-radius: 8px;
max-height: 100%;
}
.main-image-wrapper:hover .nav-button {
opacity: 1;
pointer-events: auto;
}
.main-image-wrapper:hover .nav-button:disabled{
cursor: default;
opacity: 0.4;
}
.modal-image {
aspect-ratio: 16/9;
object-fit: contain;;
border-radius: 8px;
max-width: 100vh !important;
}
.modal-gallery-header .lexicon-icon {
fill: #FFC124 !important;
margin-right: 8px !important;
width: 16px !important;
}
.modal-gallery-header {
padding: 16px !important;
}
.modal-prev,
.modal-next {
align-items: center;
background: rgba(105, 102, 102, 0.4) !important;
border-radius: 50%;
border: none;
display: flex;
font-size: 1.6rem;
justify-content: center;
padding: 14px !important;
position: absolute;
top: 45%;
}
.modal-prev .lexicon-icon,
.modal-next .lexicon-icon {
margin-top: 0px !important;
}
.modal-next {
right: 24px;
}
.modal-prev {
left: 24px;
}
.nav-button {
background: rgba(0,0,0,0.4);
border-radius: 50%;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
opacity: 0;
padding: 0 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease;
user-select: none;
}
.nav-button.prev {
left: 10px;
}
.nav-button.next {
right: 10px;
}
.thumbnail {
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
height: 86px;
object-fit: cover;
opacity: 0.6;
transition:
border-color 250ms ease-out,
opacity 250ms ease-out;
width: 142px;
}
.thumbnail.selected,
.thumbnail:hover {
border-color: #8FB5FF;
opacity: 1;
}
.thumbnail.selected{
height: 102px;
}
.thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
}
.thumbnails-wrapper {
align-items: center;
display: flex;
justify-content: flex-start;
margin-top: 24px;
max-height: 86px;
max-width: 902px;
}
.view-full-gallery {
background-color: white;
border-radius: 12px;
border: 1px solid #E2E2E4;
color: #2563eb;
cursor: pointer;
display: flex;
flex-direction: column;
height: 86px;
justify-content: center;
margin-left: 8px;
min-width: 152px;
transition: background-color 0.3s ease,
box-shadow 0.3s ease,
border-color 250ms ease-out;
}
.view-full-gallery .subtitle {
color: #6b7280;
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.view-full-gallery .title {
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
}
.view-full-gallery:hover {
background-color: #f3f4f6;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
border: 2px solid rgb(143, 181, 255);
}
.description-content {
font-size: 18px;
line-height: 32px;
}
.title {
font-size: 24px;
font-weight: 600;
}
Beskrivning
This portlet automatically displays the future upcoming events taken
from the site’s calendar. While the asset publisher displays the latest
events that have been created, the Upcoming Events portlet will only
display the next ones regardless of when they have been created.
Features
- Display the upcoming events from the site calendar
- Number of events to display and timegrame are configurable
- Each event is linked to the full event detail
- Takes into consideration recursive events
- Configurable “View all events” link for easy access to the full calendar page
- Modern, clean and elegant design that will nicely integrate with any theme
- Front-end available in English, French, German, Spanish, Portuguese and Hungarian. Other languages available upon request.
Features
- Display the upcoming events from the site calendar
- Number of events to display and timegrame are configurable
- Each event is linked to the full event detail
- Takes into consideration recursive events
- Configurable “View all events” link for easy access to the full calendar page
- Modern, clean and elegant design that will nicely integrate with any theme
- Front-end available in English, French, German, Spanish, Portuguese and Hungarian. Other languages available upon request.
This portlet automatically displays the future upcoming events taken
from the site’s calendar. While the asset publisher displays the latest
events that have been created, the Upcoming Events portlet will only
display the next ones regardless of when they have been created.
Features
- Display the upcoming events from the site calendar
- Number of events to display and timegrame are configurable
- Each event is linked to the full event detail
- Takes into consideration recursive events
- Configurable “View all events” link for easy access to the full calendar page
- Modern, clean and elegant design that will nicely integrate with any theme
- Front-end available in English, French, German, Spanish, Portuguese and Hungarian. Other languages available upon request.
Features
- Display the upcoming events from the site calendar
- Number of events to display and timegrame are configurable
- Each event is linked to the full event detail
- Takes into consideration recursive events
- Configurable “View all events” link for easy access to the full calendar page
- Modern, clean and elegant design that will nicely integrate with any theme
- Front-end available in English, French, German, Spanish, Portuguese and Hungarian. Other languages available upon request.
DEVELOPER
Utvecklare
Publisher Date
January 22, 2024
Deployment Method
Liferay Self-Hosted
Liferay PaaS
App Type
DXP
Version
1.3
Standard Price
Free
Help and Support
Dela länk
DEVELOPER
2013-04-26 00:00
Published date
2013-04-26 00:00
Published Date
2013-04-26 00:00
SUPPORTED OFFERINGS
Liferay PaaS
Supported Versions
Resource Requirements
Edition
Community
PRICE
Free
help & support
SHARE LINK
HTML Example
A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.