The site is still using the old version 15. Have you purchased the new version?

General information on the use of the additional objects can be found here, see

-----

Optional Objects: what they are and how to use them

>> https://guide.websitex5.com/en/support/solutions/articles/44000822229

-----

Is there an error message?

If the new object has an arrow, it hasn't been downloaded yet. Simply drag the object into the grid to download it.

If the new version has been purchased, then the old object must be replaced with the new object in the grid.

----- Used version -----

----- New Version -----

----- Old version -----

I do get an error message:

If a new version must be purchased this is the first time I have encountered that situation. Previous updates that I have done have automatically updated when I dragged them into the grid, as you mentioned, without additional expense.
I will have to re-evaluate how usefull that object is to me at this time before re-purchseing.

Thanks for your lightening fast reply.

Is it possible that the program and the previous items were purchased using a different email address?

If they are different email addresses, Incomedia staff would have to merge the two email addresses. However, Incomedia staff will not be online again until Monday during office hours in Italy.

The objects in the Marketplace are updated from time to time, but if there are major changes, Incomedia will create a new object with a slightly different name, which must then be purchased.

@James

You could use the html-object to create a before-after. There is many good on the net.

Take a look here: https://codepen.io/tag/before-after

This one https://codepen.io/tasmagirl/pen/NWVpbJG can handle more than one before-after.

Here is a link to a quick-and-dirty test: https://bramminginfo.dk/js/foerefter.html

It is not functioning 100% - but close. What you see in the source-code should be copied to a HTML-object.

Hello James,
looking at the list of purchased objects for this account, I do not see Before/After Image
Do you perhaps have another e-mail address with which you may have created an account with us other than this one?
Thank you.

Eric, I believe I've had the same e-mail address the entire time I've used X5, several years.

Daniel & John & Eric, thanks much for your responses.

I used to tinker with HTML/CSS code with little expertise, starting in 1997 when things were much simpler. But when HTML5/CSS3 came along they greatly increased complexity, which came along with increased capabilities. That's why I started using X5. So I'll have to study how to employ John's intriguing suggestions.

JAF

@James

Try to put the following codi into a HTML-object. It should function. To shift between images use the left/right arrows on the keyboard. You can of course change the image-source to your own image(s)

<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
.slider-wrapper {
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
background-color: #000;
}
.wrapper,
.gallery,
.img {
max-width: 600px;
height: auto;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
border: 2px solid #000;
margin: 0px auto 90px auto !important;
}
.gallery {
position: relative;
display: flex;
z-index: 1;
flex-direction: column;
}
.img {
min-width: 100%;
display: block;
cursor: pointer;
}
.gallery__resize,
.gallery__resize:after {
position: absolute;
top: 0;
cursor: pointer;
height: 100%;
}
.gallery__resize {
left: 0;
width: 50%;
overflow: hidden;
}
.tr {
transition: 0.6s;
}
.gallery__resize:after {
content: '';
width: 4px;
background-color: #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
position: absolute;
right: 0;
z-index: 20;
}
#before,
#after {
position: absolute;
z-index: 100;
font-size: 16px;
padding: 10px 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #555;
background-color: rgba(255, 255, 255, 0.6);
font-family: 'Open Sans', sans-serif;
border-radius: 2px;
}
#before {
left: 0;
}
#after {
right: 0;
}
#left,
#right,
#photo-count {
position: absolute;
font-size: 18px;
color: #fff;
}
#left {
bottom: -40px;
left: 540px;
}
#right {
right: 15px;
bottom: -40px;
}
#photo-count {
font-size: 18px;
bottom: -40px;
font-weight: 500;
font-family: 'Open Sans', sans-serif;
}
#photo-name {
position: absolute;
font-size: 20px;
color: #fff;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
font-family: 'Open Sans', sans-serif;
}

@media (max-width: 768px) {
#before,
#after {
font-size: 1rem;
padding: 8px 16px;
}
#left,
#right,
#photo-count,
#photo-name {
font-size: 1rem;
bottom: -30px;
}
#left {
left: 350px;
}

.gallery {
width: 400px;
}
.gallery__resize {
width: 50%;
}
img {
width: 400px;
}
}

@media (max-width: 480px) {
#before,
#after {
font-size: 1rem;
padding: 6px 12px;
}
#left,
#right,
#photo-count,
#photo-name {
font-size: 1rem;
bottom: -25px;
}
#left {
left: 300px;
}

.gallery {
width: 350px;
}
.gallery__resize {
width: 50%;
}
img {
width: 350px;
}
}

</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gallery = document.querySelector('.gallery');
const galleryResize = document.querySelector('.gallery__resize');
const before = document.querySelector('#before');
const after = document.querySelector('#after');

gallery.addEventListener('mousemove', (event) => {
let x = event.offsetX;
galleryResize.style.width = x + 'px';
galleryResize.classList.remove('tr');
});

before.onclick = () => {
galleryResize.style.width = '100%';
galleryResize.classList.add('tr');
};

after.onclick = () => {
galleryResize.style.width = '0%';
galleryResize.classList.add('tr');
};

const wrapper = document.querySelector('.wrapper');
const photoBefore = document.querySelector('.img-before');
const photoAfter = document.querySelector('.img-after');
const photoBeforeArray = [
'https://cdn.fs.teachablecdn.com/v7UiewjzS3Kprfpob2hB'
'https://cdn.fs.teachablecdn.com/v7UiewjzS3Kprfpob2hB'
'https://cdn.fs.teachablecdn.com/vc1bqcmPScTG7Civt1Oc'
'https://cdn.fs.teachablecdn.com/ArPvY4UBQ9WBS9krDneF'
'https://cdn.fs.teachablecdn.com/uwxpa9TeGAqjZxluyngO'
'https://cdn.fs.teachablecdn.com/gnWdMEjjS7vZXoNrHang'
];
const photoAfterArray = [
'https://cdn.fs.teachablecdn.com/uSqKRhLtQmgMyDvdby9Q'
'https://cdn.fs.teachablecdn.com/MtTtxZHnTnKXm1gG1ydR'
'https://cdn.fs.teachablecdn.com/CevzlmddSPOY4Oze7MDD'
'https://cdn.fs.teachablecdn.com/YLGWnq88Q4uzegpshmWC'
'https://cdn.fs.teachablecdn.com/MtTtxZHnTnKXm1gG1ydR'
'https://cdn.fs.teachablecdn.com/MWvnf3LmRU2fvnoC7rbD'
];
const photoNames = ['Image 1', 'Ekstra', 'Billede 2' ,'Image 3', 'Image 4', 'Image 5'];

const left = document.querySelector('#left');
const right = document.querySelector('#right');
const photoName = document.querySelector('#photo-name');
let count = 0;
let countPhoto = 1;

right.addEventListener('click', nextPhoto);
left.addEventListener('click', prevPhoto);

window.addEventListener('keydown', (e) => {
let w = galleryResize.offsetWidth;

if (e.keyCode === 39) {
nextPhoto();
} else if (e.keyCode === 37) {
prevPhoto();
} else if (e.keyCode === 38) {
galleryResize.classList.remove('tr');
w = w + 50;
getW(w);
if (w > gallery.offsetWidth) {
galleryResize.style.width = '100%';
}
} else if (e.keyCode === 40) {
galleryResize.classList.remove('tr');
w = w - 50;
getW(w);
}
});

const title = createSpanCount(countPhoto);
wrapper.append(title);

function nextPhoto() {
count++;
countPhoto++;
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
galleryResize.style.width = '50%';
galleryResize.classList.add('tr');
if (count >= photoBeforeArray.length) {
count = 0;
countPhoto = 1;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
}
}

function prevPhoto() {
count--;
countPhoto--;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
if (count < 0) {
count = photoBeforeArray.length - 1;
countPhoto = photoBeforeArray.length;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
}
}

function createSpanCount(n) {
const title = document.createElement('h1');
title.id = 'photo-count';
title.innerHTML = `${n} / ${photoBeforeArray.length}`;
return title;
}

function getW(n) {
galleryResize.style.width = n + 'px';
if (n > gallery.offsetWidth) return;
}
});
</script>

<div class="slider-wrapper">
<div class="wrapper">
<span id="before" class="btn">Før</span>
<span id="after" class="btn">After</span>
<span id="left" class="btn"><i class="fa-solid fa-arrow-left"></i></span>
<span id="right" class="btn"><i class="fa-solid fa-arrow-right"></i></span>
<div class="gallery">
<img
src="https://cdn.fs.teachablecdn.com/uSqKRhLtQmgMyDvdby9Q"
alt=""
class="img img-after"
/>
<div class="gallery__resize">
<img
src="https://cdn.fs.teachablecdn.com/v7UiewjzS3Kprfpob2hB"
alt=""
class="img img-before"
/>
</div>
</div>
<span id="photo-name">Image 1</span>
</div>
</div>